mirror of https://github.com/certd/certd
🔱: [client] sync upgrade with 8 commits [trident-sync]
build: publish success chore: chore: chore: chore: build: publish success chore:pull/26/head
GitHub Actions Bot
parent
28cbefde04
commit
2ea0c48853
|
|
@ -20,6 +20,7 @@ module.exports = {
|
||||||
rules: {
|
rules: {
|
||||||
//"max-len": [0, 200, 2, { ignoreUrls: true }],
|
//"max-len": [0, 200, 2, { ignoreUrls: true }],
|
||||||
"@typescript-eslint/no-unused-vars": "off",
|
"@typescript-eslint/no-unused-vars": "off",
|
||||||
|
"no-unused-vars": "off",
|
||||||
"@typescript-eslint/ban-ts-ignore": "off",
|
"@typescript-eslint/ban-ts-ignore": "off",
|
||||||
"@typescript-eslint/explicit-function-return-type": "off",
|
"@typescript-eslint/explicit-function-return-type": "off",
|
||||||
"@typescript-eslint/no-explicit-any": "off",
|
"@typescript-eslint/no-explicit-any": "off",
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,18 @@
|
||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
## [1.19.1](https://github.com/fast-crud/fast-crud/compare/v1.19.0...v1.19.1) (2023-11-20)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* 修复一些错误的类型定义 ([e098f51](https://github.com/fast-crud/fast-crud/commit/e098f511160148a824a1950bf4e85325c2ac50f0))
|
||||||
|
|
||||||
|
# [1.19.0](https://github.com/fast-crud/fast-crud/compare/v1.18.5...v1.19.0) (2023-11-20)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* **editable:** editable优化重构，分三种模式：free、row、cell，本次为破坏性更新，请谨慎升级 ([a592780](https://github.com/fast-crud/fast-crud/commit/a592780697dc723117bce8759b2c02223ed930c8))
|
||||||
|
|
||||||
## [1.18.5](https://github.com/fast-crud/fast-crud/compare/v1.18.4...v1.18.5) (2023-11-08)
|
## [1.18.5](https://github.com/fast-crud/fast-crud/compare/v1.18.4...v1.18.5) (2023-11-08)
|
||||||
|
|
||||||
### Bug Fixes
|
### Bug Fixes
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fast-crud/fs-admin-antdv",
|
"name": "@fast-crud/fs-admin-antdv",
|
||||||
"version": "1.18.5",
|
"version": "1.19.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
|
|
@ -26,10 +26,10 @@
|
||||||
"@ant-design/icons-vue": "^6.1.0",
|
"@ant-design/icons-vue": "^6.1.0",
|
||||||
"@aws-sdk/client-s3": "^3.383.0",
|
"@aws-sdk/client-s3": "^3.383.0",
|
||||||
"@aws-sdk/s3-request-presigner": "^3.383.0",
|
"@aws-sdk/s3-request-presigner": "^3.383.0",
|
||||||
"@fast-crud/fast-crud": "^1.18.5",
|
"@fast-crud/fast-crud": "^1.19.1",
|
||||||
"@fast-crud/fast-extends": "^1.18.5",
|
"@fast-crud/fast-extends": "^1.19.1",
|
||||||
"@fast-crud/ui-antdv": "^1.18.5",
|
"@fast-crud/ui-antdv": "^1.19.1",
|
||||||
"@fast-crud/ui-interface": "^1.18.5",
|
"@fast-crud/ui-interface": "^1.19.1",
|
||||||
"@iconify/iconify": "^3.1.1",
|
"@iconify/iconify": "^3.1.1",
|
||||||
"@iconify/json": "^2.2.98",
|
"@iconify/json": "^2.2.98",
|
||||||
"@purge-icons/generated": "^0.9.0",
|
"@purge-icons/generated": "^0.9.0",
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
import _ from "lodash-es";
|
import _ from "lodash-es";
|
||||||
function copyList(originList: any, newList: any, options: any, parentId?: any) {
|
function copyList(originList: any, newList: any, options: any, parentId?: any) {
|
||||||
for (const item of originList) {
|
for (const item of originList) {
|
||||||
const newItem = { ...item, parentId };
|
const newItem: any = _.cloneDeep(item);
|
||||||
|
newItem.parentId = parentId;
|
||||||
newItem.id = ++options.idGenerator;
|
newItem.id = ++options.idGenerator;
|
||||||
newList.push(newItem);
|
newList.push(newItem);
|
||||||
if (item.children != null) {
|
if (item.children != null) {
|
||||||
|
|
@ -293,6 +294,62 @@ const mockUtil: any = {
|
||||||
data: list
|
data: list
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/mock/" + name + "/cellUpdate",
|
||||||
|
method: "post",
|
||||||
|
handle(req: any): any {
|
||||||
|
console.log("req", req);
|
||||||
|
let item = findById(req.body.id, list);
|
||||||
|
if (item) {
|
||||||
|
_.mergeWith(item, { [req.body.key]: req.body.value }, (objValue, srcValue) => {
|
||||||
|
if (srcValue == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 如果被合并对象为数组，则直接被覆盖对象覆盖，只要覆盖对象不为空
|
||||||
|
if (_.isArray(objValue)) {
|
||||||
|
return srcValue;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
item = {
|
||||||
|
id: ++options.idGenerator,
|
||||||
|
[req.body.key]: req.body.value
|
||||||
|
};
|
||||||
|
list.unshift(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
code: 0,
|
||||||
|
msg: "success",
|
||||||
|
data: item
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/mock/" + name + "/columnUpdate",
|
||||||
|
method: "post",
|
||||||
|
handle(req: any): any {
|
||||||
|
for (const item of req.body) {
|
||||||
|
const item2 = findById(item.id, list);
|
||||||
|
if (item2) {
|
||||||
|
_.mergeWith(item2, item, (objValue, srcValue) => {
|
||||||
|
if (srcValue == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 如果被合并对象为数组，则直接被覆盖对象覆盖，只要覆盖对象不为空
|
||||||
|
if (_.isArray(objValue)) {
|
||||||
|
return srcValue;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
code: 0,
|
||||||
|
msg: "success",
|
||||||
|
data: null
|
||||||
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -537,18 +537,6 @@ export const crudResources = [
|
||||||
path: "/crud/feature/height",
|
path: "/crud/feature/height",
|
||||||
component: "/crud/feature/height/index.vue"
|
component: "/crud/feature/height/index.vue"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "可编辑",
|
|
||||||
name: "FeatureEditable",
|
|
||||||
path: "/crud/feature/editable",
|
|
||||||
component: "/crud/feature/editable/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "行编辑",
|
|
||||||
name: "FeatureEditableRow",
|
|
||||||
path: "/crud/feature/editable-row",
|
|
||||||
component: "/crud/feature/editable-row/index.vue"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "查询框",
|
title: "查询框",
|
||||||
name: "FeatureSearch",
|
name: "FeatureSearch",
|
||||||
|
|
@ -623,6 +611,41 @@ export const crudResources = [
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "可编辑",
|
||||||
|
name: "Editable",
|
||||||
|
path: "/crud/editable",
|
||||||
|
redirect: "/crud/editable/free",
|
||||||
|
meta: {
|
||||||
|
icon: "ion:extension-puzzle-outline"
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: "自由编辑",
|
||||||
|
name: "EditableFree",
|
||||||
|
path: "/crud/editable/free",
|
||||||
|
component: "/crud/editable/free/index.vue"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "行编辑",
|
||||||
|
name: "EditableRow",
|
||||||
|
path: "/crud/editable/row",
|
||||||
|
component: "/crud/editable/row/index.vue"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "单元格编辑",
|
||||||
|
name: "EditableCell",
|
||||||
|
path: "/crud/editable/cell",
|
||||||
|
component: "/crud/editable/cell/index.vue"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "子表格编辑",
|
||||||
|
name: "EditableVModel",
|
||||||
|
path: "/crud/editable/vmodel",
|
||||||
|
component: "/crud/editable/vmodel/index.vue"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "插槽",
|
title: "插槽",
|
||||||
name: "Slots",
|
name: "Slots",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
// @ts-ignore
|
||||||
|
import { requestForMock } from "/src/api/service";
|
||||||
|
const request = requestForMock;
|
||||||
|
const apiPrefix = "/mock/EditableCell";
|
||||||
|
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 }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BatchDelete(ids: any) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix + "/batchDelete",
|
||||||
|
method: "post",
|
||||||
|
data: { ids }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UpdateCell(id: number, key: string, value: any) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix + "/cellUpdate",
|
||||||
|
method: "post",
|
||||||
|
data: { id, key, value }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export function UpdateColumn(data) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix + "/columnUpdate",
|
||||||
|
method: "post",
|
||||||
|
data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,206 @@
|
||||||
|
import * as api from "./api";
|
||||||
|
import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
|
||||||
|
import { computed, reactive, ref } from "vue";
|
||||||
|
import _ from "lodash-es";
|
||||||
|
import { EditableEachCellsOpts } from "@fast-crud/fast-crud";
|
||||||
|
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);
|
||||||
|
};
|
||||||
|
|
||||||
|
const radioDictRef = dict({
|
||||||
|
url: "/mock/dicts/OpenStatusEnum?single"
|
||||||
|
});
|
||||||
|
|
||||||
|
const radioColumnValue = ref("");
|
||||||
|
function columnUpdate(event: Event) {
|
||||||
|
//批量设置值
|
||||||
|
// _.forEach(crudBinding.value?.data, (item) => {
|
||||||
|
// item.radio = event.target.value;
|
||||||
|
// });
|
||||||
|
crudExpose.editable.eachCells((opts: EditableEachCellsOpts) => {
|
||||||
|
const { key, cell, rowData } = opts;
|
||||||
|
if (key === "radio") {
|
||||||
|
if (cell.isEditing) {
|
||||||
|
//@ts-ignore
|
||||||
|
rowData.radio = event.target.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const radioColumnEditor = reactive({
|
||||||
|
editing: false,
|
||||||
|
loading: false,
|
||||||
|
onSubmit: async () => {
|
||||||
|
console.log("onSubmit");
|
||||||
|
radioColumnEditor.loading = true;
|
||||||
|
try {
|
||||||
|
const data: any[] = [];
|
||||||
|
for (const row of crudBinding.value.data) {
|
||||||
|
data.push({ id: row.id, radio: row.radio });
|
||||||
|
}
|
||||||
|
await api.UpdateColumn(data);
|
||||||
|
crudExpose.editable.persist();
|
||||||
|
radioColumnEditor.editing = false;
|
||||||
|
} finally {
|
||||||
|
radioColumnEditor.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel: () => {
|
||||||
|
console.log("cancel");
|
||||||
|
crudExpose.editable.cancel();
|
||||||
|
radioColumnEditor.editing = false;
|
||||||
|
},
|
||||||
|
"onUpdate:editing": (value: boolean) => {
|
||||||
|
radioColumnEditor.editing = value;
|
||||||
|
if (value === true) {
|
||||||
|
crudExpose.editable.activeCols({ cols: ["radio"], showAction: false });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
vSlots: {
|
||||||
|
edit: () => {
|
||||||
|
return <fs-dict-radio dict={radioDictRef} v-model:value={radioColumnValue.value} onChange={columnUpdate}></fs-dict-radio>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
crudOptions: {
|
||||||
|
request: {
|
||||||
|
pageRequest,
|
||||||
|
addRequest,
|
||||||
|
editRequest,
|
||||||
|
delRequest
|
||||||
|
},
|
||||||
|
actionbar: {
|
||||||
|
buttons: {
|
||||||
|
// add: {
|
||||||
|
// show: computed(() => {
|
||||||
|
// if (crudBinding.value) {
|
||||||
|
// return !crudBinding.value?.table.editable.enabled;
|
||||||
|
// }
|
||||||
|
// return false;
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// addRow: {
|
||||||
|
// show: computed(() => {
|
||||||
|
// if (crudBinding.value) {
|
||||||
|
// return crudBinding.value?.table.editable.enabled;
|
||||||
|
// }
|
||||||
|
// return false;
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
table: {
|
||||||
|
editable: {
|
||||||
|
mode: "cell",
|
||||||
|
exclusive: true,
|
||||||
|
exclusiveEffect: "cancel",
|
||||||
|
async updateCell(opts) {
|
||||||
|
const { row, key, value } = opts;
|
||||||
|
return await api.UpdateCell(row.id, key, value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
//编辑列
|
||||||
|
headerCell({ column }: any) {
|
||||||
|
if (column.key === "radio") {
|
||||||
|
return (
|
||||||
|
<div style={{ width: "100%" }} class={"flex "}>
|
||||||
|
<fs-editable {...radioColumnEditor} v-slots={radioColumnEditor.vSlots}>
|
||||||
|
{column.title} <span style={{ color: "red" }}>(点我批量编辑)</span>
|
||||||
|
</fs-editable>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
columns: {
|
||||||
|
id: {
|
||||||
|
title: "ID",
|
||||||
|
type: "number",
|
||||||
|
form: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
column: { width: 80, align: "center" }
|
||||||
|
},
|
||||||
|
disable: {
|
||||||
|
title: "禁止编辑",
|
||||||
|
type: "text",
|
||||||
|
column: {
|
||||||
|
editable: {
|
||||||
|
disabled: true //也可以配置为方法，根据条件禁用或启用编辑
|
||||||
|
// disabled: ({ column, index, row }) => {
|
||||||
|
// return index % 2 === 0;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
radio: {
|
||||||
|
title: "状态",
|
||||||
|
search: { show: true },
|
||||||
|
type: "dict-radio",
|
||||||
|
dict: radioDictRef,
|
||||||
|
column: {
|
||||||
|
width: 300
|
||||||
|
}
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
title: "姓名",
|
||||||
|
type: "text",
|
||||||
|
form: {
|
||||||
|
rules: [
|
||||||
|
{ required: true, message: "请输入姓名" },
|
||||||
|
{
|
||||||
|
type: "string",
|
||||||
|
min: 2,
|
||||||
|
max: 10,
|
||||||
|
message: "长度在 2 到 10 个字符"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
address: {
|
||||||
|
title: "地址",
|
||||||
|
children: {
|
||||||
|
province: {
|
||||||
|
title: "省份",
|
||||||
|
search: { show: true },
|
||||||
|
type: "text"
|
||||||
|
},
|
||||||
|
city: {
|
||||||
|
title: "城市",
|
||||||
|
search: { show: true },
|
||||||
|
type: "dict-select",
|
||||||
|
dict: dict({
|
||||||
|
value: "id",
|
||||||
|
label: "text",
|
||||||
|
data: [
|
||||||
|
{ id: "sz", text: "深圳", color: "success" },
|
||||||
|
{ id: "gz", text: "广州", color: "primary" },
|
||||||
|
{ id: "bj", text: "北京" },
|
||||||
|
{ id: "wh", text: "武汉" },
|
||||||
|
{ id: "sh", text: "上海" }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
<template>
|
||||||
|
<fs-page>
|
||||||
|
<template #header>
|
||||||
|
<div class="title">
|
||||||
|
单元格编辑
|
||||||
|
<span class="sub">单元格修改确认后直接提交到后台</span>
|
||||||
|
</div>
|
||||||
|
<div class="more"></div>
|
||||||
|
</template>
|
||||||
|
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||||
|
<template #actionbar-right>
|
||||||
|
<!-- <fs-button class="ml-1" @click="addRow">添加行</fs-button>-->
|
||||||
|
<a-radio-group v-model:value="crudBinding.table.editable.enabled" class="ml-5">
|
||||||
|
<a-radio-button :value="true">启用编辑</a-radio-button>
|
||||||
|
<a-radio-button :value="false">退出编辑</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
<fs-label label="排他式激活" class="ml-5" title="激活某个cell时，其他已激活的自动关闭，永远只有一个cell被激活">
|
||||||
|
<a-switch v-model:checked="crudBinding.table.editable.exclusive" class="ml-5"> </a-switch>
|
||||||
|
</fs-label>
|
||||||
|
|
||||||
|
<fs-label label="排他式激活效果" class="ml-5" title="排他式激活时，将未关闭的自动保存还是取消">
|
||||||
|
<a-radio-group v-model:value="crudBinding.table.editable.exclusiveEffect" class="ml-5">
|
||||||
|
<a-radio-button value="cancel">自动取消</a-radio-button>
|
||||||
|
<a-radio-button value="save">自动保存</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
</fs-label>
|
||||||
|
|
||||||
|
<template v-if="crudBinding.table.editable.enabled">
|
||||||
|
<fs-button class="ml-5" @click="active">激活全部编辑</fs-button>
|
||||||
|
<fs-button class="ml-5" @click="cancel">取消/恢复原状</fs-button>
|
||||||
|
<fs-button class="ml-5" @click="log">log</fs-button>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</fs-crud>
|
||||||
|
</fs-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
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: "EditableCell",
|
||||||
|
setup() {
|
||||||
|
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||||
|
|
||||||
|
// 页面打开后获取列表数据
|
||||||
|
onMounted(() => {
|
||||||
|
crudExpose.doRefresh();
|
||||||
|
//默认启用编辑
|
||||||
|
crudExpose.editable.enable({});
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
crudBinding,
|
||||||
|
crudRef,
|
||||||
|
active() {
|
||||||
|
crudExpose.editable.active();
|
||||||
|
},
|
||||||
|
inactive() {
|
||||||
|
crudExpose.editable.inactive();
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
crudExpose.getTableRef().editable.submit(({ changed, removed, setData }: any) => {
|
||||||
|
console.log("changed", changed);
|
||||||
|
console.log("removed", removed);
|
||||||
|
|
||||||
|
console.log("table data:", crudBinding.value.data, crudExpose.getTableData());
|
||||||
|
// setData({ 0: {id:1} }); //设置data
|
||||||
|
message.success("保存,修改行：" + JSON.stringify(changed) + "；删除行：" + JSON.stringify(removed));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
log() {
|
||||||
|
console.log("table data:", crudBinding.value.data, crudExpose.getTableData());
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
crudExpose.editable.resume();
|
||||||
|
},
|
||||||
|
addRow() {
|
||||||
|
crudExpose.editable.addRow();
|
||||||
|
},
|
||||||
|
editCol() {
|
||||||
|
crudExpose.editable.activeCols({ cols: ["radio"] });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
// @ts-ignore
|
||||||
|
import mockUtil from "/src/mock/base";
|
||||||
|
const options: any = {
|
||||||
|
name: "EditableCell",
|
||||||
|
idGenerator: 0
|
||||||
|
};
|
||||||
|
const list = [
|
||||||
|
{
|
||||||
|
radio: "1",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
radio: "2"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
radio: "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
radio: "0"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
options.list = list;
|
||||||
|
const mock = mockUtil.buildMock(options);
|
||||||
|
export default mock;
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { requestForMock } from "/src/api/service";
|
||||||
|
const request = requestForMock;
|
||||||
|
const apiPrefix = "/mock/EditableFree";
|
||||||
|
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 }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BatchDelete(ids: any) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix + "/batchDelete",
|
||||||
|
method: "post",
|
||||||
|
data: { ids }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
import * as api from "./api";
|
||||||
|
import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
|
||||||
|
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
|
||||||
|
},
|
||||||
|
actionbar: {
|
||||||
|
buttons: {
|
||||||
|
add: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
addRow: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
table: {
|
||||||
|
editable: {
|
||||||
|
mode: "free"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pagination: {
|
||||||
|
pageSize: 5,
|
||||||
|
pageSizes: [5, 10, 20, 50, 100]
|
||||||
|
},
|
||||||
|
columns: {
|
||||||
|
id: {
|
||||||
|
title: "ID",
|
||||||
|
type: "number",
|
||||||
|
form: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
column: { width: 80, align: "center" }
|
||||||
|
},
|
||||||
|
disable: {
|
||||||
|
title: "禁止编辑",
|
||||||
|
type: "text",
|
||||||
|
column: {
|
||||||
|
editable: {
|
||||||
|
disabled: true //也可以配置为方法，根据条件禁用或启用编辑
|
||||||
|
// disabled: ({ column, index, row }) => {
|
||||||
|
// return index % 2 === 0;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
radio: {
|
||||||
|
title: "状态",
|
||||||
|
search: { show: true },
|
||||||
|
type: "dict-radio",
|
||||||
|
dict: dict({
|
||||||
|
url: "/mock/dicts/OpenStatusEnum?single"
|
||||||
|
})
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
title: "姓名",
|
||||||
|
type: "text",
|
||||||
|
form: {
|
||||||
|
rules: [
|
||||||
|
{ required: true, message: "请输入姓名" },
|
||||||
|
{ min: 2, max: 10, message: "长度在 2 到 10 个字符" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
address: {
|
||||||
|
title: "地址",
|
||||||
|
children: {
|
||||||
|
province: {
|
||||||
|
title: "省份",
|
||||||
|
search: { show: true },
|
||||||
|
type: "text"
|
||||||
|
},
|
||||||
|
city: {
|
||||||
|
title: "城市",
|
||||||
|
search: { show: true },
|
||||||
|
type: "dict-select",
|
||||||
|
dict: dict({
|
||||||
|
value: "id",
|
||||||
|
label: "text",
|
||||||
|
data: [
|
||||||
|
{ id: "sz", text: "深圳", color: "success" },
|
||||||
|
{ id: "gz", text: "广州", color: "primary" },
|
||||||
|
{ id: "bj", text: "北京" },
|
||||||
|
{ id: "wh", text: "武汉" },
|
||||||
|
{ id: "sh", text: "上海" }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<template>
|
||||||
|
<fs-page>
|
||||||
|
<template #header>
|
||||||
|
<div class="title">可编辑</div>
|
||||||
|
<div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/expose.html">文档</a></div>
|
||||||
|
</template>
|
||||||
|
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||||
|
<template #actionbar-right>
|
||||||
|
<!-- <fs-button class="ml-1" @click="addRow">添加行</fs-button>-->
|
||||||
|
<a-radio-group v-model:value="crudBinding.table.editable.enabled" class="ml-5">
|
||||||
|
<a-radio-button :value="true">启用编辑</a-radio-button>
|
||||||
|
<a-radio-button :value="false">退出编辑</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
<!-- <a-radio-group class="ml-1" v-model="crudBinding.table.editable.mode">-->
|
||||||
|
<!-- <a-radio-button label="free">自由模式</a-radio-button>-->
|
||||||
|
<!-- <a-radio-button label="row">行编辑模式</a-radio-button>-->
|
||||||
|
<!-- </a-radio-group>-->
|
||||||
|
<template v-if="crudBinding.table.editable.enabled">
|
||||||
|
<fs-button class="ml-5" @click="save">保存</fs-button>
|
||||||
|
<fs-button class="ml-5" @click="log">log</fs-button>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</fs-crud>
|
||||||
|
</fs-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
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: "EditableFree",
|
||||||
|
setup() {
|
||||||
|
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||||
|
|
||||||
|
// 页面打开后获取列表数据
|
||||||
|
onMounted(() => {
|
||||||
|
crudExpose.doRefresh();
|
||||||
|
crudExpose.editable.enable({ mode: "free", activeDefault: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
crudBinding,
|
||||||
|
crudRef,
|
||||||
|
active() {
|
||||||
|
crudExpose.editable.active();
|
||||||
|
},
|
||||||
|
inactive() {
|
||||||
|
crudExpose.editable.inactive();
|
||||||
|
},
|
||||||
|
async save() {
|
||||||
|
const res = await crudExpose.editable.validate();
|
||||||
|
if (res !== true) {
|
||||||
|
console.error("validate error:", res);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
message.success("保存,修改行：" + JSON.stringify(crudBinding.value.data));
|
||||||
|
},
|
||||||
|
log() {
|
||||||
|
console.log("table data:", crudBinding.value.data, crudExpose.getTableData());
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
crudExpose.editable.resume();
|
||||||
|
},
|
||||||
|
addRow() {
|
||||||
|
crudExpose.editable.addRow();
|
||||||
|
},
|
||||||
|
editCol() {
|
||||||
|
crudExpose.editable.activeCols({ cols: ["radio"] });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import mockUtil from "/src/mock/base";
|
||||||
|
const options: any = {
|
||||||
|
name: "EditableFree",
|
||||||
|
idGenerator: 0
|
||||||
|
};
|
||||||
|
const list = [
|
||||||
|
{
|
||||||
|
radio: "1",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
radio: "2"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
radio: "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
radio: "0"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
options.list = list;
|
||||||
|
const mock = mockUtil.buildMock(options);
|
||||||
|
export default mock;
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { requestForMock } from "/src/api/service";
|
||||||
|
const request = requestForMock;
|
||||||
|
const apiPrefix = "/mock/EditableRow";
|
||||||
|
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 }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BatchDelete(ids: any) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix + "/batchDelete",
|
||||||
|
method: "post",
|
||||||
|
data: { ids }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,143 @@
|
||||||
|
import * as api from "./api";
|
||||||
|
import { AddReq, compute, 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) => {
|
||||||
|
const id = await api.AddObj(form);
|
||||||
|
return { id };
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
crudOptions: {
|
||||||
|
request: {
|
||||||
|
pageRequest,
|
||||||
|
addRequest,
|
||||||
|
editRequest,
|
||||||
|
delRequest
|
||||||
|
},
|
||||||
|
//将 addRow 按钮启用
|
||||||
|
actionbar: { buttons: { add: { show: false }, addRow: { show: true } } },
|
||||||
|
table: {
|
||||||
|
editable: {
|
||||||
|
enabled: true,
|
||||||
|
mode: "row"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
columns: {
|
||||||
|
id: {
|
||||||
|
title: "ID",
|
||||||
|
type: "number",
|
||||||
|
form: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
column: { width: 80, align: "center" }
|
||||||
|
},
|
||||||
|
disable: {
|
||||||
|
title: "禁止编辑",
|
||||||
|
type: "text",
|
||||||
|
column: {
|
||||||
|
editable: {
|
||||||
|
disabled: true //也可以配置为方法，根据条件禁用或启用编辑
|
||||||
|
// disabled: ({ column, index, row }) => {
|
||||||
|
// return index % 2 === 0;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
radio: {
|
||||||
|
title: "状态",
|
||||||
|
search: { show: true },
|
||||||
|
type: "dict-radio",
|
||||||
|
dict: dict({
|
||||||
|
url: "/mock/dicts/OpenStatusEnum?single"
|
||||||
|
}),
|
||||||
|
column: {
|
||||||
|
width: 300
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
rules: {
|
||||||
|
async asyncValidator(context) {
|
||||||
|
console.log("context", context);
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
message: "远程校验测试"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
target: {
|
||||||
|
title: "根据状态动态显隐",
|
||||||
|
search: { show: true },
|
||||||
|
type: "text",
|
||||||
|
form: {
|
||||||
|
conditionalRender: {
|
||||||
|
match: ({ form }) => {
|
||||||
|
return form.radio === "2";
|
||||||
|
},
|
||||||
|
render: ({ form }) => {
|
||||||
|
return <div>已停止</div>;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show: compute(({ form }) => {
|
||||||
|
return form.radio !== "0";
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"user.name": {
|
||||||
|
title: "姓名",
|
||||||
|
type: "text",
|
||||||
|
form: {
|
||||||
|
key: ["user", "name"],
|
||||||
|
rules: [
|
||||||
|
{ required: true, message: "请输入姓名" },
|
||||||
|
{
|
||||||
|
type: "string",
|
||||||
|
min: 2,
|
||||||
|
max: 10,
|
||||||
|
message: "长度在 2 到 10 个字符"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
address: {
|
||||||
|
title: "地址",
|
||||||
|
children: {
|
||||||
|
province: {
|
||||||
|
title: "省份",
|
||||||
|
search: { show: true },
|
||||||
|
type: "text",
|
||||||
|
form: {
|
||||||
|
rules: [{ required: true, message: "请输入省份" }]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
city: {
|
||||||
|
title: "城市",
|
||||||
|
search: { show: true },
|
||||||
|
type: "dict-select",
|
||||||
|
dict: dict({
|
||||||
|
value: "id",
|
||||||
|
label: "text",
|
||||||
|
data: [
|
||||||
|
{ id: "sz", text: "深圳", color: "success" },
|
||||||
|
{ id: "gz", text: "广州", color: "primary" },
|
||||||
|
{ id: "bj", text: "北京" },
|
||||||
|
{ id: "wh", text: "武汉" },
|
||||||
|
{ id: "sh", text: "上海" }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<template>
|
||||||
|
<fs-page>
|
||||||
|
<template #header>
|
||||||
|
<div class="title">
|
||||||
|
行编辑模式
|
||||||
|
<span class="sub">在表格内编辑每行数据</span>
|
||||||
|
</div>
|
||||||
|
<div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/expose.html">文档</a></div>
|
||||||
|
</template>
|
||||||
|
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||||
|
<template #actionbar-right>
|
||||||
|
<fs-button class="ml-5" @click="log">log</fs-button>
|
||||||
|
</template>
|
||||||
|
</fs-crud>
|
||||||
|
</fs-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, onMounted } from "vue";
|
||||||
|
import createCrudOptions from "./crud";
|
||||||
|
import { useFs } from "@fast-crud/fast-crud";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EditableRow",
|
||||||
|
setup() {
|
||||||
|
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||||
|
|
||||||
|
// 页面打开后获取列表数据
|
||||||
|
onMounted(() => {
|
||||||
|
crudExpose.doRefresh();
|
||||||
|
crudExpose.editable.enable();
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
crudBinding,
|
||||||
|
crudRef,
|
||||||
|
log() {
|
||||||
|
console.log("table data:", crudBinding.value.data, crudExpose.getTableData());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import mockUtil from "/src/mock/base";
|
||||||
|
const options: any = {
|
||||||
|
name: "EditableRow",
|
||||||
|
idGenerator: 0
|
||||||
|
};
|
||||||
|
const list = [
|
||||||
|
{
|
||||||
|
radio: "1",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
radio: "2"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
radio: "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
radio: "0"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
options.list = list;
|
||||||
|
const mock = mockUtil.buildMock(options);
|
||||||
|
export default mock;
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { requestForMock } from "/src/api/service";
|
||||||
|
const request = requestForMock;
|
||||||
|
const apiPrefix = "/mock/EditableVModel";
|
||||||
|
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 }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BatchDelete(ids: any) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix + "/batchDelete",
|
||||||
|
method: "post",
|
||||||
|
data: { ids }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
import * as api from "./api";
|
||||||
|
import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
|
||||||
|
import EditableFreeSub from "./free/index.vue";
|
||||||
|
export default function (props: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||||
|
const { crudBinding } = props.crudExpose;
|
||||||
|
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);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
crudOptions: {
|
||||||
|
request: {
|
||||||
|
pageRequest,
|
||||||
|
addRequest,
|
||||||
|
editRequest,
|
||||||
|
delRequest
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
wrapper: {
|
||||||
|
width: "80%"
|
||||||
|
},
|
||||||
|
async beforeSubmit() {
|
||||||
|
const validate = await crudExpose.getFormComponentRef("subTable")?.validate();
|
||||||
|
if (validate !== true) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
columns: {
|
||||||
|
id: {
|
||||||
|
title: "ID",
|
||||||
|
type: "number",
|
||||||
|
form: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
column: { width: 80, align: "center" }
|
||||||
|
},
|
||||||
|
radio: {
|
||||||
|
title: "状态",
|
||||||
|
search: { show: true },
|
||||||
|
type: "dict-radio",
|
||||||
|
dict: dict({
|
||||||
|
url: "/mock/dicts/OpenStatusEnum?single"
|
||||||
|
})
|
||||||
|
},
|
||||||
|
subTable: {
|
||||||
|
title: "子表格",
|
||||||
|
type: "text",
|
||||||
|
form: {
|
||||||
|
component: {
|
||||||
|
name: EditableFreeSub,
|
||||||
|
vModel: "modelValue"
|
||||||
|
},
|
||||||
|
col: {
|
||||||
|
span: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
column: {
|
||||||
|
formatter: ({ row }) => {
|
||||||
|
return row.subTable?.length + "条数据";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { requestForMock } from "/src/api/service";
|
||||||
|
const request = requestForMock;
|
||||||
|
const apiPrefix = "/mock/EditableFreeSub";
|
||||||
|
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 }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BatchDelete(ids: any) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix + "/batchDelete",
|
||||||
|
method: "post",
|
||||||
|
data: { ids }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
import * as api from "./api";
|
||||||
|
import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
|
||||||
|
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: {
|
||||||
|
actionbar: {
|
||||||
|
buttons: {
|
||||||
|
add: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
addRow: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
toolbar: {
|
||||||
|
buttons: {
|
||||||
|
refresh: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mode: {
|
||||||
|
name: "local",
|
||||||
|
isMergeWhenUpdate: true,
|
||||||
|
isAppendWhenAdd: true
|
||||||
|
},
|
||||||
|
table: {
|
||||||
|
editable: {
|
||||||
|
enabled: true,
|
||||||
|
mode: "free"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pagination: { show: false, pageSize: 9999999 },
|
||||||
|
columns: {
|
||||||
|
id: {
|
||||||
|
title: "ID",
|
||||||
|
type: "number",
|
||||||
|
form: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
column: { width: 80, align: "center" }
|
||||||
|
},
|
||||||
|
radio: {
|
||||||
|
title: "状态",
|
||||||
|
search: { show: true },
|
||||||
|
type: "dict-radio",
|
||||||
|
dict: dict({
|
||||||
|
url: "/mock/dicts/OpenStatusEnum?single"
|
||||||
|
})
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
title: "姓名",
|
||||||
|
type: "text",
|
||||||
|
form: {
|
||||||
|
rules: [
|
||||||
|
{ required: true, message: "请输入姓名" },
|
||||||
|
{ min: 2, max: 10, message: "长度在 2 到 10 个字符" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
createdAt: {
|
||||||
|
column: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
<template>
|
||||||
|
<div style="height: 500px; position: relative">
|
||||||
|
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, onMounted, watch } from "vue";
|
||||||
|
import createCrudOptions from "./crud";
|
||||||
|
import { useFs, useUi } from "@fast-crud/fast-crud";
|
||||||
|
import { message } from "ant-design-vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EditableFreeSub",
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ["update:modelValue"],
|
||||||
|
setup(props, ctx) {
|
||||||
|
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||||
|
const { ui } = useUi();
|
||||||
|
let formItemContext = ui.formItem.injectFormItemContext();
|
||||||
|
|
||||||
|
function emit(data) {
|
||||||
|
console.log("emit:", data);
|
||||||
|
ctx.emit("update:modelValue", data);
|
||||||
|
formItemContext.onBlur();
|
||||||
|
formItemContext.onChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面打开后获取列表数据
|
||||||
|
onMounted(() => {
|
||||||
|
// crudExpose.doRefresh();
|
||||||
|
watch(
|
||||||
|
() => {
|
||||||
|
return props.modelValue;
|
||||||
|
},
|
||||||
|
(value: any) => {
|
||||||
|
if (value != null) {
|
||||||
|
crudBinding.value.data = value;
|
||||||
|
} else {
|
||||||
|
crudBinding.value.data = [];
|
||||||
|
emit(crudBinding.value.data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
crudExpose.editable.enable({ mode: "free", activeDefault: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
async function validate() {
|
||||||
|
//校验，在上级表单的beforeSubmit中调用
|
||||||
|
return await crudExpose.getTableRef().editable.validate();
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
crudBinding,
|
||||||
|
crudRef,
|
||||||
|
validate
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import mockUtil from "/src/mock/base";
|
||||||
|
const options: any = {
|
||||||
|
name: "EditableFreeSub",
|
||||||
|
idGenerator: 0
|
||||||
|
};
|
||||||
|
const list = [
|
||||||
|
{
|
||||||
|
radio: "1",
|
||||||
|
name: "王强"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
radio: "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
radio: "0"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
options.list = list;
|
||||||
|
const mock = mockUtil.buildMock(options);
|
||||||
|
export default mock;
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<fs-page>
|
||||||
|
<template #header>
|
||||||
|
<div class="title">vModel编辑</div>
|
||||||
|
<div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/expose.html">文档</a></div>
|
||||||
|
</template>
|
||||||
|
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||||
|
<template #actionbar-right>
|
||||||
|
<fs-button class="ml-5" @click="log">log</fs-button>
|
||||||
|
</template>
|
||||||
|
</fs-crud>
|
||||||
|
</fs-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
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: "EditableVModel",
|
||||||
|
setup() {
|
||||||
|
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||||
|
|
||||||
|
// 页面打开后获取列表数据
|
||||||
|
onMounted(() => {
|
||||||
|
crudExpose.doRefresh();
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
crudBinding,
|
||||||
|
crudRef,
|
||||||
|
log() {
|
||||||
|
console.log("table data:", crudBinding.value.data);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import mockUtil from "/src/mock/base";
|
||||||
|
const options: any = {
|
||||||
|
name: "EditableVModel",
|
||||||
|
idGenerator: 0
|
||||||
|
};
|
||||||
|
const list = [
|
||||||
|
{
|
||||||
|
radio: "1",
|
||||||
|
subTable: [{ id: 0, name: "王小虎" }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
radio: "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
radio: "0"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
options.list = list;
|
||||||
|
const mock = mockUtil.buildMock(options);
|
||||||
|
export default mock;
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
// 这样就可以对 `this` 上的数据属性进行更严格的推断`
|
// 这样就可以对 `this` 上的数据属性进行更严格的推断`
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": false,
|
||||||
|
"allowJs": true,
|
||||||
"target": "esnext",
|
"target": "esnext",
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
"strict": true,
|
"strict": true,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue