!105 feat: 从表结构生成前端基础文件

Merge pull request !105 from lorenzo/master

web/src/views/template/api.ts

@@ -0,0 +1,50 @@
+import { request,downloadFile } from '/@/utils/service';
+import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+
+export const apiPrefix = '/api/VIEWSETNAME/';
+
+export function GetList(query: PageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	});
+}
+export function GetObj(id: InfoReq) {
+	return request({
+		url: apiPrefix + id,
+		method: 'get',
+	});
+}
+
+export function AddObj(obj: AddReq) {
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	});
+}
+
+export function UpdateObj(obj: EditReq) {
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	});
+}
+
+export function DelObj(id: DelReq) {
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	});
+}
+
+export function exportData(params:any){
+    return downloadFile({
+        url: apiPrefix + 'export_data/',
+        params: params,
+        method: 'get'
+    })
+}

web/src/views/template/crud.tsx

@@ -0,0 +1,86 @@
+import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose, UserPageQuery, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import _ from 'lodash-es';
+import * as api from './api';
+import { request } from '/@/utils/service';
+import { auth } from "/@/utils/authFunction";
+
+//此处为crudOptions配置
+export default function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsRet {
+    const pageRequest = async (query: any) => {
+        return await api.GetList(query);
+    };
+    const editRequest = async ({ form, row }: EditReq) => {
+        if (row.id) {
+            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 exportRequest = async (query: UserPageQuery) => {
+        return await api.exportData(query)
+    };
+
+    return {
+        crudOptions: {
+            request: {
+                pageRequest,
+                addRequest,
+                editRequest,
+                delRequest,
+            },
+            actionbar: {
+                buttons: {
+                    export: {
+                        // 注释编号:django-vue3-admin-crud210716:注意这个auth里面的值，最好是使用index.vue文件里面的name值并加上请求动作的单词
+                        show: auth('VIEWSETNAME:Export'),
+                        text: "导出",//按钮文字
+                        title: "导出",//鼠标停留显示的信息
+                        click() {
+                            return exportRequest(crudExpose.getSearchFormData())
+                            // return exportRequest(crudExpose!.getSearchFormData())    // 注意这个crudExpose!.getSearchFormData()，一些低版本的环境是需要添加!的
+                        }
+                    },
+                    add: {
+                        show: auth('VIEWSETNAME:Create'),
+                    },
+                }
+            },
+            rowHandle: {
+                //固定右侧
+                fixed: 'right',
+                width: 200,
+                buttons: {
+                    view: {
+                        type: 'text',
+                        order: 1,
+                        show: auth('VIEWSETNAME:Retrieve')
+                    },
+                    edit: {
+                        type: 'text',
+                        order: 2,
+                        show: auth('VIEWSETNAME:Update')
+                    },
+                    copy: {
+                        type: 'text',
+                        order: 3,
+                        show: auth('VIEWSETNAME:Copy')
+                    },
+                    remove: {
+                        type: 'text',
+                        order: 4,
+                        show: auth('VIEWSETNAME:Delete')
+                    },
+                },
+            },
+            columns: {
+                // COLUMNS_CONFIG
+            },
+        },
+    };
+}

web/src/views/template/index.vue

@@ -0,0 +1,56 @@
+<template>
+	<fs-page class="PageFeatureSearchMulti">
+		<fs-crud ref="crudRef" v-bind="crudBinding">
+			<template #cell_url="scope">
+				<el-tag size="small">{{ scope.row.url }}</el-tag>
+			</template>
+			<!-- 注释编号: django-vue3-admin-index442216: -->
+			<!-- 注释编号:django-vue3-admin-index39263917:代码开始行-->
+			<!--  功能说明:使用导入组件，并且修改api地址为当前对应的api，当前是demo的api="api/CarModelViewSet/"-->
+			<template #actionbar-right>
+				<importExcel api="api/VIEWSETNAME/" v-auth="'user:Import'">导入</importExcel>
+			</template>
+			<!--  注释编号:django-vue3-admin-index263917:代码结束行-->
+			
+		</fs-crud>
+	</fs-page>
+</template>
+
+<script lang="ts">
+import { onMounted, getCurrentInstance, defineComponent} from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import createCrudOptions  from './crud';
+
+// 注释编号: django-vue3-admin-index192316:导入组件
+import importExcel from '/@/components/importExcel/index.vue'   
+
+
+export default defineComponent({    //这里配置defineComponent
+    name: "VIEWSETNAME",   //把name放在这里进行配置了
+	components: {importExcel},  //注释编号: django-vue3-admin-index552416: 注册组件，把importExcel组件放在这里，这样<template></template>中才能正确的引用到组件
+    setup() {   //这里配置了setup()
+
+		const instance = getCurrentInstance();
+
+		const context: any = {
+			componentName: instance?.type.name
+		};
+
+		const { crudBinding, crudRef, crudExpose, resetCrudOptions } = useFs({ createCrudOptions, context});  
+
+
+		// 页面打开后获取列表数据
+		onMounted(() => {
+			crudExpose.doRefresh();
+		});
+		return {  
+		//增加了return把需要给上面<template>内调用的<fs-crud ref="crudRef" v-bind="crudBinding">
+				crudBinding,
+				crudRef,
+			};
+	
+
+    } 	//这里关闭setup()
+  });  //关闭defineComponent
+
+</script>