mirror of https://github.com/certd/certd
🔱: [client] sync upgrade with 9 commits [trident-sync]
perf: 完善文档，完善部分types perf: 优化d.ts类型 perf: 日期增加week、month、year、quarter类型 feat: resetCrudOptions 示例 feat: tabs快捷查询组件 fix: 行编辑支持多级表头 https://github.com/fast-crud/fast-crud/issues/143 perf: antdv 增加自定义表头示例 https://github.com/fast-crud/fast-crud/issues/141 perf: 表单下方按钮支持context https://github.com/fast-crud/fast-crud/issues/142pull/14/head
GitHub Actions Bot
parent
76dd23174a
commit
52a167c647
|
|
@ -16,12 +16,7 @@ module.exports = {
|
|||
tsx: true
|
||||
}
|
||||
},
|
||||
extends: [
|
||||
"plugin:vue/vue3-recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:prettier/recommended",
|
||||
"prettier"
|
||||
],
|
||||
extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "prettier"],
|
||||
rules: {
|
||||
//"max-len": [0, 200, 2, { ignoreUrls: true }],
|
||||
"@typescript-eslint/ban-ts-ignore": "off",
|
||||
|
|
|
|||
|
|
@ -20,91 +20,93 @@
|
|||
"author": "Greper",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^6.0.0",
|
||||
"@ant-design/icons-vue": "^6.0.1",
|
||||
"@fast-crud/fast-crud": "^1.9.2",
|
||||
"@fast-crud/fast-extends": "^1.9.2",
|
||||
"@fast-crud/ui-antdv": "^1.9.2",
|
||||
"@iconify/iconify": "^3.0.1",
|
||||
"@iconify/json": "^2.1.151",
|
||||
"@ant-design/colors": "^7.0.0",
|
||||
"@ant-design/icons-vue": "^6.1.0",
|
||||
"@fast-crud/fast-crud": "workspace:^1.9.2",
|
||||
"@fast-crud/fast-extends": "workspace:^1.9.2",
|
||||
"@fast-crud/ui-antdv": "workspace:^1.9.2",
|
||||
"@iconify/iconify": "^3.1.0",
|
||||
"@iconify/json": "^2.2.32",
|
||||
"@purge-icons/generated": "^0.9.0",
|
||||
"@soerenmartius/vue3-clipboard": "^0.1.2",
|
||||
"ant-design-vue": "^3.2.15",
|
||||
"axios": "^1.2.1",
|
||||
"axios": "^1.3.4",
|
||||
"axios-mock-adapter": "^1.21.2",
|
||||
"base64-js": "^1.5.1",
|
||||
"better-scroll": "^2.5.0",
|
||||
"china-division": "^2.4.0",
|
||||
"core-js": "^3.26.1",
|
||||
"cos-js-sdk-v5": "^1.4.15-beta.0",
|
||||
"china-division": "^2.6.0",
|
||||
"core-js": "^3.29.0",
|
||||
"cos-js-sdk-v5": "^1.4.16",
|
||||
"cropperjs": "^1.5.13",
|
||||
"dayjs": "^1.11.7",
|
||||
"deepdash-es": "5.3.5",
|
||||
"deepdash-es": "5.3.9",
|
||||
"highlight.js": "^11.7.0",
|
||||
"lodash-es": "^4.17.15",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mitt": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"pinia": "2.0.28",
|
||||
"pinia": "2.0.33",
|
||||
"qiniu-js": "^3.4.1",
|
||||
"sortablejs": "^1.14.0",
|
||||
"vue": "^3.2.45",
|
||||
"sortablejs": "^1.15.0",
|
||||
"vue": "^3.2.47",
|
||||
"vue-cropperjs": "^5.0.0",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "^4.1.5",
|
||||
"vuedraggable": "^4.0.1"
|
||||
"vue-router": "^4.1.6",
|
||||
"vuedraggable": "^2.24.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^23.0.4",
|
||||
"@rollup/plugin-commonjs": "^24.0.1",
|
||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||
"@types/chai": "^4.3.4",
|
||||
"@types/lodash-es": "^4.17.6",
|
||||
"@types/mocha": "^10.0.1",
|
||||
"@types/node": "^18.11.15",
|
||||
"@typescript-eslint/eslint-plugin": "^5.46.1",
|
||||
"@typescript-eslint/parser": "^5.46.1",
|
||||
"@vitejs/plugin-legacy": "^3.0.1",
|
||||
"@types/node": "^18.14.6",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.54.1",
|
||||
"@typescript-eslint/parser": "^5.54.1",
|
||||
"@vitejs/plugin-legacy": "^4.0.1",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||
"@vue/compiler-sfc": "^3.2.45",
|
||||
"@vue/compiler-sfc": "^3.2.47",
|
||||
"@vue/eslint-config-typescript": "^11.0.2",
|
||||
"@vue/test-utils": "^2.2.6",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"@vue/test-utils": "^2.3.1",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"caller-path": "^4.0.0",
|
||||
"chai": "^4.3.7",
|
||||
"eslint": "8.29.0",
|
||||
"eslint-config-prettier": "^8.1.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint": "8.35.0",
|
||||
"eslint-config-prettier": "^8.7.0",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-promise": "^6.0.1",
|
||||
"eslint-plugin-vue": "^9.8.0",
|
||||
"eslint-plugin-promise": "^6.1.1",
|
||||
"eslint-plugin-vue": "^9.9.0",
|
||||
"esno": "^0.16.3",
|
||||
"husky": "^8.0.2",
|
||||
"husky": "^8.0.3",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.0.0",
|
||||
"lint-staged": "^13.1.0",
|
||||
"postcss": "^8.4.20",
|
||||
"prettier": "2.8.1",
|
||||
"less-loader": "^11.1.0",
|
||||
"lint-staged": "^13.1.2",
|
||||
"postcss": "^8.4.21",
|
||||
"prettier": "2.8.4",
|
||||
"pretty-quick": "^3.1.3",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^3.7.4",
|
||||
"rollup-plugin-visualizer": "^5.8.2",
|
||||
"stylelint": "^14.16.0",
|
||||
"stylelint-config-prettier": "^9.0.4",
|
||||
"stylelint-order": "^5.0.0",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"rimraf": "^4.4.0",
|
||||
"rollup": "^3.18.0",
|
||||
"rollup-plugin-visualizer": "^5.9.0",
|
||||
"stylelint": "^15.2.0",
|
||||
"stylelint-config-prettier": "^9.0.5",
|
||||
"stylelint-order": "^6.0.3",
|
||||
"tailwindcss": "^3.2.7",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "4.9.4",
|
||||
"vite": "^4.0.1",
|
||||
"typescript": "4.9.5",
|
||||
"unplugin-vue-define-options": "^1.2.3",
|
||||
"vite": "^4.1.4",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-optimize-persist": "^0.1.2",
|
||||
"vite-plugin-package-config": "^0.1.1",
|
||||
"vite-plugin-purge-icons": "^0.9.2",
|
||||
"vite-plugin-theme": "^0.8.1",
|
||||
"vite-plugin-theme": "^0.8.6",
|
||||
"vite-plugin-windicss": "^1.8.10",
|
||||
"vue-eslint-parser": "^9.1.0",
|
||||
"vue-tsc": "^0.40.13",
|
||||
"vue-tsc": "^1.2.0",
|
||||
"windicss": "^3.5.6"
|
||||
},
|
||||
"husky": {
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ import { provide, ref, nextTick } from "vue";
|
|||
import { usePageStore } from "/src/store/modules/page";
|
||||
import { useResourceStore } from "/src/store/modules/resource";
|
||||
import { useSettingStore } from "/@/store/modules/settings";
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import 'dayjs/locale/en';
|
||||
import dayjs from 'dayjs'
|
||||
import "dayjs/locale/zh-cn";
|
||||
import "dayjs/locale/en";
|
||||
import dayjs from "dayjs";
|
||||
export default {
|
||||
name: "App",
|
||||
setup() {
|
||||
|
|
@ -29,13 +29,13 @@ export default {
|
|||
console.log("locale changed:", value);
|
||||
if (value === "zh-cn") {
|
||||
locale.value = zhCN;
|
||||
dayjs.locale('zh-cn');
|
||||
dayjs.locale("zh-cn");
|
||||
} else if (value === "en") {
|
||||
locale.value = enUS;
|
||||
dayjs.locale('en');
|
||||
dayjs.locale("en");
|
||||
}
|
||||
}
|
||||
localeChanged('zh-cn')
|
||||
localeChanged("zh-cn");
|
||||
provide("fn:router.reload", reload);
|
||||
provide("fn:locale.changed", localeChanged);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<template xmlns:w="http://www.w3.org/1999/xhtml">
|
||||
<template>
|
||||
<a-layout class="fs-framework">
|
||||
<a-layout-sider v-model:collapsed="asideCollapsed" :trigger="null" collapsible>
|
||||
<div class="header-logo">
|
||||
|
|
@ -152,6 +152,11 @@ export default {
|
|||
background: #f6f6f6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> div {
|
||||
height: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
.header-buttons {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { mock } from "../api/service";
|
||||
import * as tools from "../api/tools";
|
||||
import _ from "lodash-es";
|
||||
const commonMocks = import.meta.globEager("./common/mock.*.js");
|
||||
const apiMocks = import.meta.globEager("../api/modules/*.mock.ts");
|
||||
const viewMocks = import.meta.globEager("../views/**/mock.js");
|
||||
const commonMocks = import.meta.glob("./common/mock.*.[j|t]s", { eager: true });
|
||||
const apiMocks = import.meta.glob("../api/modules/*.mock.ts", { eager: true });
|
||||
const viewMocks = import.meta.glob("../views/**/mock.[j|t]s", { eager: true });
|
||||
|
||||
const list = [];
|
||||
_.forEach(commonMocks, (value) => {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,21 @@
|
|||
import { request, requestForMock } from "/src/api/service";
|
||||
import "/src/mock";
|
||||
import { FastCrud, UseCrudProps, useTypes, setLogger, useColumns, ColumnCompositionProps, MergeColumnPlugin, CrudOptions } from "@fast-crud/fast-crud";
|
||||
import { FastCrud, UseCrudProps, useTypes, setLogger, useColumns, ColumnCompositionProps, MergeColumnPlugin, CrudOptions, TransformQuery, PageQuery, UserPageQuery, UserPageRes, PageRes } from "@fast-crud/fast-crud";
|
||||
import "@fast-crud/fast-crud/dist/style.css";
|
||||
import { FsExtendsUploader, FsExtendsEditor, FsExtendsJson, FsExtendsCopyable, FsExtendsTime } from "@fast-crud/fast-extends";
|
||||
import "@fast-crud/fast-extends/dist/style.css";
|
||||
import UiAntdv from "@fast-crud/ui-antdv";
|
||||
import _ from "lodash-es";
|
||||
import { useCrudPermission } from "../permission";
|
||||
import { TransformResProps } from "@fast-crud/fast-crud/src";
|
||||
|
||||
function install(app, options: any = {}) {
|
||||
function install(app: any, options: any = {}) {
|
||||
app.use(UiAntdv);
|
||||
//设置日志级别
|
||||
setLogger({ level: "debug" });
|
||||
app.use(FastCrud, {
|
||||
i18n: options.i18n,
|
||||
async dictRequest({ url }) {
|
||||
async dictRequest({ url }: any) {
|
||||
if (url && url.startsWith("/mock")) {
|
||||
//如果是crud开头的dict请求视为mock
|
||||
return await requestForMock({ url, method: "post" });
|
||||
|
|
@ -25,14 +26,16 @@ function install(app, options: any = {}) {
|
|||
* useCrud时会被执行
|
||||
* @param context，useCrud的参数
|
||||
*/
|
||||
commonOptions(context: UseCrudProps) {
|
||||
const crudBinding = context.expose?.crudBinding;
|
||||
commonOptions(context: UseCrudProps): CrudOptions {
|
||||
const crudBinding = context.crudExpose?.crudBinding;
|
||||
const opts: CrudOptions = {
|
||||
table: {
|
||||
size: "small",
|
||||
pagination: false,
|
||||
onResizeColumn: (w, col) => {
|
||||
crudBinding.value.table.columnsMap[col.key].width = w;
|
||||
onResizeColumn: (w: number, col: any) => {
|
||||
if (crudBinding.value?.table?.columnsMap && crudBinding.value?.table?.columnsMap[col.key]) {
|
||||
crudBinding.value.table.columnsMap[col.key].width = w;
|
||||
}
|
||||
}
|
||||
},
|
||||
rowHandle: {
|
||||
|
|
@ -48,7 +51,7 @@ function install(app, options: any = {}) {
|
|||
}
|
||||
},
|
||||
request: {
|
||||
transformQuery: ({ page, form, sort }) => {
|
||||
transformQuery: ({ page, form, sort }: PageQuery): UserPageQuery => {
|
||||
const limit = page.pageSize;
|
||||
const currentPage = page.currentPage ?? 1;
|
||||
const offset = limit * (currentPage - 1);
|
||||
|
|
@ -64,7 +67,7 @@ function install(app, options: any = {}) {
|
|||
sort
|
||||
};
|
||||
},
|
||||
transformRes: ({ res }) => {
|
||||
transformRes: ({ res }: TransformResProps): PageRes => {
|
||||
const pageSize = res.limit;
|
||||
let currentPage = res.offset / pageSize;
|
||||
if (res.offset % pageSize === 0) {
|
||||
|
|
@ -104,23 +107,22 @@ function install(app, options: any = {}) {
|
|||
region: "ap-guangzhou",
|
||||
secretId: "", //
|
||||
secretKey: "", // 传了secretKey 和secretId 代表使用本地签名模式（不安全，生产环境不推荐）
|
||||
getAuthorization(custom) {
|
||||
async getAuthorization(custom: any) {
|
||||
// 不传secretKey代表使用临时签名模式,此时此参数必传（安全，生产环境推荐）
|
||||
return request({
|
||||
const ret = request({
|
||||
url: "http://www.docmirror.cn:7070/api/upload/cos/getAuthorization",
|
||||
method: "get"
|
||||
}).then((ret) => {
|
||||
// 返回结构如下
|
||||
// ret.data:{
|
||||
// TmpSecretId,
|
||||
// TmpSecretKey,
|
||||
// XCosSecurityToken,
|
||||
// ExpiredTime, // SDK 在 ExpiredTime 时间前，不会再次调用 getAuthorization
|
||||
// }
|
||||
return ret;
|
||||
});
|
||||
// 返回结构要求如下
|
||||
// ret.data:{
|
||||
// TmpSecretId,
|
||||
// TmpSecretKey,
|
||||
// XCosSecurityToken,
|
||||
// ExpiredTime, // SDK 在 ExpiredTime 时间前，不会再次调用 getAuthorization
|
||||
// }
|
||||
return ret;
|
||||
},
|
||||
successHandle(ret) {
|
||||
successHandle(ret: any) {
|
||||
// 上传完成后可以在此处处理结果，修改url什么的
|
||||
console.log("success handle:", ret);
|
||||
return ret;
|
||||
|
|
@ -132,7 +134,7 @@ function install(app, options: any = {}) {
|
|||
region: "oss-cn-shenzhen",
|
||||
accessKeyId: "",
|
||||
accessKeySecret: "",
|
||||
async getAuthorization(custom, context) {
|
||||
async getAuthorization(custom: any, context: any) {
|
||||
// 不传accessKeySecret代表使用临时签名模式,此时此参数必传（安全，生产环境推荐）
|
||||
const ret = await request({
|
||||
url: "http://www.docmirror.cn:7070/api/upload/alioss/getAuthorization",
|
||||
|
|
@ -145,7 +147,7 @@ function install(app, options: any = {}) {
|
|||
// sdk配置
|
||||
secure: true // 默认为非https上传,为了安全，设置为true
|
||||
},
|
||||
successHandle(ret) {
|
||||
successHandle(ret: any) {
|
||||
// 上传完成后可以在此处处理结果，修改url什么的
|
||||
console.log("success handle:", ret);
|
||||
return ret;
|
||||
|
|
@ -153,14 +155,14 @@ function install(app, options: any = {}) {
|
|||
},
|
||||
qiniu: {
|
||||
bucket: "d2p-demo",
|
||||
async getToken(options) {
|
||||
async getToken(options: any) {
|
||||
const ret = await request({
|
||||
url: "http://www.docmirror.cn:7070/api/upload/qiniu/getToken",
|
||||
method: "get"
|
||||
});
|
||||
return ret; // {token:xxx,expires:xxx}
|
||||
},
|
||||
successHandle(ret) {
|
||||
successHandle(ret: any) {
|
||||
// 上传完成后可以在此处处理结果，修改url什么的
|
||||
console.log("success handle:", ret);
|
||||
return ret;
|
||||
|
|
@ -171,7 +173,7 @@ function install(app, options: any = {}) {
|
|||
action: "http://www.docmirror.cn:7070/api/upload/form/upload",
|
||||
name: "file",
|
||||
withCredentials: false,
|
||||
uploadRequest: async ({ action, file, onProgress }) => {
|
||||
uploadRequest: async ({ action, file, onProgress }: any) => {
|
||||
// @ts-ignore
|
||||
const data = new FormData();
|
||||
data.append("file", file);
|
||||
|
|
@ -183,12 +185,12 @@ function install(app, options: any = {}) {
|
|||
},
|
||||
timeout: 60000,
|
||||
data,
|
||||
onUploadProgress: (p) => {
|
||||
onUploadProgress: (p: any) => {
|
||||
onProgress({ percent: Math.round((p.loaded / p.total) * 100) });
|
||||
}
|
||||
});
|
||||
},
|
||||
successHandle(ret) {
|
||||
successHandle(ret: any) {
|
||||
// 上传完成后的结果处理， 此处应返回格式为{url:xxx}
|
||||
return {
|
||||
url: "http://www.docmirror.cn:7070" + ret,
|
||||
|
|
@ -214,7 +216,7 @@ function install(app, options: any = {}) {
|
|||
//如果与官方字段类型同名，将会覆盖官方的字段类型
|
||||
form: { component: { name: "a-date-picker" } },
|
||||
column: { component: { name: "fs-date-format", format: "YYYY-MM-DD" } },
|
||||
valueBuilder(context) {
|
||||
valueBuilder(context: any) {
|
||||
console.log("time2,valueBuilder", context);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
import "./iconfont.js"
|
||||
import "./iconfont.js";
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import "./iconify";
|
|||
import "./iconfont";
|
||||
import FastCrud from "./fast-crud";
|
||||
import permission from "./permission";
|
||||
function install(app, options: any = {}) {
|
||||
function install(app: any, options: any = {}) {
|
||||
app.use(FastCrud, options);
|
||||
app.use(permission);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import permission from "./permission";
|
||||
import permission from "./permission.js";
|
||||
import permissionUtil from "../util.permission";
|
||||
const install = function (app) {
|
||||
const install = function (app: any) {
|
||||
app.directive("permission", permission);
|
||||
app.config.globalProperties.$hasPermissions = permissionUtil.hasPermissions;
|
||||
};
|
||||
|
||||
permission.install = install;
|
||||
export default permission;
|
||||
export default {
|
||||
install,
|
||||
...permission
|
||||
};
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import permissionUtil from "../util.permission";
|
||||
export default {
|
||||
mounted(el, binding, vnode) {
|
||||
mounted(el: any, binding: any, vnode: any) {
|
||||
const { value } = binding;
|
||||
const hasPermission = permissionUtil.hasPermissions(value);
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import permissionDirective from "./directive/index";
|
||||
import permissionDirective from "./directive/index.js";
|
||||
import { registerRouterHook } from "./hook";
|
||||
import util from "./util.permission";
|
||||
export * from "./use-crud-permission";
|
||||
|
|
@ -11,7 +11,7 @@ export function usePermission() {
|
|||
}
|
||||
|
||||
export default {
|
||||
install(app) {
|
||||
install(app: any) {
|
||||
// 开启权限模块
|
||||
// 注册v-permission指令, 用于控制按钮权限
|
||||
app.use(permissionDirective);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ interface PermissionState {
|
|||
* @param permissionList
|
||||
* @returns {*}
|
||||
*/
|
||||
function formatPermissions(menuTree: Array<any>, permissionList = []) {
|
||||
function formatPermissions(menuTree: Array<any>, permissionList: any[] = []) {
|
||||
if (menuTree == null) {
|
||||
menuTree = [];
|
||||
}
|
||||
|
|
@ -44,17 +44,19 @@ export const usePermissionStore = defineStore({
|
|||
inited: false
|
||||
}),
|
||||
getters: {
|
||||
// @ts-ignore
|
||||
getPermissions() {
|
||||
// @ts-ignore
|
||||
return this.permissions;
|
||||
},
|
||||
// @ts-ignore
|
||||
isInited() {
|
||||
// @ts-ignore
|
||||
return this.inited;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
init({ permissions }) {
|
||||
init({ permissions }: any) {
|
||||
this.permissions = permissions;
|
||||
this.inited = true;
|
||||
},
|
||||
|
|
@ -62,7 +64,7 @@ export const usePermissionStore = defineStore({
|
|||
this.permissions = [];
|
||||
this.inited = false;
|
||||
},
|
||||
resolve(resourceTree) {
|
||||
resolve(resourceTree: any) {
|
||||
const permissions = formatPermissions(resourceTree);
|
||||
this.init({ permissions });
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,25 @@
|
|||
import { usePermission } from "/@/plugin/permission";
|
||||
import _ from "lodash-es";
|
||||
|
||||
export type UseCrudPermissionProps = {
|
||||
permission:
|
||||
| string
|
||||
| {
|
||||
prefix: string;
|
||||
[key: string]: any;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* 设置按钮动作权限
|
||||
* @param permission {prefix,extra}
|
||||
*/
|
||||
export function useCrudPermission({ permission }) {
|
||||
export function useCrudPermission({ permission }: UseCrudPermissionProps) {
|
||||
const { hasPermissions } = usePermission();
|
||||
|
||||
const prefix = permission instanceof Object ? permission.prefix : permission;
|
||||
|
||||
//根据权限显示按钮
|
||||
function hasActionPermission(action) {
|
||||
function hasActionPermission(action: string) {
|
||||
if (!prefix) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -50,7 +58,7 @@ export function useCrudPermission({ permission }) {
|
|||
);
|
||||
}
|
||||
|
||||
function merge(userOptions) {
|
||||
function merge(userOptions: any) {
|
||||
const permissionOptions = buildCrudPermission();
|
||||
_.merge(permissionOptions, userOptions);
|
||||
return permissionOptions;
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@ const util = {
|
|||
}
|
||||
const permissionStore = usePermissionStore();
|
||||
const userPermissionList = permissionStore.getPermissions;
|
||||
return userPermissionList.some((permission) => {
|
||||
return userPermissionList.some((permission: any) => {
|
||||
return need.includes(permission);
|
||||
});
|
||||
},
|
||||
requirePermissions: (value) => {
|
||||
requirePermissions: (value: any) => {
|
||||
if (!util.hasPermissions(value)) {
|
||||
message.error("对不起，您没有权限执行此操作");
|
||||
throw new NoPermissionError();
|
||||
|
|
|
|||
|
|
@ -18,11 +18,17 @@ export const crudResources = [
|
|||
},
|
||||
children: [
|
||||
{
|
||||
title: "HelloWorld",
|
||||
title: "FirstDemo",
|
||||
name: "FsCrudFirst",
|
||||
path: "/crud/basis/first",
|
||||
component: "/crud/basis/first/index.vue"
|
||||
},
|
||||
{
|
||||
title: "HelloWorld",
|
||||
name: "FsCrudHelloWorld",
|
||||
path: "/crud/basis/helloworld",
|
||||
component: "/crud/basis/helloworld/index.vue"
|
||||
},
|
||||
{
|
||||
title: "动态计算",
|
||||
name: "BasisCompute",
|
||||
|
|
@ -70,6 +76,12 @@ export const crudResources = [
|
|||
name: "BasisColumnMergePlugin",
|
||||
path: "/crud/basis/column-merge-plugin",
|
||||
component: "/crud/basis/column-merge-plugin/index.vue"
|
||||
},
|
||||
{
|
||||
title: "ResetCrudOptions",
|
||||
name: "BasisReset",
|
||||
path: "/crud/basis/reset",
|
||||
component: "/crud/basis/reset/index.vue"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -444,6 +456,12 @@ export const crudResources = [
|
|||
path: "/crud/feature/header-group",
|
||||
component: "/crud/feature/header-group/index.vue"
|
||||
},
|
||||
{
|
||||
title: "自定义表头",
|
||||
name: "FeatureHeader",
|
||||
path: "/crud/feature/header",
|
||||
component: "/crud/feature/header/index.vue"
|
||||
},
|
||||
{
|
||||
title: "合并单元格",
|
||||
name: "FeatureMerge",
|
||||
|
|
@ -498,6 +516,12 @@ export const crudResources = [
|
|||
path: "/crud/feature/search-multi",
|
||||
component: "/crud/feature/search-multi/index.vue"
|
||||
},
|
||||
{
|
||||
title: "Tabs快捷查询",
|
||||
name: "FeatureTabs",
|
||||
path: "/crud/feature/tabs",
|
||||
component: "/crud/feature/tabs/index.vue"
|
||||
},
|
||||
{
|
||||
title: "字段排序",
|
||||
name: "FeatureColumnSort",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { createPinia } from "pinia";
|
||||
const store = createPinia();
|
||||
export default {
|
||||
install(app) {
|
||||
install(app: any) {
|
||||
app.use(store);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@ interface PageState {
|
|||
// 已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
|
||||
openedLoaded: boolean;
|
||||
// 当前页面
|
||||
current: "";
|
||||
current: string;
|
||||
// 需要缓存的页面 name
|
||||
keepAlive: Array<any>;
|
||||
inited: boolean;
|
||||
}
|
||||
// 判定是否需要缓存
|
||||
const isKeepAlive = (data) => get(data, "meta.cache", false);
|
||||
const isKeepAlive = (data: any) => get(data, "meta.cache", false);
|
||||
|
||||
export const usePageStore = defineStore({
|
||||
id: "app.page",
|
||||
|
|
@ -48,7 +48,7 @@ export const usePageStore = defineStore({
|
|||
inited: false
|
||||
}),
|
||||
getters: {
|
||||
getOpened() {
|
||||
getOpened(): any {
|
||||
// @ts-ignore
|
||||
return this.opened;
|
||||
},
|
||||
|
|
@ -91,7 +91,7 @@ export const usePageStore = defineStore({
|
|||
const valid: Array<number> = [];
|
||||
// 处理数据
|
||||
this.opened = value
|
||||
.map((opened) => {
|
||||
.map((opened: any) => {
|
||||
// 忽略首页
|
||||
if (opened.fullPath === "/index") {
|
||||
valid.push(1);
|
||||
|
|
@ -105,7 +105,7 @@ export const usePageStore = defineStore({
|
|||
// 新的数据中一般不会携带 params 和 query, 所以旧的参数会留存
|
||||
return Object.assign({}, opened, find);
|
||||
})
|
||||
.filter((opened, index) => valid[index] === 1);
|
||||
.filter((opened: any, index: any) => valid[index] === 1);
|
||||
// 标记已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
|
||||
this.openedLoaded = true;
|
||||
// 根据 opened 数据生成缓存设置
|
||||
|
|
@ -132,7 +132,7 @@ export const usePageStore = defineStore({
|
|||
* @param {Object} context
|
||||
* @param {Object} payload { index, params, query, fullPath } 路由信息
|
||||
*/
|
||||
async openedUpdate({ index, params, query, fullPath }) {
|
||||
async openedUpdate({ index, params, query, fullPath }: any) {
|
||||
// 更新页面列表某一项
|
||||
const page = this.opened[index];
|
||||
page.params = params || page.params;
|
||||
|
|
@ -148,7 +148,7 @@ export const usePageStore = defineStore({
|
|||
* @param {Object} context
|
||||
* @param {Object} payload { oldIndex, newIndex } 位置信息
|
||||
*/
|
||||
async openedSort({ oldIndex, newIndex }) {
|
||||
async openedSort({ oldIndex, newIndex }: any) {
|
||||
// 重排页面列表某一项
|
||||
const page = this.opened[oldIndex];
|
||||
this.opened.splice(oldIndex, 1);
|
||||
|
|
@ -162,7 +162,7 @@ export const usePageStore = defineStore({
|
|||
* @param {Object} context
|
||||
* @param {Object} payload new tag info
|
||||
*/
|
||||
async add({ tag, params, query, fullPath }) {
|
||||
async add({ tag, params, query, fullPath }: any) {
|
||||
// 设置新的 tag 在新打开一个以前没打开过的页面时使用
|
||||
const newTag = tag;
|
||||
newTag.params = params || newTag.params;
|
||||
|
|
@ -183,7 +183,7 @@ export const usePageStore = defineStore({
|
|||
* @param {Object} context
|
||||
* @param {Object} payload 从路由钩子的 to 对象上获取 { name, params, query, fullPath, meta } 路由信息
|
||||
*/
|
||||
async open({ name, params, query, fullPath, meta }) {
|
||||
async open({ name, params, query, fullPath, meta }: any) {
|
||||
// 已经打开的页面
|
||||
const opened = this.opened;
|
||||
// 判断此页面是否已经打开 并且记录位置
|
||||
|
|
@ -227,7 +227,7 @@ export const usePageStore = defineStore({
|
|||
* @param {Object} context
|
||||
* @param {Object} payload { tagName: 要关闭的标签名字 }
|
||||
*/
|
||||
async close({ tagName }) {
|
||||
async close({ tagName }: any) {
|
||||
// 预定下个新页面
|
||||
let newPage = {};
|
||||
const isCurrent = this.current === tagName;
|
||||
|
|
@ -267,7 +267,7 @@ export const usePageStore = defineStore({
|
|||
*/
|
||||
async closeLeft(opts = {}) {
|
||||
await this.closeByCondition({
|
||||
condition({ i, currentIndex }) {
|
||||
condition({ i, currentIndex }: any) {
|
||||
return i >= currentIndex;
|
||||
},
|
||||
...opts
|
||||
|
|
@ -280,7 +280,7 @@ export const usePageStore = defineStore({
|
|||
*/
|
||||
async closeRight(opts = {}) {
|
||||
await this.closeByCondition({
|
||||
condition({ i, currentIndex }) {
|
||||
condition({ i, currentIndex }: any) {
|
||||
return currentIndex >= i;
|
||||
},
|
||||
...opts
|
||||
|
|
@ -321,7 +321,7 @@ export const usePageStore = defineStore({
|
|||
*/
|
||||
async closeOther(opts = {}) {
|
||||
await this.closeByCondition({
|
||||
condition({ i, currentIndex }) {
|
||||
condition({ i, currentIndex }: any) {
|
||||
return currentIndex === i;
|
||||
},
|
||||
...opts
|
||||
|
|
@ -357,14 +357,13 @@ export const usePageStore = defineStore({
|
|||
*/
|
||||
keepAliveRefresh() {
|
||||
this.keepAlive = this.opened.filter((item) => isKeepAlive(item)).map((e) => e.name);
|
||||
console.log("keep alive:", this.keepAlive);
|
||||
},
|
||||
/**
|
||||
* @description 删除一个页面的缓存设置
|
||||
* @param {Object} state state
|
||||
* @param {String} name name
|
||||
*/
|
||||
keepAliveRemove(name) {
|
||||
keepAliveRemove(name: string) {
|
||||
const list = cloneDeep(this.keepAlive);
|
||||
const index = list.findIndex((item) => item === name);
|
||||
if (index !== -1) {
|
||||
|
|
@ -377,7 +376,7 @@ export const usePageStore = defineStore({
|
|||
* @param {Object} state state
|
||||
* @param {String} name name
|
||||
*/
|
||||
keepAlivePush(name) {
|
||||
keepAlivePush(name: string) {
|
||||
const keep = cloneDeep(this.keepAlive);
|
||||
keep.push(name);
|
||||
this.keepAlive = uniq(keep);
|
||||
|
|
@ -395,7 +394,7 @@ export const usePageStore = defineStore({
|
|||
* @param {Object} state state
|
||||
* @param {String} fullPath new fullPath
|
||||
*/
|
||||
currentSet(fullPath) {
|
||||
currentSet(fullPath: string) {
|
||||
this.current = fullPath;
|
||||
},
|
||||
/**
|
||||
|
|
@ -404,7 +403,7 @@ export const usePageStore = defineStore({
|
|||
* @param {Object} state state
|
||||
* @param {Array} routes routes
|
||||
*/
|
||||
async init(routes) {
|
||||
async init(routes: any) {
|
||||
if (this.inited) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -414,9 +413,9 @@ export const usePageStore = defineStore({
|
|||
routes = frameworkRoutes;
|
||||
}
|
||||
|
||||
const pool = [];
|
||||
const push = function (routes) {
|
||||
routes.forEach((route) => {
|
||||
const pool: any = [];
|
||||
const push = function (routes: any) {
|
||||
routes.forEach((route: any) => {
|
||||
if (route.children && route.children.length > 0) {
|
||||
push(route.children);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export const useResourceStore = defineStore({
|
|||
getFrameworkMenus() {
|
||||
return this.frameworkMenus;
|
||||
}
|
||||
},
|
||||
} as any,
|
||||
actions: {
|
||||
clear() {
|
||||
this.inited = false;
|
||||
|
|
@ -54,17 +54,17 @@ export const useResourceStore = defineStore({
|
|||
this.inited = true;
|
||||
|
||||
const showMenus = _.cloneDeep(frameworkMenus[0].children);
|
||||
this.frameworkMenus = filterMenus(showMenus, (item) => {
|
||||
this.frameworkMenus = filterMenus(showMenus, (item: any) => {
|
||||
return item?.meta?.showOnHeader !== false;
|
||||
});
|
||||
|
||||
this.fixedAsideMenus = findMenus(showMenus, (item) => {
|
||||
this.fixedAsideMenus = findMenus(showMenus, (item: any) => {
|
||||
return item?.meta?.fixedAside === true;
|
||||
});
|
||||
this.headerMenus = headerMenus;
|
||||
this.setAsideMenu();
|
||||
},
|
||||
setAsideMenu(topMenu?) {
|
||||
setAsideMenu(topMenu?: any) {
|
||||
if (this.frameworkMenus.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -74,13 +74,13 @@ export const useResourceStore = defineStore({
|
|||
const asideMenus = topMenu?.children || [];
|
||||
this.asideMenus = [...this.fixedAsideMenus, ...asideMenus];
|
||||
},
|
||||
setAsideMenuByCurrentRoute(matched) {
|
||||
setAsideMenuByCurrentRoute(matched: any) {
|
||||
const menuHeader = this.frameworkMenus;
|
||||
if (matched?.length <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
function findFromTree(tree, find) {
|
||||
function findFromTree(tree: any, find: any) {
|
||||
const results: Array<any> = [];
|
||||
for (const item of tree) {
|
||||
if (find(item)) {
|
||||
|
|
@ -88,7 +88,7 @@ export const useResourceStore = defineStore({
|
|||
return results;
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
const found = findFromTree(item.children, find);
|
||||
const found: any = findFromTree(item.children, find);
|
||||
if (found) {
|
||||
results.push(item);
|
||||
return results.concat(found);
|
||||
|
|
@ -97,7 +97,7 @@ export const useResourceStore = defineStore({
|
|||
}
|
||||
}
|
||||
const matchedPath = matched[1].path;
|
||||
const _side = findFromTree(menuHeader, (menu) => menu.path === matchedPath);
|
||||
const _side = findFromTree(menuHeader, (menu: any) => menu.path === matchedPath);
|
||||
if (_side?.length > 0) {
|
||||
if (this.currentAsidePath === _side[0]) {
|
||||
return;
|
||||
|
|
@ -106,11 +106,11 @@ export const useResourceStore = defineStore({
|
|||
this.setAsideMenu(_side[0]);
|
||||
}
|
||||
},
|
||||
filterByPermission(permissions) {
|
||||
filterByPermission(permissions: any) {
|
||||
this.frameworkMenus = this.filterChildrenByPermission(this.frameworkMenus, permissions);
|
||||
},
|
||||
filterChildrenByPermission(list, permissions) {
|
||||
const menus = list.filter((item) => {
|
||||
filterChildrenByPermission(list: any, permissions: any) {
|
||||
const menus = list.filter((item: any) => {
|
||||
if (item?.meta?.permission) {
|
||||
return permissions.includes(item.meta.permission);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export const useSettingStore = defineStore({
|
|||
this.persistTheme();
|
||||
// await changeTheme(this.theme.primaryColor);
|
||||
},
|
||||
async setPrimaryColor(color) {
|
||||
async setPrimaryColor(color: any) {
|
||||
const theme = this.theme;
|
||||
theme.primaryColor = color;
|
||||
await this.setTheme();
|
||||
|
|
|
|||
|
|
@ -42,3 +42,13 @@ h1, h2, h3, h4, h5, h6 {
|
|||
.anticon {
|
||||
vertical-align: 0 !important;
|
||||
}
|
||||
|
||||
.flex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.ml-5{
|
||||
margin-left:5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import type {
|
||||
ComponentRenderProxy,
|
||||
VNode,
|
||||
ComponentPublicInstance,
|
||||
FunctionalComponent,
|
||||
PropType as VuePropType,
|
||||
} from 'vue';
|
||||
import type { ComponentRenderProxy, VNode, ComponentPublicInstance, FunctionalComponent, PropType as VuePropType } from "vue";
|
||||
|
||||
declare global {
|
||||
const __APP_INFO__: {
|
||||
|
|
@ -64,7 +58,7 @@ declare global {
|
|||
VITE_GLOB_APP_SHORT_NAME: string;
|
||||
VITE_USE_CDN: boolean;
|
||||
VITE_DROP_CONSOLE: boolean;
|
||||
VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
|
||||
VITE_BUILD_COMPRESS: "gzip" | "brotli" | "none";
|
||||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
|
||||
VITE_LEGACY: boolean;
|
||||
VITE_USE_IMAGEMIN: boolean;
|
||||
|
|
@ -92,8 +86,6 @@ declare global {
|
|||
}
|
||||
}
|
||||
|
||||
declare module 'vue' {
|
||||
export type JSXComponent<Props = any> =
|
||||
| { new (): ComponentPublicInstance<Props> }
|
||||
| FunctionalComponent<Props>;
|
||||
declare module "vue" {
|
||||
export type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import _ from "lodash-es";
|
||||
export default {
|
||||
arrayToMap(array) {
|
||||
arrayToMap(array: any) {
|
||||
if (!array) {
|
||||
return {};
|
||||
}
|
||||
if (!_.isArray(array)) {
|
||||
return array;
|
||||
}
|
||||
const map = {};
|
||||
const map: any = {};
|
||||
for (const item of array) {
|
||||
if (item.key) {
|
||||
map[item.key] = item;
|
||||
|
|
@ -15,7 +15,7 @@ export default {
|
|||
}
|
||||
return map;
|
||||
},
|
||||
mapToArray(map) {
|
||||
mapToArray(map: any) {
|
||||
if (!map) {
|
||||
return [];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import _ from "lodash-es";
|
||||
export function getEnvValue(key) {
|
||||
export function getEnvValue(key: string) {
|
||||
// @ts-ignore
|
||||
return import.meta.env["VITE_APP_" + key];
|
||||
}
|
||||
|
||||
export class EnvConfig {
|
||||
API;
|
||||
MODE;
|
||||
STORAGE;
|
||||
TITLE;
|
||||
PM_ENABLED;
|
||||
API: string;
|
||||
MODE: string;
|
||||
STORAGE: string;
|
||||
TITLE: string;
|
||||
PM_ENABLED: string;
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
|
@ -19,6 +19,7 @@ export class EnvConfig {
|
|||
_.forEach(import.meta.env, (value, key) => {
|
||||
if (key.startsWith("VITE_APP")) {
|
||||
key = key.replace("VITE_APP_", "");
|
||||
// @ts-ignore
|
||||
this[key] = value;
|
||||
}
|
||||
});
|
||||
|
|
@ -26,7 +27,8 @@ export class EnvConfig {
|
|||
this.MODE = import.meta.env.MODE;
|
||||
}
|
||||
|
||||
get(key, defaultValue) {
|
||||
get(key: string, defaultValue: string) {
|
||||
// @ts-ignore
|
||||
return this[key] ?? defaultValue;
|
||||
}
|
||||
isDev() {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export const site = {
|
|||
* @description 更新标题
|
||||
* @param {String} title 标题
|
||||
*/
|
||||
title: function (titleText) {
|
||||
title: function (titleText: string) {
|
||||
const processTitle = env.TITLE || "FsAdmin";
|
||||
window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ""}`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { env } from "./util.env";
|
||||
function isNullOrUnDef(value) {
|
||||
function isNullOrUnDef(value: any) {
|
||||
return value == null;
|
||||
}
|
||||
const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export const crudOptions = `
|
||||
({expose,dict}) => {
|
||||
({crudExpose,dict}) => {
|
||||
return {
|
||||
columns: {
|
||||
id: {
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import * as api from "./api";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import * as api from "./api";
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, dict } from "@fast-crud/fast-crud";
|
||||
import { GetCrud } from "./api";
|
||||
import _ from "lodash-es";
|
||||
|
||||
/**
|
||||
* 异步创建options
|
||||
* @param props
|
||||
*/
|
||||
export default async function (props: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
|
||||
const { crudExpose } = props;
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
const localCrudOptions = {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
}
|
||||
};
|
||||
// 上面是本地crudOptions
|
||||
|
||||
// 下面从后台获取crudOptions
|
||||
const ret = await GetCrud();
|
||||
// 编译
|
||||
const crudBackend = eval(ret);
|
||||
// 本示例返回的是一个方法字符串，所以要先执行这个方法，获取options
|
||||
const remoteCrudOptions = crudBackend({ crudExpose, dict });
|
||||
// 与本地options合并
|
||||
const crudOptions = _.merge(localCrudOptions, remoteCrudOptions);
|
||||
|
||||
return {
|
||||
crudOptions
|
||||
};
|
||||
}
|
||||
|
|
@ -2,38 +2,27 @@
|
|||
<fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud, dict, useExpose } from "@fast-crud/fast-crud";
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, Ref } from "vue";
|
||||
import { useCrud, dict, useExpose, useFs, UseFsProps, CrudBinding, CreateCrudOptionsRet, useFsAsync } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { GetCrud } from "./api";
|
||||
import _ from "lodash-es";
|
||||
export default defineComponent({
|
||||
name: "AdvancedFromBackend",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
const crudRef: Ref = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
const crudBinding: Ref<CrudBinding> = ref();
|
||||
|
||||
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数
|
||||
|
||||
// 初始化crud配置
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(async () => {
|
||||
// 从后台获取crud配置
|
||||
const ret = await GetCrud();
|
||||
// 编译
|
||||
const crudBackend = eval(ret);
|
||||
// 本示例返回的是一个方法字符串，所以要先执行这个方法，获取options
|
||||
const crudOptionsFromBackend = crudBackend({ expose, dict });
|
||||
// 与本地options合并
|
||||
_.merge(crudOptions, crudOptionsFromBackend);
|
||||
// useCrud
|
||||
useCrud({ expose, crudOptions });
|
||||
const customValue = {};
|
||||
const { crudExpose, extraExport } = await useFsAsync({ crudRef, crudBinding, createCrudOptions, customValue });
|
||||
// 刷新数据
|
||||
expose.doRefresh();
|
||||
await crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// @ts-ignore
|
||||
import mockUtil from "/src/mock/base";
|
||||
import { crudOptions } from "./crud-backend";
|
||||
const options = {
|
||||
const options: any = {
|
||||
name: "AdvancedFromBackend",
|
||||
idGenerator: 0
|
||||
};
|
||||
|
|
@ -23,7 +24,7 @@ const mock = mockUtil.buildMock(options);
|
|||
mock.push({
|
||||
path: "/AdvancedFromBackend/crud",
|
||||
method: "get",
|
||||
handle(req) {
|
||||
handle(req: any) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: "success",
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormLinkage";
|
||||
export function GetList(query) {
|
||||
export function GetList(query: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
|
|
@ -9,7 +9,7 @@ export function GetList(query) {
|
|||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
export function AddObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
|
|
@ -17,7 +17,7 @@ export function AddObj(obj) {
|
|||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
export function UpdateObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
|
|
@ -25,7 +25,7 @@ export function UpdateObj(obj) {
|
|||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
export function DelObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
|
|
@ -33,7 +33,7 @@ export function DelObj(id) {
|
|||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
export function GetObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, ScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
export default function ({ expose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ export default function ({ expose }) {
|
|||
cache: true
|
||||
}),
|
||||
form: {
|
||||
valueChange({ form, value, getComponentRef }) {
|
||||
valueChange({ form, value, getComponentRef }: ScopeContext) {
|
||||
form.city = undefined; // 将“city”的值置空
|
||||
form.county = undefined; // 将“county”的值置空
|
||||
if (value) {
|
||||
|
|
@ -70,7 +70,7 @@ export default function ({ expose }) {
|
|||
cache: true,
|
||||
prototype: true,
|
||||
// url() 改成构建url，返回一个url
|
||||
url({ form }) {
|
||||
url({ form }: any) {
|
||||
if (form && form.province != null) {
|
||||
// 本数据字典的url是通过前一个select的选项决定的
|
||||
return `/mock/linkage/city?province=${form.province}`;
|
||||
|
|
@ -81,7 +81,7 @@ export default function ({ expose }) {
|
|||
}),
|
||||
form: {
|
||||
// 注释同上
|
||||
valueChange({ value, form, getComponentRef }) {
|
||||
valueChange({ value, form, getComponentRef }: ScopeContext) {
|
||||
if (value) {
|
||||
form.county = undefined; // 将county的value置空
|
||||
const countySelect = getComponentRef("county");
|
||||
|
|
@ -104,7 +104,7 @@ export default function ({ expose }) {
|
|||
value: "id",
|
||||
cache: true,
|
||||
prototype: true,
|
||||
url({ form }) {
|
||||
url({ form }: any) {
|
||||
if (form && form.province != null && form.city != null) {
|
||||
return `/mock/linkage/county?province=${form.province} &city=${form.city}`;
|
||||
}
|
||||
|
|
@ -2,31 +2,20 @@
|
|||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud.js";
|
||||
|
||||
export default defineComponent({
|
||||
name: "FormLinkage",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
|
||||
const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// @ts-ignore
|
||||
import mockUtil from "/src/mock/base";
|
||||
import _ from "lodash-es";
|
||||
const options = {
|
||||
const options: any = {
|
||||
name: "FormLinkage",
|
||||
idGenerator: 0
|
||||
};
|
||||
|
|
@ -64,12 +65,12 @@ const tree = [
|
|||
];
|
||||
|
||||
options.list = list;
|
||||
options.copyTimes = 1000;
|
||||
options.copyTimes = 100;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
|
||||
function omitChildren(orignalListt) {
|
||||
const list = [];
|
||||
orignalListt.forEach((item) => {
|
||||
function omitChildren(originalList: any) {
|
||||
const list: any = [];
|
||||
originalList.forEach((item: any) => {
|
||||
list.push(_.omit(item, "children"));
|
||||
});
|
||||
return list;
|
||||
|
|
@ -90,7 +91,7 @@ mock.push({
|
|||
mock.push({
|
||||
path: "/mock/linkage/city",
|
||||
method: "get",
|
||||
handle(req) {
|
||||
handle(req: any) {
|
||||
const province = parseInt(req.params.province);
|
||||
const a = tree.filter((item) => {
|
||||
return item.id === province;
|
||||
|
|
@ -107,7 +108,7 @@ mock.push({
|
|||
mock.push({
|
||||
path: "/mock/linkage/county",
|
||||
method: "get",
|
||||
handle(req) {
|
||||
handle(req: any) {
|
||||
const province = parseInt(req.params.province);
|
||||
const a = tree.filter((item) => {
|
||||
return item.id === province;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/BasisColumnMergePlugin";
|
||||
export function GetList(query) {
|
||||
export function GetList(query: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
|
|
@ -9,7 +9,7 @@ export function GetList(query) {
|
|||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
export function AddObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
|
|
@ -17,7 +17,7 @@ export function AddObj(obj) {
|
|||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
export function UpdateObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
|
|
@ -25,7 +25,7 @@ export function UpdateObj(obj) {
|
|||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
export function DelObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
|
|
@ -33,7 +33,7 @@ export function DelObj(id) {
|
|||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
export function GetObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
|
|
@ -12,14 +12,15 @@
|
|||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import { useFs, UseFsProps } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "BasisColumnMergePlugin",
|
||||
setup() {
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
|
||||
const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// @ts-ignore
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
const options: any = {
|
||||
name: "BasisColumnMergePlugin",
|
||||
idGenerator: 0
|
||||
};
|
||||
|
|
@ -1,8 +1,14 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">列设置</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/toolbar.html#columnsfilter-mode">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert class="ml-1" type="warning" message="列设置可以禁用或者隐藏某字段勾选" />
|
||||
<a-alert class="ml-1" type="warning" message="列设置可以禁用或者隐藏某字段勾选 ，-------> 点击右侧最后一个按钮查看效果" />
|
||||
<a-button @click="columnsSetToggleMode()"> 切换简单模式 </a-button>
|
||||
</template>
|
||||
</fs-crud>
|
||||
|
|
@ -37,9 +43,8 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
function columnsSetToggleMode() {
|
||||
crudBinding.value.toolbar.columnsFilter.mode =
|
||||
crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
|
||||
message.info("当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
|
||||
crudBinding.value.toolbar.columnsFilter.mode = crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
|
||||
message.info("点击列设置按钮查看效果，当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">动态计算-更多测试</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
|
|
|
|||
|
|
@ -177,9 +177,7 @@ export default function ({ expose }) {
|
|||
},
|
||||
async asyncFn(watchValue) {
|
||||
message.info("监听switch,触发远程获取options");
|
||||
const url = watchValue
|
||||
? "/mock/dicts/OpenStatusEnum?remote"
|
||||
: "/mock/dicts/moreOpenStatusEnum?remote";
|
||||
const url = watchValue ? "/mock/dicts/OpenStatusEnum?remote" : "/mock/dicts/moreOpenStatusEnum?remote";
|
||||
return await requestForMock({ url });
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<fs-icon icon="ion:apps-sharp" :spin="true" />
|
||||
</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">帮助说明</a>
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FsCrudFirst";
|
||||
export function GetList(query: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
import * as api from "./api";
|
||||
export default function ({ crudExpose, customValue }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
return {
|
||||
//自定义变量返回
|
||||
customExport: {},
|
||||
crudOptions: {
|
||||
// 自定义crudOptions配置
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
//两个字段
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text",
|
||||
search: { show: true },
|
||||
column: {
|
||||
resizable: true,
|
||||
width: 200
|
||||
}
|
||||
},
|
||||
type: {
|
||||
title: "类型",
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: 1, label: "开始", color: "green" },
|
||||
{ value: 0, label: "停止", color: "red" }
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -1,105 +1,46 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">第一个crud</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/first.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { dict, useCrud } from "@fast-crud/fast-crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
import _ from "lodash-es";
|
||||
|
||||
//此处为crudOptions配置
|
||||
const createCrudOptions = function ({ expose }) {
|
||||
//本地模拟后台crud接口方法 ----开始
|
||||
const records = [{ id: 1, name: "Hello World", type: 1 }];
|
||||
const pageRequest = async (query) => {
|
||||
return {
|
||||
records,
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
total: records.length
|
||||
};
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
const target = _.find(records, (item) => {
|
||||
return row.id === item.id;
|
||||
});
|
||||
_.merge(target, form);
|
||||
return target;
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
_.remove(records, (item) => {
|
||||
return item.id === row.id;
|
||||
});
|
||||
};
|
||||
const addRequest = async ({ form }) => {
|
||||
const maxRecord = _.maxBy(records, (item) => {
|
||||
return item.id;
|
||||
});
|
||||
form.id = (maxRecord?.id || 0) + 1;
|
||||
records.push(form);
|
||||
return form;
|
||||
};
|
||||
//本地模拟后台crud接口方法 -----结束
|
||||
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text",
|
||||
search: { show: true },
|
||||
column: {
|
||||
resizable: true,
|
||||
width: 200
|
||||
}
|
||||
},
|
||||
type: {
|
||||
title: "类型",
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: 1, label: "开始" },
|
||||
{ value: 0, label: "停止" }
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
|
||||
//此处为组件定义
|
||||
export default defineComponent({
|
||||
name: "FsCrudFirst",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
// 演示自定义变量传递, 将会传递给createCrudOptions
|
||||
const customValue: any = {};
|
||||
|
||||
// // crud组件的ref
|
||||
// const crudRef: Ref = ref();
|
||||
// // crud 配置的ref
|
||||
// const crudBinding: Ref<CrudBinding> = ref();
|
||||
// // 暴露的方法
|
||||
// const { crudExpose } = useExpose({ crudRef, crudBinding });
|
||||
// // 你的crud配置
|
||||
// const { crudOptions, customExport } = createCrudOptions({ crudExpose, customValue });
|
||||
// // 初始化crud配置
|
||||
// const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
|
||||
|
||||
// =======以上为fs的初始化代码=========
|
||||
// =======你可以简写为下面这一行========
|
||||
const { crudRef, crudBinding, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
// @ts-ignore
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options: any = {
|
||||
name: "FsCrudFirst",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
name: "张三",
|
||||
type: 1
|
||||
},
|
||||
{
|
||||
name: "李四",
|
||||
type: 0
|
||||
},
|
||||
{
|
||||
name: "王五"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">HelloWorld</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/integration.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useCrud, useFs, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
import _ from "lodash-es";
|
||||
|
||||
//此处为crudOptions配置
|
||||
const createCrudOptions = function ({ crudOptions, customValue }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
//本地模拟后台crud接口方法 ----开始
|
||||
const records = [{ id: 1, name: "Hello World", type: 1 }];
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return {
|
||||
records,
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
total: records.length
|
||||
};
|
||||
};
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
const target = _.find(records, (item) => {
|
||||
return row.id === item.id;
|
||||
});
|
||||
_.merge(target, form);
|
||||
return target;
|
||||
};
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
_.remove(records, (item) => {
|
||||
return item.id === row.id;
|
||||
});
|
||||
};
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
const maxRecord = _.maxBy(records, (item) => {
|
||||
return item.id;
|
||||
});
|
||||
form.id = (maxRecord?.id || 0) + 1;
|
||||
records.push(form);
|
||||
return form;
|
||||
};
|
||||
//本地模拟后台crud接口方法 -----结束
|
||||
|
||||
return {
|
||||
//自定义变量返回
|
||||
customExport: {},
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text",
|
||||
search: { show: true },
|
||||
column: {
|
||||
resizable: true,
|
||||
width: 200
|
||||
}
|
||||
},
|
||||
type: {
|
||||
title: "类型",
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: 1, label: "开始" },
|
||||
{ value: 0, label: "停止" }
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
//此处为组件定义
|
||||
export default defineComponent({
|
||||
name: "FsCrudHelloWorld",
|
||||
setup() {
|
||||
// 演示自定义变量传递, 将会传递给createCrudOptions
|
||||
const customValue: any = {};
|
||||
|
||||
// // crud组件的ref
|
||||
// const crudRef: Ref = ref();
|
||||
// // crud 配置的ref
|
||||
// const crudBinding: Ref<CrudBinding> = ref();
|
||||
// // 暴露的方法
|
||||
// const { crudExpose } = useExpose({ crudRef, crudBinding });
|
||||
// // 你的crud配置
|
||||
// const { crudOptions, customExport } = createCrudOptions({ crudExpose, customValue });
|
||||
// // 初始化crud配置
|
||||
// const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
|
||||
|
||||
// =======以上为fs的初始化代码=========
|
||||
// =======你可以简写为下面这一行========
|
||||
const { crudRef, crudBinding, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -2,7 +2,9 @@
|
|||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">CRUD示例【国际化】</div>
|
||||
<div class="more"><a-button @click="showDemo">更多</a-button></div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/i18n.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
|
|
@ -40,13 +42,9 @@ export default defineComponent({
|
|||
expose.doRefresh();
|
||||
});
|
||||
|
||||
function showDemo() {
|
||||
message("演示按钮");
|
||||
}
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
showDemo
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
import { computed } from "vue";
|
||||
|
||||
export default function ({ crudExpose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
|
|
@ -15,6 +17,17 @@ export default function ({ crudExpose }) {
|
|||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
let cityDictRef = dict({
|
||||
value: "id",
|
||||
label: "text",
|
||||
data: [
|
||||
{ id: "sz", text: "深圳", color: "success" },
|
||||
{ id: "gz", text: "广州", color: "blue" },
|
||||
{ id: "bj", text: "北京" },
|
||||
{ id: "wh", text: "武汉" },
|
||||
{ id: "sh", text: "上海" }
|
||||
]
|
||||
});
|
||||
return {
|
||||
crudOptions: {
|
||||
container: {
|
||||
|
|
@ -26,6 +39,16 @@ export default function ({ crudExpose }) {
|
|||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
tabs: {
|
||||
name: "city",
|
||||
show: true,
|
||||
type: "card",
|
||||
value: "id",
|
||||
label: "text",
|
||||
options: computed(() => {
|
||||
return cityDictRef.data;
|
||||
})
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
|
|
@ -47,17 +70,7 @@ export default function ({ crudExpose }) {
|
|||
title: "城市",
|
||||
type: "dict-select",
|
||||
search: { show: true },
|
||||
dict: dict({
|
||||
value: "id",
|
||||
label: "text",
|
||||
data: [
|
||||
{ id: "sz", text: "深圳", color: "success" },
|
||||
{ id: "gz", text: "广州", color: "blue" },
|
||||
{ id: "bj", text: "北京" },
|
||||
{ id: "wh", text: "武汉" },
|
||||
{ id: "sh", text: "上海" }
|
||||
]
|
||||
})
|
||||
dict: cityDictRef
|
||||
},
|
||||
radio: {
|
||||
title: "单选",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<fs-page class="page-layout-card">
|
||||
<template #header>
|
||||
<div class="title">Card布局</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/layout.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
|
@ -42,5 +48,9 @@ export default defineComponent({
|
|||
<style lang="less">
|
||||
.page-layout-card {
|
||||
background-color: #eee;
|
||||
|
||||
.fs-page-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,11 @@ export default function ({ crudExpose }) {
|
|||
container: {
|
||||
is: shallowRef(CustomLayout) //可以将自定义布局组件全局注册，这里只需要配置name即可
|
||||
},
|
||||
tabs: {
|
||||
show: true,
|
||||
name: "city",
|
||||
type: "card"
|
||||
},
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
|
|
@ -48,7 +53,7 @@ export default function ({ crudExpose }) {
|
|||
city: {
|
||||
title: "城市",
|
||||
type: "dict-select",
|
||||
search: { show: false },
|
||||
search: { show: true },
|
||||
dict: dict({
|
||||
value: "id",
|
||||
label: "text",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
<div class="layout-top">
|
||||
<!-- ↓↓↓↓↓ 关键插槽：动作条 ↓↓↓↓ -->
|
||||
<slot name="actionbar"></slot>
|
||||
|
||||
<slot name="tabs"></slot>
|
||||
<!-- ↓↓↓↓↓ 上翻页条 ↓↓↓↓ -->
|
||||
<slot name="pagination"></slot>
|
||||
</div>
|
||||
|
|
@ -70,5 +72,10 @@ export default defineComponent({
|
|||
text-align: right;
|
||||
padding: 5px 10px 5px 10px;
|
||||
}
|
||||
|
||||
.fs-tabs-filter {
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
<template>
|
||||
<fs-page class="page-layout-custom">
|
||||
<template #header>
|
||||
<div class="title">自定义布局</div>
|
||||
<div class="title">
|
||||
自定义布局
|
||||
<span class="sub">通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条</span>
|
||||
</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/layout.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert
|
||||
class="ml-1"
|
||||
type="info"
|
||||
message="通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条 -------->"
|
||||
/>
|
||||
</template>
|
||||
</fs-crud>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/BasisValueChange";
|
||||
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 + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import * as api from "./api";
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
|
||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
return {
|
||||
output: {},
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
switch: {
|
||||
title: "开关",
|
||||
type: "dict-switch",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: true, label: "开启" },
|
||||
{ value: false, label: "关闭" }
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
重置CrudOptions
|
||||
<span class="sub">重置CrudOptions,演示2秒后追加一个字段</span>
|
||||
</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/use.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted } from "vue";
|
||||
import { useFs, UseFsProps } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud.js";
|
||||
import _ from "lodash-es";
|
||||
export default defineComponent({
|
||||
name: "BasisReset",
|
||||
setup() {
|
||||
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
|
||||
const { crudBinding, crudRef, crudExpose, customExport, crudOptions, resetCrudOptions, appendBindingOptions } = useFs({ createCrudOptions, customValue } as UseFsProps);
|
||||
|
||||
setTimeout(() => {
|
||||
//合并新的crudOptions
|
||||
const newOptions = _.merge(crudOptions, {
|
||||
columns: {
|
||||
text: {
|
||||
title: "追加字段",
|
||||
type: "text"
|
||||
}
|
||||
}
|
||||
});
|
||||
//重置crudBinding
|
||||
resetCrudOptions(newOptions);
|
||||
crudExpose.doRefresh();
|
||||
}, 2000);
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
// @ts-ignore
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options: any = {
|
||||
name: "BasisValueChange",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
switch: true,
|
||||
text: "1111"
|
||||
},
|
||||
{
|
||||
switch: true,
|
||||
text: "2222"
|
||||
},
|
||||
{
|
||||
switch: true,
|
||||
text: "3333"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
|
|
@ -2,6 +2,9 @@
|
|||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">ValueChange</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#valuebuilder与valueresolve">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export default function ({ expose }) {
|
|||
delRequest
|
||||
},
|
||||
table: {
|
||||
scroll: { x: 2000 }
|
||||
scroll: { x: 3000 }
|
||||
},
|
||||
rowHandle: { fixed: "right" },
|
||||
columns: {
|
||||
|
|
@ -71,6 +71,17 @@ export default function ({ expose }) {
|
|||
largest: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
valueBuilder({ value, row, key }) {
|
||||
console.log("value builder:", key, value, row);
|
||||
if (value != null) {
|
||||
row[key] = dayjs(value);
|
||||
}
|
||||
},
|
||||
valueResolve({ value, row, key }) {
|
||||
if (value != null) {
|
||||
row[key] = value.unix();
|
||||
}
|
||||
}
|
||||
},
|
||||
datetime: {
|
||||
|
|
@ -122,6 +133,42 @@ export default function ({ expose }) {
|
|||
}
|
||||
}
|
||||
},
|
||||
month: {
|
||||
title: "月份",
|
||||
type: "month",
|
||||
form: {
|
||||
component: {
|
||||
valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
|
||||
}
|
||||
}
|
||||
},
|
||||
week: {
|
||||
title: "星期",
|
||||
type: "week",
|
||||
form: {
|
||||
component: {
|
||||
valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
|
||||
}
|
||||
}
|
||||
},
|
||||
quarter: {
|
||||
title: "季度",
|
||||
type: "quarter",
|
||||
form: {
|
||||
component: {
|
||||
valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
|
||||
}
|
||||
}
|
||||
},
|
||||
year: {
|
||||
title: "年份",
|
||||
type: "year",
|
||||
form: {
|
||||
component: {
|
||||
valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
|
||||
}
|
||||
}
|
||||
},
|
||||
disabledDate: {
|
||||
title: "禁用日期",
|
||||
type: "date",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@ const list = [
|
|||
date: "2019-09-02 11:11:11",
|
||||
format: "2019-09-21 11:11:11",
|
||||
time: "2019-09-22 12:11:11",
|
||||
month: "2019-09-22 12:11:11",
|
||||
week: "2019-09-22 12:11:11",
|
||||
quarter: "2019-09-22 12:11:11",
|
||||
year: "2019-09-22 12:11:11",
|
||||
daterangeStart: "2019-09-23 11:11:11",
|
||||
daterangeEnd: "2019-09-24 11:11:11",
|
||||
datetimerangeStart: "2019-09-25 11:11:11",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
分发时复制Dict
|
||||
<span class="sub">如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制</span>
|
||||
</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/dict.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert
|
||||
class="ml-1"
|
||||
type="warning"
|
||||
message="如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制；----点击switch看效果----↓↓↓↓↓↓"
|
||||
/>
|
||||
<a-alert class="ml-1" type="warning" message="如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制；----点击switch看效果----↓↓↓↓↓↓" />
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
原型复制Dict
|
||||
<span class="sub">dict配置作为原型，任何用到的地方都会clone一个新的实例例（同一个字段每一行的dict都是不一样的）</span>
|
||||
</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/dict.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert
|
||||
class="ml-1"
|
||||
type="warning"
|
||||
message="dict配置作为原型，任何用到的地方都会clone一个新的实例例（同一个字段每一行的dict都是不一样的）------点击switch看效果-------↓↓↓↓↓↓↓↓"
|
||||
/>
|
||||
<a-alert class="ml-1" type="warning" message="------点击switch看效果-------↓↓↓↓↓↓↓↓" />
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/DictSharedManager";
|
||||
export function GetList(query) {
|
||||
export function GetList(query: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
|
|
@ -9,7 +9,7 @@ export function GetList(query) {
|
|||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
export function AddObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
|
|
@ -17,7 +17,7 @@ export function AddObj(obj) {
|
|||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
export function UpdateObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
|
|
@ -25,7 +25,7 @@ export function UpdateObj(obj) {
|
|||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
export function DelObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
|
|
@ -33,7 +33,7 @@ export function DelObj(id) {
|
|||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
export function GetObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
|
|
@ -1,18 +1,19 @@
|
|||
import * as api from "./api";
|
||||
import * as api from "./api.js";
|
||||
import { statusDict } from "../shared-dict";
|
||||
export default function ({ crudExpose }) {
|
||||
const pageRequest = async (query) => {
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert class="ml-1" type="warning" message="管理共享字典，此处添加和修改字典，在使用时实时变化" />
|
||||
</template>
|
||||
</fs-crud>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
管理共享字典
|
||||
<span class="sub">此处添加和修改字典，在使用时实时变化</span>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
|
|
@ -16,8 +18,8 @@ import createCrudOptions from "./crud";
|
|||
export default defineComponent({
|
||||
name: "DictSharedManager",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
|
||||
const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// @ts-ignore
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
const options: any = {
|
||||
name: "DictSharedManager",
|
||||
idGenerator: 0,
|
||||
copyTimes: 1
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { dict, utils } from "@fast-crud/fast-crud";
|
||||
import * as api from "./manager/api";
|
||||
import * as api from "./manager/api.js";
|
||||
export const statusDict = dict({
|
||||
value: "name",
|
||||
async getData() {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/DictSharedUse";
|
||||
export function GetList(query) {
|
||||
export function GetList(query: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
|
|
@ -9,7 +9,7 @@ export function GetList(query) {
|
|||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
export function AddObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
|
|
@ -17,7 +17,7 @@ export function AddObj(obj) {
|
|||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
export function UpdateObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
|
|
@ -25,7 +25,7 @@ export function UpdateObj(obj) {
|
|||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
export function DelObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
|
|
@ -33,7 +33,7 @@ export function DelObj(id) {
|
|||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
export function GetObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
|
|
@ -1,18 +1,20 @@
|
|||
import * as api from "./api";
|
||||
import * as api from "./api.js";
|
||||
import { statusDict } from "../shared-dict";
|
||||
export default function ({ crudExpose }) {
|
||||
const pageRequest = async (query) => {
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
|
||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
|
|
@ -1,23 +1,26 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert class="ml-1" type="warning" message="共享字典的使用" />
|
||||
</template>
|
||||
</fs-crud>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
共享字典的使用
|
||||
<span class="sub">在管理共享字典页面添加字典后，使用时会自动增加字典选项</span>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import createCrudOptions from "./crud.js";
|
||||
|
||||
export default defineComponent({
|
||||
name: "DictSharedUse",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
|
||||
const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// @ts-ignore
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
const options: any = {
|
||||
name: "DictSharedUse",
|
||||
idGenerator: 0
|
||||
};
|
||||
|
|
@ -1,8 +1,17 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
单例Dict
|
||||
<span class="sub">修改一个，影响全部组件</span>
|
||||
</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/dict.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert class="ml-1" type="warning" message="单例dict，修改一个，影响全部组件，----------点击switch看效果----------↓↓↓↓↓↓↓↓↓↓↓↓↓↓" />
|
||||
<a-alert class="ml-1" type="warning" message="----------点击switch看效果----------↓↓↓↓↓↓↓↓↓↓↓↓↓↓" />
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,15 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" style="position: relative" v-bind="crudBinding">
|
||||
<template #actionbar-right> 列头可以调整宽度 </template>
|
||||
</fs-crud>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
列宽调整
|
||||
<span class="sub">列头可以调整宽度</span>
|
||||
</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/table.html#对应ui库的table组件的参数">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" style="position: relative" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
字段列排序
|
||||
<span class="sub">表格列和表单字段可以单独配置顺序，配置order即可控制字段的顺序，数字越小越靠前，默认为1，（配置0或负数排前面，配置2以上排后面）</span>
|
||||
</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#key-column-order">列顺序配置</a> /
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#key-form-order">表单字段顺序配置</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert
|
||||
class="ml-1"
|
||||
type="info"
|
||||
message="配置order即可控制字段的顺序，数字越小越靠前，默认为1，（配置0或负数排前面，配置2以上排后面）"
|
||||
/>
|
||||
<a-alert class="ml-1" type="info" message="" />
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">列设置（简化模式）</div>
|
||||
<div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/toolbar.html#columnsfilter-mode">文档</a></div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert
|
||||
class="ml-1"
|
||||
type="warning"
|
||||
message="列设置支持简化模式"
|
||||
/>
|
||||
<a-alert class="ml-1" type="warning" message="列设置支持简化模式 ------> 点击最右侧按钮查看效果" />
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
|
|
@ -42,7 +42,7 @@ export default defineComponent({
|
|||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -66,21 +66,31 @@ export default function ({ expose }) {
|
|||
title: "姓名",
|
||||
type: "text"
|
||||
},
|
||||
province: {
|
||||
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: "上海" }
|
||||
]
|
||||
})
|
||||
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: "上海" }
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<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" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -83,21 +83,31 @@ export default function ({ expose }) {
|
|||
title: "姓名",
|
||||
type: "text"
|
||||
},
|
||||
province: {
|
||||
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: "上海" }
|
||||
]
|
||||
})
|
||||
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: "上海" }
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<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>-->
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default function ({ expose }) {
|
|||
},
|
||||
table: {
|
||||
//默认展开第一行
|
||||
defaultExpandedRowKeys:[1],
|
||||
defaultExpandedRowKeys: [1],
|
||||
slots: {
|
||||
expandedRowRender: (scope) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #pagination-left>
|
||||
<a-tooltip title="批量删除">
|
||||
<fs-button icon="DeleteOutlined" @click="handleBatchDelete"></fs-button>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</fs-crud>
|
||||
<template #header>
|
||||
<div class="title">行展开</div>
|
||||
<div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/table.html#对应ui库的table组件的参数">文档</a></div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
|
|
@ -38,27 +36,9 @@ export default defineComponent({
|
|||
expose.doRefresh();
|
||||
});
|
||||
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRowKeys.value?.length > 0) {
|
||||
Modal.confirm({
|
||||
title: "确认",
|
||||
content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
|
||||
async onOk() {
|
||||
await BatchDelete(selectedRowKeys.value);
|
||||
message.info("删除成功");
|
||||
expose.doRefresh();
|
||||
selectedRowKeys.value = [];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
message.error("请先勾选记录");
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
handleBatchDelete
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FeatureHeader";
|
||||
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 + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function BatchDelete(ids: any[]) {
|
||||
return request({
|
||||
url: apiPrefix + "/batchDelete",
|
||||
method: "post",
|
||||
data: { ids }
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import * as api from "./api.js";
|
||||
import { CreateCrudOptionsProps, dict, CreateCrudOptionsRet, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
|
||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
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: api.GetList,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
table: {
|
||||
slots: {
|
||||
headerCell({ column }: any) {
|
||||
if (column.key === "text") {
|
||||
return (
|
||||
<span class={"flex "}>
|
||||
Text
|
||||
<a-tooltip title={"tooltip 提示"}>
|
||||
<fs-icon class={"ml-5"} icon={"ion:alert-circle-outline"}></fs-icon>
|
||||
</a-tooltip>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
text: {
|
||||
title: "text",
|
||||
type: "text",
|
||||
search: { show: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
<span>自定义header</span>
|
||||
<span class="sub">通过配置a-table的headerCell插槽实现</span>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from "vue";
|
||||
import createCrudOptions from "./crud.js";
|
||||
import { useFs, UseFsProps } from "@fast-crud/fast-crud";
|
||||
defineOptions({
|
||||
name: "FeatureHeader"
|
||||
});
|
||||
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
|
||||
const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue } as UseFsProps);
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// @ts-ignore
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options: any = {
|
||||
name: "FeatureHeader",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
text: "上面自定义表头"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
import { ref } from "vue";
|
||||
import { computed, ref } from "vue";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
|
|
@ -16,6 +16,9 @@ export default function ({ expose }) {
|
|||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
let statusRef = dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?single"
|
||||
});
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
|
|
@ -24,15 +27,9 @@ export default function ({ expose }) {
|
|||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
table: {
|
||||
// 表头过滤改变事件
|
||||
onFilterChange(e) {
|
||||
console.log("onFilterChange", e);
|
||||
}
|
||||
},
|
||||
search: {
|
||||
initialForm: {
|
||||
radio: "0"
|
||||
radio: null
|
||||
},
|
||||
buttons: {
|
||||
custom: {
|
||||
|
|
@ -51,6 +48,14 @@ export default function ({ expose }) {
|
|||
}
|
||||
}
|
||||
},
|
||||
tabs: {
|
||||
name: "radio",
|
||||
show: true,
|
||||
type: "card",
|
||||
options: computed(() => {
|
||||
return statusRef.data;
|
||||
})
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
|
|
@ -67,23 +72,7 @@ export default function ({ expose }) {
|
|||
title: "状态",
|
||||
search: { show: true },
|
||||
type: "dict-radio",
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?single"
|
||||
}),
|
||||
column: {
|
||||
filters: [
|
||||
{ text: "开", value: "1" },
|
||||
{ text: "关", value: "0" },
|
||||
{ text: "停", value: "2" }
|
||||
],
|
||||
// specify the condition of filtering result
|
||||
// here is that finding the name started with `value`
|
||||
onFilter: (value, record) => {
|
||||
return record.radio === value;
|
||||
},
|
||||
sorter: (a, b) => a.radio - b.radio,
|
||||
sortDirections: ["descend"]
|
||||
}
|
||||
dict: statusRef
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,10 +46,10 @@ export default defineComponent({
|
|||
message.info(`searchForm:${JSON.stringify(form)}`);
|
||||
},
|
||||
setSearchFormData() {
|
||||
expose.setSearchFormData({ form: { radio: "1", test: 2 }, mergeForm: true });
|
||||
expose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
|
||||
},
|
||||
clearSearchForm() {
|
||||
expose.setSearchFormData({ form: {}, mergeForm: false });
|
||||
expose.setSearchFormData({ form: { radio: null }, mergeForm: false });
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FeatureTabs";
|
||||
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: number) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id: number) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import * as api from "./api";
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
|
||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
const statusRef = dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?single"
|
||||
});
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
search: {
|
||||
initialForm: {
|
||||
radio: null
|
||||
},
|
||||
buttons: {
|
||||
custom: {
|
||||
text: "自定义",
|
||||
show: true,
|
||||
order: 3,
|
||||
icon: {
|
||||
icon: "ant-design:search",
|
||||
style: {
|
||||
"font-size": "16px"
|
||||
}
|
||||
},
|
||||
click() {
|
||||
console.log("点击了自定义按钮");
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
tabs: {
|
||||
name: "radio",
|
||||
show: true
|
||||
//type: 'card', //tabs类型
|
||||
// defaultOptions: { //第一个tab页签显示
|
||||
// show: true,
|
||||
// value: null, //点击第一个页签，查询值
|
||||
// label: '全部', // 第一个页签的名称
|
||||
// },
|
||||
// options: computed(() => { //选项，默认从name字段的dict里面获取
|
||||
// return statusRef.data;
|
||||
// })
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radio: {
|
||||
title: "状态",
|
||||
search: { show: true },
|
||||
type: "dict-radio",
|
||||
dict: statusRef
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
Tabs快捷查询
|
||||
<span class="sub">表格顶部显示tabs，点击tabs快捷查询</span>
|
||||
</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/tabs.html">文档</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
import { message } from "ant-design-vue";
|
||||
export default defineComponent({
|
||||
name: "FeatureTabs",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
getSearchFormData() {
|
||||
const form = expose.getSearchFormData();
|
||||
message.info(`searchForm:${JSON.stringify(form)}`);
|
||||
},
|
||||
setSearchFormData() {
|
||||
expose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
|
||||
},
|
||||
clearSearchForm() {
|
||||
expose.setSearchFormData({ form: { radio: null }, mergeForm: false });
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// @ts-ignore
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options: any = {
|
||||
name: "FeatureTabs",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
radio: "1"
|
||||
},
|
||||
{
|
||||
radio: "2"
|
||||
},
|
||||
{
|
||||
radio: "0"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
import * as api from "./api";
|
||||
import { message } from "ant-design-vue";
|
||||
import { utils } from "@fast-crud/fast-crud";
|
||||
export default function ({ crudExpose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
|
|
@ -27,6 +29,15 @@ export default function ({ crudExpose }) {
|
|||
buttons: {
|
||||
ok: {
|
||||
text: "保存"
|
||||
},
|
||||
custom: {
|
||||
text: "自定义按钮",
|
||||
click: async (context) => {
|
||||
utils.logger.info("btn context", context);
|
||||
message.info({ content: "通过自定义按钮，触发保存" });
|
||||
await context.submit();
|
||||
message.info({ content: "保存成功" });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,12 +10,13 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, nextTick } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import {useFs, UseFsProps} from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud.jsx";
|
||||
export default defineComponent({
|
||||
name: "FormBase",
|
||||
setup() {
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
|
||||
const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue } as UseFsProps);
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(async () => {
|
||||
|
|
|
|||
|
|
@ -10,12 +10,13 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, nextTick } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import { useFs, UseFsProps } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
export default defineComponent({
|
||||
name: "FormSingleColumn",
|
||||
setup() {
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
|
||||
const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue } as UseFsProps);
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(async () => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { request } from "/src/api/service";
|
||||
const apiPrefix = "/sys/authority/permission";
|
||||
export async function GetList(query) {
|
||||
export async function GetList(query: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "post",
|
||||
|
|
@ -15,7 +15,7 @@ export async function GetTree() {
|
|||
});
|
||||
}
|
||||
|
||||
export async function AddObj(obj) {
|
||||
export async function AddObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
|
|
@ -23,7 +23,7 @@ export async function AddObj(obj) {
|
|||
});
|
||||
}
|
||||
|
||||
export async function UpdateObj(obj) {
|
||||
export async function UpdateObj(obj: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
|
|
@ -31,7 +31,7 @@ export async function UpdateObj(obj) {
|
|||
});
|
||||
}
|
||||
|
||||
export async function DelObj(id) {
|
||||
export async function DelObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
|
|
@ -39,7 +39,7 @@ export async function DelObj(id) {
|
|||
});
|
||||
}
|
||||
|
||||
export async function GetObj(id) {
|
||||
export async function GetObj(id: any) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "post",
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
import * as api from "./api.js";
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
const list = await api.GetTree(query);
|
||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
const list = await api.GetTree();
|
||||
|
||||
return {
|
||||
current: 1,
|
||||
|
|
@ -16,29 +16,29 @@ export default function ({ expose }) {
|
|||
async function afterChange() {
|
||||
await permissionTreeDict.reloadDict();
|
||||
}
|
||||
const editRequest = async ({ form, row }) => {
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
form.id = row.id;
|
||||
const ret = await api.UpdateObj(form);
|
||||
await afterChange();
|
||||
return ret;
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
const ret = await api.DelObj(row.id);
|
||||
await afterChange();
|
||||
return ret;
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
const ret = await api.AddObj(form);
|
||||
await afterChange();
|
||||
return ret;
|
||||
};
|
||||
let permissionTreeDict = dict({
|
||||
const permissionTreeDict = dict({
|
||||
url: "/sys/authority/permission/tree",
|
||||
isTree: true,
|
||||
value: "id",
|
||||
label: "title",
|
||||
async onReady({ dict }) {
|
||||
async onReady({ dict }: any) {
|
||||
dict.setData([{ id: -1, title: "根节点", children: dict.data }]);
|
||||
}
|
||||
});
|
||||
|
|
@ -8,15 +8,7 @@
|
|||
<fs-icon :icon="$fsui.icons.add"></fs-icon>
|
||||
添加</a-button
|
||||
>
|
||||
<fs-permission-tree
|
||||
class="permission-tree"
|
||||
:tree="crudBinding.data"
|
||||
:checkable="false"
|
||||
:actions="permission"
|
||||
@add="addHandle"
|
||||
@edit="editHandle"
|
||||
@remove="removeHandle"
|
||||
></fs-permission-tree>
|
||||
<fs-permission-tree class="permission-tree" :tree="crudBinding.data" :checkable="false" :actions="permission" @add="addHandle" @edit="editHandle" @remove="removeHandle"></fs-permission-tree>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
|
@ -24,7 +16,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud, useExpose, CrudExpose, useUi } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import createCrudOptions from "./crud.js";
|
||||
import FsPermissionTree from "./fs-permission-tree.vue";
|
||||
import { usePermission } from "/src/plugin/permission";
|
||||
export default defineComponent({
|
||||
|
|
@ -36,21 +28,20 @@ export default defineComponent({
|
|||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const exposeRet: { expose: CrudExpose } = useExpose({ crudRef, crudBinding });
|
||||
const expose: CrudExpose = exposeRet.expose;
|
||||
const { crudExpose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
const { crudOptions } = createCrudOptions({ crudExpose });
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
// 初始化crud配置
|
||||
// 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
|
||||
// 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions, permission: "sys:auth:per" });
|
||||
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions, permission: "sys:auth:per" });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(async () => {
|
||||
await expose.doRefresh();
|
||||
await crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
//用户业务代码
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
"types": [
|
||||
"mocha",
|
||||
"chai",
|
||||
"node"
|
||||
"node",
|
||||
"unplugin-vue-define-options/macros-global"
|
||||
],
|
||||
"paths": {
|
||||
"/@/*": ["src/*"],
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import visualizer from "rollup-plugin-visualizer";
|
|||
import viteCompression from "vite-plugin-compression";
|
||||
import PurgeIcons from "vite-plugin-purge-icons";
|
||||
import * as path from "path";
|
||||
import DefineOptions from "unplugin-vue-define-options/vite";
|
||||
// import WindiCSS from "vite-plugin-windicss";
|
||||
// import { generateModifyVars } from "./build/modify-vars";
|
||||
// import { configThemePlugin } from "./build/theme-plugin";
|
||||
|
|
@ -37,6 +38,7 @@ export default ({ command, mode }) => {
|
|||
return {
|
||||
base: "/antdv/",
|
||||
plugins: [
|
||||
DefineOptions(),
|
||||
vueJsx(),
|
||||
vue(),
|
||||
// 压缩build后的代码
|
||||
|
|
|
|||
Loading…
Reference in New Issue