mirror of https://github.com/certd/certd
Merge branch 'client_sync' into v2
# Conflicts: # packages/ui/certd-client/CHANGELOG.md # packages/ui/certd-client/package.jsonpull/101/head
xiaojunnuo
commit
664bb66a91
|
|
@ -765,6 +765,12 @@ export const crudResources = [
|
|||
path: "/crud/advanced/in-dialog",
|
||||
component: "/crud/advanced/in-dialog/index.vue"
|
||||
},
|
||||
{
|
||||
title: "抽屉中显示crud",
|
||||
name: "AdvancedInDrawer",
|
||||
path: "/crud/advanced/in-drawer",
|
||||
component: "/crud/advanced/in-drawer/index.vue"
|
||||
},
|
||||
{
|
||||
title: "大量数据",
|
||||
name: "AdvancedBigData",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
//@ts-ignore
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/AdvancedInDrawer";
|
||||
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 }
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import * as api from "./api";
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
|
||||
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
//从context中获取子组件的ref
|
||||
const drawerClassTimeRef = context.drawerClassTimeRef;
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
if (form.id == null) {
|
||||
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
|
||||
},
|
||||
rowHandle: {
|
||||
width: 300,
|
||||
buttons: {
|
||||
editClassTime: {
|
||||
text: "录入课时",
|
||||
click: ({ row }) => {
|
||||
//调用子组件暴露的open方法，打开抽屉对话框
|
||||
drawerClassTimeRef.value.open({
|
||||
textbook: row
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
textbookCategory: {
|
||||
title: "教材分类",
|
||||
type: "text", //虽然不写也能正确显示组件，但不建议省略它
|
||||
search: { show: true }
|
||||
},
|
||||
textbookVersion: {
|
||||
title: "教材版本",
|
||||
type: "text"
|
||||
},
|
||||
textbookName: {
|
||||
title: "教材名称",
|
||||
type: "text"
|
||||
},
|
||||
totalWords: {
|
||||
title: "总词汇数",
|
||||
type: "number"
|
||||
},
|
||||
classTimeNumber: {
|
||||
title: "课时数量",
|
||||
type: "number",
|
||||
column: {
|
||||
cellRender({ value }) {
|
||||
return `${value}课时`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
//@ts-ignore
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/AdvancedInDrawerClassTime";
|
||||
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 }
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import * as api from "./api";
|
||||
import { computed } from "vue";
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
|
||||
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const textbookRef = context.textbookRef;
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
if (form.id == null) {
|
||||
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: {
|
||||
textbookId: {
|
||||
title: "教材ID",
|
||||
type: "text",
|
||||
search: {
|
||||
show: true
|
||||
},
|
||||
form: {
|
||||
value: computed(() => {
|
||||
//动态设置初始值
|
||||
return textbookRef.value.id;
|
||||
})
|
||||
}
|
||||
},
|
||||
textbookCategory: {
|
||||
title: "教材分类",
|
||||
type: "text",
|
||||
form: { show: false },
|
||||
column: {
|
||||
//本字段禁止条件render，因为此字段没有值，是从父组件传过来显示的
|
||||
conditionalRender: false,
|
||||
cellRender() {
|
||||
return textbookRef.value.textbookCategory;
|
||||
}
|
||||
}
|
||||
},
|
||||
textbookVersion: {
|
||||
title: "教材版本",
|
||||
type: "text",
|
||||
form: { show: false },
|
||||
column: {
|
||||
//本字段禁止条件render，因为此字段没有值，是从父组件传过来显示的
|
||||
conditionalRender: false,
|
||||
cellRender() {
|
||||
return textbookRef.value.textbookVersion;
|
||||
}
|
||||
}
|
||||
},
|
||||
textbookName: {
|
||||
title: "教材名称",
|
||||
type: "text",
|
||||
form: { show: false },
|
||||
column: {
|
||||
//本字段禁止条件render，因为此字段没有值，是从父组件传过来显示的
|
||||
conditionalRender: false,
|
||||
cellRender() {
|
||||
return textbookRef.value.textbookName;
|
||||
}
|
||||
}
|
||||
},
|
||||
classTimeName: {
|
||||
title: "课时名称",
|
||||
type: "text"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<a-drawer v-model:open="drawerOpened" width="1000px">
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
const textbookRef = ref();
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { textbookRef } });
|
||||
|
||||
//课时子表组件名称定义
|
||||
defineOptions({
|
||||
name: "AdvancedInDrawerClassTime"
|
||||
});
|
||||
const drawerOpened = ref(false);
|
||||
|
||||
//定义抽屉打开方法
|
||||
const open = async ({ textbook }) => {
|
||||
textbookRef.value = textbook;
|
||||
drawerOpened.value = true;
|
||||
await nextTick(); //等待crud初始化完成
|
||||
//设置查询条件，只查询当前选中的教材id
|
||||
crudExpose.setSearchFormData({ form: { textbookId: textbook.id } });
|
||||
//刷新课时表
|
||||
await crudExpose.doRefresh();
|
||||
};
|
||||
|
||||
//暴露出去，父组件通过ref可以调用open方法
|
||||
defineExpose({
|
||||
open
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
// @ts-ignore
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options: any = {
|
||||
name: "AdvancedInDrawerClassTime",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
textbookId: 1,
|
||||
classTimeName: "1",
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
textbookId: 1,
|
||||
classTimeName: "2",
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
textbookId: 1,
|
||||
classTimeName: "3",
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
textbookId: 1,
|
||||
classTimeName: "4",
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
textbookId: 1,
|
||||
classTimeName: "5",
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
textbookId: 2,
|
||||
classTimeName: "1",
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
textbookId: 2,
|
||||
classTimeName: "2",
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
textbookId: 2,
|
||||
classTimeName: "3",
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
textbookId: 2,
|
||||
classTimeName: "4",
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
textbookId: 2,
|
||||
classTimeName: "5",
|
||||
order: 1
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
<advanced-in-drawer-class-time ref="drawerClassTimeRef" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, onMounted, ref } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import AdvancedInDrawerClassTime from "./drawer-class-time/index.vue";
|
||||
//保留子组件的ref引用
|
||||
const drawerClassTimeRef = ref();
|
||||
//通过context传递到crud.tsx中
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { drawerClassTimeRef } });
|
||||
|
||||
defineOptions({
|
||||
name: "AdvancedInDrawer"
|
||||
});
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
// @ts-ignore
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options: any = {
|
||||
name: "AdvancedInDrawer",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
textbookCategory: "初中英语",
|
||||
textbookVersion: "初中人教版",
|
||||
textbookName: "初一上学期",
|
||||
totalWords: 200,
|
||||
classTimeNumber: 40
|
||||
},
|
||||
{
|
||||
textbookCategory: "初中英语",
|
||||
textbookVersion: "初中人教版",
|
||||
textbookName: "初一上学期",
|
||||
totalWords: 200,
|
||||
classTimeNumber: 40
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
|
|
@ -160,6 +160,26 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
|
|||
width: 300,
|
||||
valueChange({ value, getComponentRef }) {
|
||||
console.log("value changed:", value, getComponentRef("radio"));
|
||||
},
|
||||
editable: {
|
||||
async updateCell(opts) {
|
||||
const { row, key, value } = opts;
|
||||
//如果是添加，需要返回{[rowKey]:xxx},比如:{id:2}
|
||||
await api.UpdateCell(row.id, key, value);
|
||||
//同时修改 updateCellLink
|
||||
await api.UpdateCell(row.id, "updateCellLink", value);
|
||||
//修改联动本地列
|
||||
row.updateCellLink = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
updateCellLink: {
|
||||
title: "状态联动",
|
||||
type: "text",
|
||||
column: {
|
||||
editable: {
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue