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: {
|
||||
//"max-len": [0, 200, 2, { ignoreUrls: true }],
|
||||
"@typescript-eslint/no-unused-vars": "off",
|
||||
"no-unused-vars": "off",
|
||||
"@typescript-eslint/ban-ts-ignore": "off",
|
||||
"@typescript-eslint/explicit-function-return-type": "off",
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,18 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
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)
|
||||
|
||||
### Bug Fixes
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@fast-crud/fs-admin-antdv",
|
||||
"version": "1.18.5",
|
||||
"version": "1.19.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
|
@ -26,10 +26,10 @@
|
|||
"@ant-design/icons-vue": "^6.1.0",
|
||||
"@aws-sdk/client-s3": "^3.383.0",
|
||||
"@aws-sdk/s3-request-presigner": "^3.383.0",
|
||||
"@fast-crud/fast-crud": "^1.18.5",
|
||||
"@fast-crud/fast-extends": "^1.18.5",
|
||||
"@fast-crud/ui-antdv": "^1.18.5",
|
||||
"@fast-crud/ui-interface": "^1.18.5",
|
||||
"@fast-crud/fast-crud": "^1.19.1",
|
||||
"@fast-crud/fast-extends": "^1.19.1",
|
||||
"@fast-crud/ui-antdv": "^1.19.1",
|
||||
"@fast-crud/ui-interface": "^1.19.1",
|
||||
"@iconify/iconify": "^3.1.1",
|
||||
"@iconify/json": "^2.2.98",
|
||||
"@purge-icons/generated": "^0.9.0",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import _ from "lodash-es";
|
||||
function copyList(originList: any, newList: any, options: any, parentId?: any) {
|
||||
for (const item of originList) {
|
||||
const newItem = { ...item, parentId };
|
||||
const newItem: any = _.cloneDeep(item);
|
||||
newItem.parentId = parentId;
|
||||
newItem.id = ++options.idGenerator;
|
||||
newList.push(newItem);
|
||||
if (item.children != null) {
|
||||
|
|
@ -293,6 +294,62 @@ const mockUtil: any = {
|
|||
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",
|
||||
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: "查询框",
|
||||
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: "插槽",
|
||||
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": {
|
||||
// 这样就可以对 `this` 上的数据属性进行更严格的推断`
|
||||
"noImplicitAny": true,
|
||||
"noImplicitAny": false,
|
||||
"allowJs": true,
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue