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

Merge branch 'client_sync' into v2

Browse Source 
# Conflicts:
#	packages/ui/certd-client/CHANGELOG.md
#	packages/ui/certd-client/package.json
#	packages/ui/certd-client/src/api/tools.ts
#	packages/ui/certd-client/src/components/index.ts
#	packages/ui/certd-client/src/main.ts
#	packages/ui/certd-client/src/plugin/fast-crud/index.tsx
#	packages/ui/certd-client/src/plugin/index.ts
#	packages/ui/certd-client/src/router/source/framework.ts
#	packages/ui/certd-client/src/store/modules/page.ts
#	packages/ui/certd-client/src/style/common.less
#	packages/ui/certd-client/src/utils/util.env.ts
#	packages/ui/certd-client/src/views/crud/form/independent/index.vue
#	packages/ui/certd-client/src/views/framework/register/index.vue
#	packages/ui/certd-client/vite.config.ts
This commit is contained in:
xiaojunnuo
2023-10-27 11:54:38 +08:00
parent c43718652a 461a12e909
commit e7704171f7
483 changed files with 7737 additions and 5075 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/certd-client/src/views/crud/advanced/big-data/api.js → packages/ui/certd-client/src/views/crud/advanced/big-data/api.ts
+7 -6
View File
@@ -1,7 +1,8 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/AdvancedBigData";
export function GetList(query) {
export function GetList(query: any) {
return request({
url: apiPrefix + "/page",
method: "get",
@@ -9,7 +10,7 @@ export function GetList(query) {
});
}
export function AddObj(obj) {
export function AddObj(obj: any) {
return request({
url: apiPrefix + "/add",
method: "post",
@@ -17,7 +18,7 @@ export function AddObj(obj) {
});
}
export function UpdateObj(obj) {
export function UpdateObj(obj: any) {
return request({
url: apiPrefix + "/update",
method: "post",
@@ -25,7 +26,7 @@ export function UpdateObj(obj) {
});
}
export function DelObj(id) {
export function DelObj(id: any) {
return request({
url: apiPrefix + "/delete",
method: "post",
@@ -33,9 +34,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/advanced/big-data/crud.jsx → packages/ui/certd-client/src/views/crud/advanced/big-data/crud.tsx
+18 -18
View File
@@ -1,25 +1,26 @@
import * as api from "./api";
import { message } from "ant-design-vue";
import { dict } from "@fast-crud/fast-crud";
export default function ({ expose }) {
const pageRequest = async (query) => {
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 }) => {
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);
};
return {
output: {},
crudOptions: {
//大量数据的crud配置
request: {
pageRequest,
addRequest,
@@ -41,7 +42,6 @@ export default function ({ expose }) {
columns: {
id: {
title: "ID",
key: "id",
type: "number",
column: {
width: 50
@@ -58,70 +58,70 @@ export default function ({ expose }) {
title: "字典1",
type: "dict-select",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?from=dict1"
url: "/mock/dicts/ManyOpenStatusEnum?from=dict1"
})
},
dict2: {
title: "字典2",
type: "dict-select",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?from=dict2"
url: "/mock/dicts/ManyOpenStatusEnum?from=dict2"
})
},
dict3: {
title: "字典3",
type: "dict-select",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?from=dict3"
url: "/mock/dicts/ManyOpenStatusEnum?from=dict3"
})
},
dict4: {
title: "字典4",
type: "dict-select",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?from=dict4"
url: "/mock/dicts/ManyOpenStatusEnum?from=dict4"
})
},
dict5: {
title: "字典5",
type: "dict-select",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?from=dict5"
url: "/mock/dicts/ManyOpenStatusEnum?from=dict5"
})
},
dict6: {
title: "字典6",
type: "dict-select",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?from=dict6"
url: "/mock/dicts/ManyOpenStatusEnum?from=dict6"
})
},
dict7: {
title: "字典7",
type: "dict-select",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?from=dict7"
url: "/mock/dicts/ManyOpenStatusEnum?from=dict7"
})
},
dict8: {
title: "字典8",
type: "dict-select",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?from=dict8"
url: "/mock/dicts/ManyOpenStatusEnum?from=dict8"
})
},
dict9: {
title: "字典9",
type: "dict-select",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?from=dict9"
url: "/mock/dicts/ManyOpenStatusEnum?from=dict9"
})
},
dict10: {
title: "字典10",
type: "dict-select",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?from=dict10"
url: "/mock/dicts/ManyOpenStatusEnum?from=dict10"
})
},
text1: {
packages/ui/certd-client/src/views/crud/advanced/big-data/index.vue
+7 -19
View File
@@ -7,30 +7,18 @@
</fs-page>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import { useCrud, useExpose } from "@fast-crud/fast-crud";
import createCrudOptions from "./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: "AdvancedBigData",
setup() {
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { expose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions, output } = createCrudOptions({ expose });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ expose, crudOptions });
// 你可以调用此方法，重新初始化crud配置
// resetCrudOptions(options)
const { crudBinding, crudRef, crudExpose, output } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
packages/ui/certd-client/src/views/crud/advanced/big-data/mock.js → packages/ui/certd-client/src/views/crud/advanced/big-data/mock.ts
+3 -1
View File
@@ -1,7 +1,9 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "AdvancedBigData",
idGenerator: 0,
//此处copy多次，模拟大量数据
copyTimes: 1000
};
const list = [
packages/ui/certd-client/src/views/crud/advanced/from-backend/api.js → packages/ui/certd-client/src/views/crud/advanced/from-backend/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/AdvancedFromBackend";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/advanced/from-backend/crud-backend.js → packages/ui/certd-client/src/views/crud/advanced/from-backend/crud-backend.ts
+2 -1
View File
@@ -1,5 +1,6 @@
//此处演示从后台获取crudOptions配置字符串
export const crudOptions = `
({expose,dict}) => {
({crudExpose,dict}) => {
return {
columns: {
id: {
packages/ui/certd-client/src/views/crud/advanced/from-backend/crud.jsx
-27
View File
@@ -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
}
}
};
}
packages/ui/certd-client/src/views/crud/advanced/from-backend/crud.tsx
+49
View File
@@ -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
};
}
packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue
+22 -23
View File
@@ -1,39 +1,38 @@
<template>
<fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding" />
<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>
import { defineComponent, ref, onMounted } from "vue";
import { useCrud, dict, useExpose } from "@fast-crud/fast-crud";
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from "vue";
import { CrudBinding, 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 = {};
//异步初始化fs，createCrudOptions为异步方法
const { crudExpose, context } = await useFsAsync({ crudRef, crudBinding, createCrudOptions, context: customValue });
// 刷新数据
expose.doRefresh();
await crudExpose.doRefresh();
});
return {
packages/ui/certd-client/src/views/crud/advanced/from-backend/mock.js → packages/ui/certd-client/src/views/crud/advanced/from-backend/mock.ts
+3 -2
View File
@@ -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",
packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/api.js → packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/AdvancedInDialog";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.jsx → packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx
+13 -16
View File
@@ -1,19 +1,22 @@
import * as api from "./api";
export default function ({ expose }) {
const pageRequest = async (query) => {
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, dict } 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 }) => {
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);
};
return {
crudOptions: {
request: {
@@ -68,23 +71,16 @@ export default function ({ expose }) {
},
render: {
title: "复杂输入(render)",
type: "text",
form: {
title: "复杂输入",
component: {
render(context) {
render(context: any) {
console.log("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 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>
);
}
@@ -93,6 +89,7 @@ export default function ({ expose }) {
},
render2: {
title: "我的值是由复杂输入列输入的",
type: "text",
column: {
width: "300px"
},
packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/index.vue
+7 -19
View File
@@ -4,31 +4,19 @@
</fs-page>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import { useCrud } from "@fast-crud/fast-crud";
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { useExpose } from "@fast-crud/fast-crud";
export default defineComponent({
name: "fs-in-dialog",
name: "FsInDialog",
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 { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/mock.js → packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/mock.ts
+2 -1
View File
@@ -1,5 +1,6 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "AdvancedInDialog",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/advanced/in-dialog/index.vue
+12 -12
View File
@@ -1,32 +1,32 @@
<template>
<fs-page>
<template #header>
<div class="title">
对话框中显示crud
</div>
<div class="title">对话框中显示crud</div>
</template>
<div style="padding:50px">
<div style="padding: 50px">
<a-button type="primary" @click="openDialog">打开对话框</a-button>
</div>
<a-modal v-model:visible="dialogShow" width="80%" title="fs-crud in dialog">
<div style="height: 400px;position: relative">
<fs-in-dialog ></fs-in-dialog>
<div style="height: 400px; position: relative">
<!-- 在此处显示fs-crud页面 -->
<fs-in-dialog></fs-in-dialog>
</div>
</a-modal>
</fs-page>
</template>
<script>
<script lang="ts">
import { defineComponent, ref } from "vue";
import FsInDialog from './crud/index.vue'
//将fs-crud做成的页面在此处引入
import FsInDialog from "./crud/index.vue";
export default defineComponent({
name: "InDialog",
components:{FsInDialog},
components: { FsInDialog },
setup() {
const dialogShow = ref(false)
function openDialog(){
dialogShow.value=true
const dialogShow = ref(false);
function openDialog() {
dialogShow.value = true;
}
return {
dialogShow,
packages/ui/certd-client/src/views/crud/advanced/linkage/api.js → packages/ui/certd-client/src/views/crud/advanced/linkage/api.ts
+6 -6
View File
@@ -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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/advanced/linkage/crud.jsx → packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx
+9 -10
View File
@@ -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 ({ crudExpose }: 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);
};
@@ -30,7 +30,6 @@ export default function ({ expose }) {
columns: {
id: {
title: "ID",
key: "id",
type: "number",
column: {
width: 50
@@ -70,7 +69,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 +80,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 +103,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}`;
}
packages/ui/certd-client/src/views/crud/advanced/linkage/index.vue
+8 -19
View File
@@ -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, context } = useFs({ createCrudOptions, context: customValue });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
packages/ui/certd-client/src/views/crud/advanced/linkage/mock.js → packages/ui/certd-client/src/views/crud/advanced/linkage/mock.ts
+8 -7
View File
@@ -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;
packages/ui/certd-client/src/views/crud/advanced/local-pagination/api.js → packages/ui/certd-client/src/views/crud/advanced/local-pagination/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/AdvancedLocalPagination";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.jsx → packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.tsx
+12 -9
View File
@@ -1,14 +1,17 @@
import * as api from "./api";
import * as api from "./api.js";
import _ from "lodash-es";
import { dict } from "@fast-crud/fast-crud";
export default function ({ expose, localDataRef }) {
const pageRequest = async ({ page, query }) => {
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;
let offset = page.offset;
data = data.filter((item) => {
const offset = page.offset;
data = data.filter((item: any) => {
// 根据你的业务，编写你的本地查询逻辑
// text改成你的查询字段
if (query.status && item.status !== query.status) {
@@ -33,7 +36,7 @@ export default function ({ expose, localDataRef }) {
records
};
};
const editRequest = async ({ form, row }) => {
const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id;
await api.UpdateObj(form);
//更新本地数据
@@ -45,7 +48,7 @@ export default function ({ expose, localDataRef }) {
}
};
const addRequest = async ({ form }) => {
const addRequest = async ({ form }: AddReq) => {
const id = await api.AddObj(form);
//本地添加
form.id = id;
@@ -53,7 +56,7 @@ export default function ({ expose, localDataRef }) {
return id;
};
const delRequest = async ({ row }) => {
const delRequest = async ({ row }: DelReq) => {
await api.DelObj(row.id);
//本地删除那一条记录
const tableData = localDataRef.value;
packages/ui/certd-client/src/views/crud/advanced/local-pagination/index.vue
+4 -10
View File
@@ -11,9 +11,9 @@
</fs-page>
</template>
<script>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useCrud, useExpose } from "@fast-crud/fast-crud";
import { useCrud, useExpose, useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { GetList } from "./api";
@@ -36,16 +36,10 @@ export default defineComponent({
const ret = await GetList({ page: { offset: 0, limit: 99999999 }, query: {}, sort: {} });
localDataRef.value = ret.records;
//然后再初始化crud
// 暴露的方法
const { expose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ expose, localDataRef });
// 初始化crud配置
useCrud({ expose, crudOptions });
const { crudExpose } = useFs({ crudBinding, crudRef, createCrudOptions, context: { localDataRef } });
// 页面打开后获取列表数据
await expose.doRefresh();
await crudExpose.doRefresh();
});
return {
packages/ui/certd-client/src/views/crud/advanced/local-pagination/mock.js → packages/ui/certd-client/src/views/crud/advanced/local-pagination/mock.ts
+2 -1
View File
@@ -1,5 +1,6 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "AdvancedLocalPagination",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/advanced/nest/api.js → packages/ui/certd-client/src/views/crud/advanced/nest/api.ts
+7 -7
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/AdvancedNest";
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,15 +33,15 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
}
export function BatchDelete(ids) {
export function BatchDelete(ids: any[]) {
return request({
url: apiPrefix + "/batchDelete",
method: "post",
packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/api.js → packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/api.ts
+7 -7
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/AdvancedAside";
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,15 +33,15 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
}
export function BatchDelete(ids) {
export function BatchDelete(ids: any[]) {
return request({
url: apiPrefix + "/batchDelete",
method: "post",
packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.jsx → packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.tsx
+10 -5
View File
@@ -1,14 +1,19 @@
import * as api from "./api";
import { dict } from "@fast-crud/fast-crud";
export default function ({ expose }) {
const editRequest = async ({ form, row }) => {
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 }) => {
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);
};
packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/index.vue
+9 -20
View File
@@ -6,37 +6,26 @@
</fs-crud>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import createCrudOptions from "./crud";
import { useExpose, useCrud } from "@fast-crud/fast-crud";
<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() {
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { expose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions, selectedIds } = createCrudOptions({ expose });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ expose, crudOptions });
// 你可以调用此方法，重新初始化crud配置
// resetCrudOptions(options)
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
crudBinding,
crudRef,
setSearchFormData: expose.setSearchFormData,
doRefresh: expose.doRefresh
setSearchFormData: crudExpose.setSearchFormData,
doRefresh: crudExpose.doRefresh
};
}
});
packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/mock.js → packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/mock.ts
+2 -1
View File
@@ -1,5 +1,6 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "AdvancedAside",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/advanced/nest/crud.jsx → packages/ui/certd-client/src/views/crud/advanced/nest/crud.tsx
+14 -9
View File
@@ -1,21 +1,27 @@
import * as api from "./api";
import { ref, shallowRef } from "vue";
import SubTable from "./sub-table/index.vue";
import { compute } from "@fast-crud/fast-crud";
export default function ({ expose, asideTableRef }) {
const editRequest = async ({ form, row }) => {
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) => {
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);
};
const currentRow = ref();
const onCurrentRowChange = (id) => {
const onCurrentRowChange = (id: number) => {
currentRow.value = id;
asideTableRef.value.setSearchFormData({ form: { gradeId: id } });
asideTableRef.value.doRefresh();
@@ -23,7 +29,7 @@ export default function ({ expose, asideTableRef }) {
return {
crudOptions: {
table: {
customRow(record, index) {
customRow(record: any, index: number) {
const clazz = record.id === currentRow.value ? "fs-current-row" : "";
return {
onClick() {
@@ -82,8 +88,7 @@ export default function ({ expose, asideTableRef }) {
// 嵌套表格字段
rules: [{ required: true, message: "请选择用户" }],
component: {
//局部引用子表格，要用shallowRef包裹
name: shallowRef(SubTable),
name: SubTable,
vModel: "modelValue",
gradeId: compute(({ form }) => {
return form.id;
packages/ui/certd-client/src/views/crud/advanced/nest/index.vue
+8 -18
View File
@@ -13,34 +13,24 @@
</a-row>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import createCrudOptions from "./crud";
import { useExpose, useCrud } from "@fast-crud/fast-crud";
<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() {
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { expose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const asideTableRef = ref();
const { crudOptions } = createCrudOptions({ expose, asideTableRef });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ expose, crudOptions });
// 你可以调用此方法，重新初始化crud配置
// resetCrudOptions(options)
const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions, context: { asideTableRef } });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
packages/ui/certd-client/src/views/crud/advanced/nest/mock.js → packages/ui/certd-client/src/views/crud/advanced/nest/mock.ts
+2 -1
View File
@@ -1,5 +1,6 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "AdvancedNest",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/api.js → packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/api.ts
+7 -7
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/AdvancedSubTable";
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,15 +33,15 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
}
export function BatchDelete(ids) {
export function BatchDelete(ids: any[]) {
return request({
url: apiPrefix + "/batchDelete",
method: "post",
packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/crud.jsx → packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/crud.tsx
+11 -5
View File
@@ -1,20 +1,26 @@
import * as api from "./api";
export default function ({ expose, props, ctx }) {
const editRequest = async ({ form, row }) => {
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) => {
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);
};
return {
crudOptions: {
table: {
customRow(record, index) {
customRow(record: any, index: number) {
const clazz = record.id === props.modelValue ? "fs-current-row" : "";
return {
onClick() {
packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue
+6 -17
View File
@@ -7,10 +7,11 @@
</div>
</template>
<script>
import { defineComponent, ref, onMounted, watch } from "vue";
<script lang="ts">
import { defineComponent, onMounted, watch } from "vue";
import createCrudOptions from "./crud";
import { useExpose, useCrud } from "@fast-crud/fast-crud";
import { useFs } from "@fast-crud/fast-crud";
export default defineComponent({
name: "SubTable",
props: {
@@ -19,23 +20,11 @@ export default defineComponent({
},
emits: ["update:modelValue"],
setup(props, ctx) {
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { expose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ expose, props, ctx });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ expose, crudOptions });
// 你可以调用此方法，重新初始化crud配置
// resetCrudOptions(options)
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { props, ctx } });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
//你的业务代码
packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/mock.js → packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/mock.ts
+2 -1
View File
@@ -1,5 +1,6 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "AdvancedSubTable",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/api.js → packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/BasisColumnMergePlugin";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.jsx → packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.tsx
+6 -7
View File
@@ -1,24 +1,23 @@
import * as api from "./api";
import { dict } from "@fast-crud/fast-crud";
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
export default function ({ expose }) {
const pageRequest = async (query) => {
export default function ({ crudExpose }: 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);
};
return {
output: {},
crudOptions: {
settings: {
viewFormUseCellComponent: true
packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/index.vue
+4 -3
View File
@@ -12,14 +12,15 @@
</fs-page>
</template>
<script>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import createCrudOptions from "./crud";
import { useFs } from "@fast-crud/fast-crud";
import { useFs, UseFsProps } from "@fast-crud/fast-crud";
export default defineComponent({
name: "BasisColumnMergePlugin",
setup() {
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
const context: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
// 页面打开后获取列表数据
onMounted(() => {
crudExpose.doRefresh();
packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/mock.js → packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/mock.ts
+2 -1
View File
@@ -1,5 +1,6 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "BasisColumnMergePlugin",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/basis/columns-set/api.js → packages/ui/certd-client/src/views/crud/basis/columns-set/api.ts
+7 -7
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/BasisColumnsSet";
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,15 +33,15 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
}
export function BatchDelete(ids) {
export function BatchDelete(ids: any) {
return request({
url: apiPrefix + "/batchDelete",
method: "post",
packages/ui/certd-client/src/views/crud/basis/columns-set/crud.jsx
-69
View File
@@ -1,69 +0,0 @@
import * as api from "./api";
import { dict } from "@fast-crud/fast-crud";
import { ref } from "vue";
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
},
toolbar: {
columnsFilter: {
mode: "default"
}
},
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"
})
},
disabled: {
title: "列设置禁用",
type: "text",
column: {
columnSetDisabled: true
}
},
hidden: {
title: "列设置隐藏",
type: "text",
column: {
columnSetShow: false
}
}
}
}
};
}
packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx
+98
View File
@@ -0,0 +1,98 @@
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";
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) => {
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"
}
},
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"
})
},
disabled: {
title: "列设置禁用",
type: "text",
column: {
columnSetDisabled: true
}
},
hidden: {
title: "列设置隐藏",
type: "text",
column: {
columnSetShow: false
}
}
}
}
};
}
packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue
+24 -28
View File
@@ -1,51 +1,47 @@
<template>
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding">
<template #actionbar-right>
<a-alert class="ml-1" type="warning" message="列设置可以禁用或者隐藏某字段勾选" />
<a-button @click="columnsSetToggleMode()"> 切换简单模式 </a-button>
</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/toolbar.html#columnsfilter-mode">文档</a>
</div>
</template>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</fs-page>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, Ref } from "vue";
import createCrudOptions from "./crud.jsx";
import { useExpose, useCrud, CrudBinding } from "@fast-crud/fast-crud";
import { message, Modal, notification } from "ant-design-vue";
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() {
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding: Ref<CrudBinding> = ref({});
// 暴露的方法
const { expose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions, selectedRowKeys } = createCrudOptions({ expose });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ expose, crudOptions });
// 你可以调用此方法，重新初始化crud配置
// resetCrudOptions(options)
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
function columnsSetToggleMode() {
crudBinding.value.toolbar.columnsFilter.mode =
crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
message.info("当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
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
columnsSetToggleMode,
columnsSetShowToggle
};
}
});
packages/ui/certd-client/src/views/crud/basis/columns-set/mock.js → packages/ui/certd-client/src/views/crud/basis/columns-set/mock.ts
+2 -1
View File
@@ -1,5 +1,6 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "BasisColumnsSet",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/basis/compute-more/api.js → packages/ui/certd-client/src/views/crud/basis/compute-more/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/FormComputeMore";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/basis/compute-more/crud.jsx → packages/ui/certd-client/src/views/crud/basis/compute-more/crud.tsx
+9 -11
View File
@@ -1,22 +1,20 @@
import * as api from "./api";
import { requestForMock } from "/src/api/service";
import { useCompute } from "@fast-crud/fast-crud";
import { message } from "ant-design-vue";
import { ref, computed } from "vue";
const { asyncCompute, compute } = useCompute();
export default function ({ expose }) {
const pageRequest = async (query) => {
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
import { computed, ref } 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 }) => {
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);
};
@@ -48,7 +46,7 @@ export default function ({ expose }) {
},
rowHandle: {
fixed: "right",
align:'center',
align: "center"
},
columns: {
id: {
packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue
+9 -17
View File
@@ -2,35 +2,27 @@
<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>
import { defineComponent, ref, onMounted } from "vue";
import { useCrud, 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";
export default defineComponent({
name: "BasisComputeMore",
setup() {
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { expose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions, output } = createCrudOptions({ expose });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ expose, crudOptions });
// 你可以调用此方法，重新初始化crud配置
// resetCrudOptions(options)
const { crudBinding, crudRef, crudExpose, output } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
packages/ui/certd-client/src/views/crud/basis/compute-more/mock.js → packages/ui/certd-client/src/views/crud/basis/compute-more/mock.ts
+2 -1
View File
@@ -1,5 +1,6 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "FormComputeMore",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/basis/compute/api.js → packages/ui/certd-client/src/views/crud/basis/compute/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/FormCompute";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/basis/compute/crud.jsx → packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx
+17 -30
View File
@@ -1,43 +1,29 @@
import * as api from "./api";
import { requestForMock } from "/src/api/service";
import { useCompute } from "@fast-crud/fast-crud";
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, GetContextFn, ScopeContext, useCompute, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
import { message } from "ant-design-vue";
import { ref, computed } from "vue";
import { computed } from "vue";
const { asyncCompute, compute } = useCompute();
export default function ({ expose }) {
const pageRequest = async (query) => {
export default function ({ crudExpose, context }: 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);
};
//普通的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 { showRef, showTableComputed, columnComponentShowComputed } = context;
return {
output: {
showRef,
showTableRef,
columnComponentShowRef
},
crudOptions: {
request: {
pageRequest,
@@ -58,9 +44,12 @@ export default function ({ expose }) {
},
rowHandle: {
fixed: "right",
show: computed(() => {
return true;
}),
buttons: {
edit: {
show: compute(({ row }) => {
show: compute<boolean>(({ row }) => {
return row.editable;
})
},
@@ -153,7 +142,7 @@ export default function ({ expose }) {
vModel: "value",
placeholder: "异步计算远程获取options",
options: asyncCompute({
async asyncFn(watchValue, context) {
async asyncFn(watchValue: any, context: GetContextFn) {
const url = "/mock/dicts/OpenStatusEnum?remote";
return await requestForMock({ url });
}
@@ -172,14 +161,12 @@ export default function ({ expose }) {
vModel: "value",
placeholder: "异步计算远程获取options",
options: asyncCompute({
watch({ form }) {
watch({ form }: ScopeContext) {
return form.compute;
},
async asyncFn(watchValue) {
async asyncFn(watchValue: string) {
message.info("监听switch,触发远程获取options");
const url = watchValue
? "/mock/dicts/OpenStatusEnum?remote"
: "/mock/dicts/moreOpenStatusEnum?remote";
const url = watchValue ? "/mock/dicts/OpenStatusEnum?remote" : "/mock/dicts/moreOpenStatusEnum?remote";
return await requestForMock({ url });
}
})
packages/ui/certd-client/src/views/crud/basis/compute/index.vue
+32 -19
View File
@@ -6,7 +6,7 @@
<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>
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">文档</a>
</div>
</template>
<fs-crud ref="crudRef" v-bind="crudBinding">
@@ -15,6 +15,7 @@
<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>
@@ -24,36 +25,48 @@
</fs-page>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import { useCrud, useExpose } from "@fast-crud/fast-crud";
<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() {
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { expose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions, output } = createCrudOptions({ expose });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ expose, crudOptions });
// 你可以调用此方法，重新初始化crud配置
// resetCrudOptions(options)
//普通的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(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
crudBinding,
crudRef,
...output
...context,
columnsMapSetShow
};
}
});
packages/ui/certd-client/src/views/crud/basis/compute/mock.js → packages/ui/certd-client/src/views/crud/basis/compute/mock.ts
+2 -1
View File
@@ -1,5 +1,6 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "FormCompute",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/basis/custom/api.ts
+42
View File
@@ -0,0 +1,42 @@
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 }
});
}
packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx
+146
View File
@@ -0,0 +1,146 @@
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) => {
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: shallowRef(VmodelCounter),
color: "blue",
slots: {
//插槽示例
default() {
return <span>counter on cell:</span>;
}
},
on: {
//监听事件
onChange({ $event, row }) {
message.info("counter changed:" + $event);
}
}
}
},
form: {
//form表单
component: {
//引用自定义组件
name: shallowRef(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>
);
}
}
}
}
}
};
}
packages/ui/certd-client/src/views/crud/basis/custom/index.vue
+32
View File
@@ -0,0 +1,32 @@
<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>
packages/ui/certd-client/src/views/crud/basis/custom/mock.ts
+22
View File
@@ -0,0 +1,22 @@
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;
packages/ui/certd-client/src/views/crud/basis/custom/vmodel-counter.vue
+45
View File
@@ -0,0 +1,45 @@
<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>
packages/ui/certd-client/src/views/crud/basis/first/api.ts
+42
View File
@@ -0,0 +1,42 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/FsCrudFirst";
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 }
});
}
packages/ui/certd-client/src/views/crud/basis/first/crud.ts
+52
View File
@@ -0,0 +1,52 @@
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
import * as api from "./api";
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) => {
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: {
// 自定义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: "开始", color: "green" },
{ value: 0, label: "停止", color: "red" }
]
})
}
}
}
};
}
packages/ui/certd-client/src/views/crud/basis/first/index.vue
+25 -87
View File
@@ -1,105 +1,43 @@
<template>
<fs-page>
<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" />
</fs-page>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import { dict, useCrud } from "@fast-crud/fast-crud";
import { useExpose } from "@fast-crud/fast-crud";
import _ from "lodash-es";
//此处为crudOptions配置
const createCrudOptions = function ({ expose }) {
//本地模拟后台crud接口方法 ----开始
const records = [{ id: 1, name: "Hello World", type: 1 }];
const pageRequest = async (query) => {
return {
records,
currentPage: 1,
pageSize: 20,
total: records.length
};
};
const editRequest = async ({ form, row }) => {
const target = _.find(records, (item) => {
return row.id === item.id;
});
_.merge(target, form);
return target;
};
const delRequest = async ({ row }) => {
_.remove(records, (item) => {
return item.id === row.id;
});
};
const addRequest = async ({ form }) => {
const maxRecord = _.maxBy(records, (item) => {
return item.id;
});
form.id = (maxRecord?.id || 0) + 1;
records.push(form);
return form;
};
//本地模拟后台crud接口方法 -----结束
return {
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: "停止" }
]
})
}
}
}
};
};
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
//此处为组件定义
export default defineComponent({
name: "FsCrudFirst",
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)
// // 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({ createCrudOptions, context: {} });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
crudBinding,
crudRef
packages/ui/certd-client/src/views/crud/basis/first/mock.ts
+22
View File
@@ -0,0 +1,22 @@
// @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;
packages/ui/certd-client/src/views/crud/basis/helloworld/index.vue
+116
View File
@@ -0,0 +1,116 @@
<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 = reactive([{ id: 1, name: "Hello World", type: 1 }]);
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
return {
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>
packages/ui/certd-client/src/views/crud/basis/i18n/api.js → packages/ui/certd-client/src/views/crud/basis/i18n/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/BasisI18n";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/basis/i18n/crud.jsx → packages/ui/certd-client/src/views/crud/basis/i18n/crud.tsx
+10 -7
View File
@@ -1,22 +1,25 @@
import * as api from "./api";
import { dict } from "@fast-crud/fast-crud";
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
import { useI18n } from "vue-i18n";
export default function ({ expose }) {
const { t } = useI18n();
const pageRequest = async (query) => {
export default function ({ crudExpose }: 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);
};
const { t } = useI18n();
return {
crudOptions: {
request: {
packages/ui/certd-client/src/views/crud/basis/i18n/index.vue
+11 -26
View File
@@ -2,7 +2,9 @@
<fs-page>
<template #header>
<div class="title">CRUD示例【国际化】</div>
<div class="more"><a-button @click="showDemo">更多</a-button></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>
@@ -12,41 +14,24 @@
</fs-page>
</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";
import { message } from "ant-design-vue";
<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() {
// 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 { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
function showDemo() {
message("演示按钮");
}
return {
crudBinding,
crudRef,
showDemo
crudRef
};
}
});
packages/ui/certd-client/src/views/crud/basis/i18n/mock.js → packages/ui/certd-client/src/views/crud/basis/i18n/mock.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "BasisI18n",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/basis/layout-card/api.js → packages/ui/certd-client/src/views/crud/basis/layout-card/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/BasisLayoutCard";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/basis/layout-card/crud.jsx
-73
View File
@@ -1,73 +0,0 @@
import * as api from "./api";
import { dict } from "@fast-crud/fast-crud";
export default function ({ crudExpose }) {
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: {
container: {
is: "fs-layout-card"
},
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: true },
type: "dict-radio",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?single"
})
}
}
}
};
}
packages/ui/certd-client/src/views/crud/basis/layout-card/crud.tsx
+105
View File
@@ -0,0 +1,105 @@
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) => {
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"
})
}
}
}
};
}
packages/ui/certd-client/src/views/crud/basis/layout-card/index.vue
+15 -17
View File
@@ -1,30 +1,24 @@
<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"> </fs-crud>
</fs-page>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import { useCrud } from "@fast-crud/fast-crud";
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import createCrudOptions from "./crud";
import { useExpose } from "@fast-crud/fast-crud";
import { useFs } from "@fast-crud/fast-crud";
export default defineComponent({
name: "BasisLayoutCard",
setup() {
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
// 你可以调用此方法，重新初始化crud配置
// resetCrudOptions(options)
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
@@ -42,5 +36,9 @@ export default defineComponent({
<style lang="less">
.page-layout-card {
background-color: #eee;
.fs-page-header {
background-color: #fff;
}
}
</style>
packages/ui/certd-client/src/views/crud/basis/layout-card/mock.js → packages/ui/certd-client/src/views/crud/basis/layout-card/mock.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "BasisLayoutCard",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/basis/layout-custom/api.js → packages/ui/certd-client/src/views/crud/basis/layout-custom/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/BasisLayoutCustom";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.jsx → packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.tsx
+13 -7
View File
@@ -1,27 +1,33 @@
import * as api from "./api";
import { dict } from "@fast-crud/fast-crud";
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 }) {
const pageRequest = async (query) => {
export default function ({ crudExpose }: 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);
};
return {
crudOptions: {
container: {
is: shallowRef(CustomLayout) //可以将自定义布局组件全局注册，这里只需要配置name即可
},
tabs: {
show: true,
name: "city",
type: "card"
} as any,
request: {
pageRequest,
addRequest,
@@ -48,7 +54,7 @@ export default function ({ crudExpose }) {
city: {
title: "城市",
type: "dict-select",
search: { show: false },
search: { show: true },
dict: dict({
value: "id",
label: "text",
packages/ui/certd-client/src/views/crud/basis/layout-custom/custom-layout.vue
+7
View File
@@ -9,6 +9,8 @@
<div class="layout-top">
<!-- ↓↓↓↓↓ 关键插槽：动作条 ↓↓↓↓ -->
<slot name="actionbar"></slot>
<slot name="tabs"></slot>
<!-- ↓↓↓↓↓ 上翻页条 ↓↓↓↓ -->
<slot name="pagination"></slot>
</div>
@@ -70,5 +72,10 @@ export default defineComponent({
text-align: right;
padding: 5px 10px 5px 10px;
}
.fs-tabs-filter {
flex: 1;
margin-left: 10px;
}
}
</style>
packages/ui/certd-client/src/views/crud/basis/layout-custom/index.vue
+14 -28
View File
@@ -1,41 +1,27 @@
<template>
<fs-page class="page-layout-custom">
<template #header>
<div class="title">自定义布局</div>
<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">
<template #actionbar-right>
<a-alert
class="ml-1"
type="info"
message="通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条 -------->"
/>
</template>
</fs-crud>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</fs-page>
</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: "BasisLayoutCustom",
setup() {
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
// 你可以调用此方法，重新初始化crud配置
// resetCrudOptions(options)
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
packages/ui/certd-client/src/views/crud/basis/layout-custom/mock.js → packages/ui/certd-client/src/views/crud/basis/layout-custom/mock.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "BasisLayoutCustom",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/basis/reset/api.ts
+42
View File
@@ -0,0 +1,42 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/BasisReset";
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 }
});
}
packages/ui/certd-client/src/views/crud/basis/reset/crud.tsx
+54
View File
@@ -0,0 +1,54 @@
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);
};
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: "关闭" }
]
})
}
}
}
};
}
packages/ui/certd-client/src/views/crud/basis/reset/index.vue
+53
View File
@@ -0,0 +1,53 @@
<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 } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud.js";
import _ from "lodash-es";
export default defineComponent({
name: "BasisReset",
setup() {
const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions, appendBindingOptions } = useFs({ createCrudOptions, context: {} });
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>
packages/ui/certd-client/src/views/crud/basis/reset/mock.ts
+23
View File
@@ -0,0 +1,23 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options: any = {
name: "BasisReset",
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;
packages/ui/certd-client/src/views/crud/basis/value-change/api.js → packages/ui/certd-client/src/views/crud/basis/value-change/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/BasisValueChange";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/basis/value-change/crud.jsx → packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx
+11 -11
View File
@@ -1,24 +1,24 @@
import * as api from "./api";
import { message } from "ant-design-vue";
import { dict } from "@fast-crud/fast-crud";
export default function ({ expose }) {
const pageRequest = async (query) => {
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, 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 }) => {
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);
};
return {
output: {},
crudOptions: {
request: {
pageRequest,
@@ -52,12 +52,12 @@ export default function ({ expose }) {
name: "fs-dict-switch",
vModel: "checked"
},
valueChange(context) {
valueChange(context: ValueChangeContext) {
console.log("column value changed:", context);
}
},
form: {
valueChange({ value, key, form }) {
valueChange({ value, key, form }: ValueChangeContext) {
console.log("valueChanged,", key, value, form);
message.info(`valueChanged:${key}=${value}`);
}
@@ -67,7 +67,7 @@ export default function ({ expose }) {
title: "value-change",
type: "text",
form: {
valueChange({ value, key, form }) {
valueChange({ value, key, form }: ValueChangeContext) {
console.log("valueChanged,", key, value, form);
message.info(`valueChanged:${key}=${value}`);
}
@@ -81,7 +81,7 @@ export default function ({ expose }) {
},
form: {
valueChange: {
handle({ value, key, form, immediate }) {
handle({ value, key, form, immediate }: ValueChangeContext) {
console.log("valueChange,", key, value, "isImmediate=", immediate);
message.info(`valueChanged:${key}=${value},isImmediate=${immediate}`);
},
packages/ui/certd-client/src/views/crud/basis/value-change/index.vue
+11 -19
View File
@@ -2,41 +2,33 @@
<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>
import { defineComponent, ref, onMounted } from "vue";
import { useCrud, useExpose } from "@fast-crud/fast-crud";
import createCrudOptions from "./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: "BasisValueChange",
setup() {
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { expose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions, output } = createCrudOptions({ expose });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ expose, crudOptions });
// 你可以调用此方法，重新初始化crud配置
// resetCrudOptions(options)
const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
crudBinding,
crudRef,
...output
...context
};
}
});
packages/ui/certd-client/src/views/crud/basis/value-change/mock.js → packages/ui/certd-client/src/views/crud/basis/value-change/mock.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "BasisValueChange",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/component/button/api.js → packages/ui/certd-client/src/views/crud/component/button/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/ComponentButton";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/component/button/crud.jsx → packages/ui/certd-client/src/views/crud/component/button/crud.tsx
+8 -7
View File
@@ -1,22 +1,23 @@
import * as api from "./api";
import { requestForMock } from "/src/api/service";
import { dict, compute } from "@fast-crud/fast-crud";
import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
import { message } from "ant-design-vue";
export default function ({ expose }) {
const pageRequest = async (query) => {
export default function ({ crudExpose }: 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);
};
return {
crudOptions: {
request: {
packages/ui/certd-client/src/views/crud/component/button/index.vue
+7 -19
View File
@@ -4,31 +4,19 @@
</fs-page>
</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: "ComponentButton",
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 { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
packages/ui/certd-client/src/views/crud/component/button/mock.js → packages/ui/certd-client/src/views/crud/component/button/mock.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "ComponentButton",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/component/cascader/api.js → packages/ui/certd-client/src/views/crud/component/cascader/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/ComponentCascader";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/component/cascader/crud.jsx → packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx
+11 -11
View File
@@ -1,19 +1,20 @@
import * as api from "./api";
import { requestForMock } from "/src/api/service";
import { dict } from "@fast-crud/fast-crud";
export default function ({ crudRef }) {
const pageRequest = async (query) => {
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 }) => {
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);
};
return {
@@ -47,7 +48,6 @@ export default function ({ crudRef }) {
search: { show: true },
type: "dict-cascader",
dict: dict({
cloneable: false,
isTree: true,
url: "/mock/dicts/cascaderData?single"
})
@@ -61,7 +61,7 @@ export default function ({ crudRef }) {
label: "name",
isTree: true,
prototype: true,
getNodesByValues(values) {
getNodesByValues(values: any) {
//给cell展示组件调用，根据value值获取节点，每行都会请求一次
if (values == null) {
return [];
@@ -87,7 +87,7 @@ export default function ({ crudRef }) {
isLeaf: false
}
],
loadData: async (selectedOptions) => {
loadData: async (selectedOptions: any) => {
console.log("lazyLoad", selectedOptions);
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
@@ -122,8 +122,8 @@ export default function ({ crudRef }) {
form: {
component: {
showSearch: {
filter: (inputValue, path) => {
return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
filter: (inputValue: any, path: any) => {
return path.some((option: any) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
}
},
"change-on-select": true
packages/ui/certd-client/src/views/crud/component/cascader/index.vue
+7 -19
View File
@@ -4,31 +4,19 @@
</fs-page>
</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 createCrudOptions from "./crud.js";
import { useFs } from "@fast-crud/fast-crud";
export default defineComponent({
name: "ComponentCascader",
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 { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
packages/ui/certd-client/src/views/crud/component/cascader/mock.js → packages/ui/certd-client/src/views/crud/component/cascader/mock.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "ComponentCascader",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/component/checkbox/api.js → packages/ui/certd-client/src/views/crud/component/checkbox/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/ComponentCheckbox";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/component/checkbox/crud.jsx → packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx
+7 -7
View File
@@ -1,19 +1,19 @@
import * as api from "./api";
import { requestForMock } from "/src/api/service";
import { dict } from "@fast-crud/fast-crud";
export default function ({ crudRef }) {
const pageRequest = async (query) => {
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 }) => {
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);
};
return {
packages/ui/certd-client/src/views/crud/component/checkbox/index.vue
+6 -18
View File
@@ -4,31 +4,19 @@
</fs-page>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import { useCrud } from "@fast-crud/fast-crud";
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { useExpose } from "@fast-crud/fast-crud";
export default defineComponent({
name: "ComponentCheckbox",
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 { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
packages/ui/certd-client/src/views/crud/component/checkbox/mock.js → packages/ui/certd-client/src/views/crud/component/checkbox/mock.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "ComponentCheckbox",
idGenerator: 0
};
packages/ui/certd-client/src/views/crud/component/date/api.js → packages/ui/certd-client/src/views/crud/component/date/api.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/ComponentDate";
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,9 +33,9 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
url: apiPrefix + "/get",
method: "get",
params: { id }
});
packages/ui/certd-client/src/views/crud/component/date/crud.jsx → packages/ui/certd-client/src/views/crud/component/date/crud.tsx
+58 -10
View File
@@ -1,23 +1,24 @@
import * as api from "./api";
import { utils } from "@fast-crud/fast-crud";
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, ScopeContext, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
import dayjs from "dayjs";
console.log("utils", utils);
export default function ({ expose }) {
const pageRequest = async (query) => {
export default function ({ crudExpose }: 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);
};
return {
crudOptions: {
request: {
@@ -27,7 +28,7 @@ export default function ({ expose }) {
delRequest
},
table: {
scroll: { x: 2000 }
scroll: { x: 3000 }
},
rowHandle: { fixed: "right" },
columns: {
@@ -71,6 +72,17 @@ export default function ({ expose }) {
largest: 2
}
}
},
valueBuilder({ value, row, key }) {
console.log("value builder:", key, value, row);
if (value != null) {
row[key] = dayjs(value);
}
},
valueResolve({ value, row, key }) {
if (value != null) {
row[key] = value.unix();
}
}
},
datetime: {
@@ -105,8 +117,8 @@ export default function ({ expose }) {
form: {
component: {
valueFormat: "YYYY-MM-DD HH:mm:ss", //输入值的格式
events: {
onChange(context) {
on: {
onChange(context: ScopeContext) {
console.log("change", context);
}
}
@@ -122,13 +134,49 @@ export default function ({ expose }) {
}
}
},
month: {
title: "月份",
type: "month",
form: {
component: {
valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
}
}
},
week: {
title: "星期",
type: "week",
form: {
component: {
valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
}
}
},
quarter: {
title: "季度",
type: "quarter",
form: {
component: {
valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
}
}
},
year: {
title: "年份",
type: "year",
form: {
component: {
valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
}
}
},
disabledDate: {
title: "禁用日期",
type: "date",
form: {
component: {
valueFormat: "YYYY-MM-DD HH:mm:ss", //输入值的格式
disabledDate(current) {
disabledDate(current: any) {
return current && current < dayjs().endOf("day");
}
}
packages/ui/certd-client/src/views/crud/component/date/index.vue
+8 -23
View File
@@ -2,40 +2,25 @@
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding">
<template #actionbar-right>
<a-alert
style="margin-left: 10px"
message="关于日期时间，建议前后端统一使用时间戳（long类型）进行交互，可以避免时区转化带来的问题"
/>
<a-alert style="margin-left: 10px" message="关于日期时间，建议前后端统一使用时间戳（long类型）进行交互，可以避免时区转化带来的问题" />
</template>
</fs-crud>
</fs-page>
</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 createCrudOptions from "./crud.js";
import { useFs } from "@fast-crud/fast-crud";
export default defineComponent({
name: "ComponentDate",
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 { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
packages/ui/certd-client/src/views/crud/component/date/mock.js → packages/ui/certd-client/src/views/crud/component/date/mock.ts
+5 -1
View File
@@ -1,6 +1,6 @@
import mockUtil from "/src/mock/base";
const options = {
const options: any = {
name: "ComponentDate",
idGenerator: 0
};
@@ -12,6 +12,10 @@ const list = [
date: "2019-09-02 11:11:11",
format: "2019-09-21 11:11:11",
time: "2019-09-22 12:11:11",
month: "2019-09-22 12:11:11",
week: "2019-09-22 12:11:11",
quarter: "2019-09-22 12:11:11",
year: "2019-09-22 12:11:11",
daterangeStart: "2019-09-23 11:11:11",
daterangeEnd: "2019-09-24 11:11:11",
datetimerangeStart: "2019-09-25 11:11:11",

Some files were not shown because too many files have changed in this diff Show More