feat: 从表结构生成前端基础文件
This commit is contained in:
7emotions
87
crud-gen.sh
Normal file
87
crud-gen.sh
Normal file
@@ -0,0 +1,87 @@
|
||||
if ! [ -f ".env" ];then
|
||||
echo ".env file not found"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [ -z "$3" ]; then
|
||||
echo "Use: $0 <app_name> <view_name> <table_name>"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
|
||||
DIR=./web/src/views/$1/$2
|
||||
|
||||
|
||||
# 设置数据库连接信息
|
||||
HOST="177.10.0.13"
|
||||
USER="root"
|
||||
PASSWORD=$(cat .env | grep MYSQL_PASSWORD | sed 's/^.*MYSQL_PASSWORD=//g')
|
||||
DATABASE="django-vue3-admin"
|
||||
TABLE=$3
|
||||
TARGET_FILE="./web/src/views/$1/$2/crud.tsx"
|
||||
|
||||
|
||||
# 表是否存在
|
||||
TABLE_EXISTS=$(mysql -h $HOST -u $USER -p$PASSWORD -D $DATABASE -e "SHOW TABLES LIKE '$TABLE';" -N | grep "$TABLE" | wc -l)
|
||||
|
||||
if [ "$TABLE_EXISTS" -eq 0 ]; then
|
||||
echo "Table $TABLE does not exist in database $DATABASE."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
mkdir -p $DIR
|
||||
cp -r ./web/src/views/template/* $DIR
|
||||
sed -i "s/VIEWSETNAME/$2/g" $DIR/*
|
||||
|
||||
sed -n -e :a -e '1,5!{P;N;D;};N;ba' -i $TARGET_FILE
|
||||
|
||||
# 查询表结构
|
||||
QUERY="SELECT COLUMN_NAME, DATA_TYPE, COLUMN_COMMENT, IS_NULLABLE FROM information_schema.COLUMNS WHERE TABLE_SCHEMA = '$DATABASE' AND TABLE_NAME = '$TABLE' ORDER BY ORDINAL_POSITION;"
|
||||
|
||||
# 使用 MySQL 查询获取字段信息，并生成 fast-crud 配置
|
||||
mysql -h $HOST -u $USER -p$PASSWORD -D $DATABASE -e "$QUERY" -N | while read COLUMN_NAME DATA_TYPE COLUMN_COMMENT IS_NULLABLE; do
|
||||
# 映射 MySQL 数据类型到 fast-crud 类型
|
||||
case "$DATA_TYPE" in
|
||||
"int"|"bigint"|"smallint"|"mediumint"|"tinyint"|"decimal"|"float"|"double")
|
||||
TYPE="number"
|
||||
;;
|
||||
"date"|"datetime"|"timestamp")
|
||||
TYPE="date"
|
||||
;;
|
||||
*)
|
||||
TYPE="text"
|
||||
;;
|
||||
esac
|
||||
|
||||
echo " $COLUMN_NAME: {
|
||||
title: '$COLUMN_NAME',
|
||||
type: '$TYPE',
|
||||
search: { show: true },
|
||||
column: {
|
||||
minWidth: 120,
|
||||
sortable: 'custom',
|
||||
},
|
||||
form: {" >> $TARGET_FILE
|
||||
|
||||
if [ "$IS_NULLABLE" = "NO" ]; then
|
||||
echo " helper: {
|
||||
render() {
|
||||
return <div style={"color:blue"}>$COLUMN_NAME 是必填的</div>;
|
||||
}
|
||||
},
|
||||
rules: [{
|
||||
required: true, message: '$COLUMN_NAME 是必填的'
|
||||
}]," >> $TARGET_FILE
|
||||
fi
|
||||
|
||||
echo " component: {
|
||||
placeholder: '请输入 $COLUMN_NAME',
|
||||
},
|
||||
},
|
||||
}," >> $TARGET_FILE
|
||||
done
|
||||
|
||||
echo " },
|
||||
},
|
||||
};
|
||||
}" >> $TARGET_FILE
|
||||
50
web/src/views/template/api.ts
Normal file
50
web/src/views/template/api.ts
Normal file
@@ -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'
|
||||
})
|
||||
}
|
||||
86
web/src/views/template/crud.tsx
Normal file
86
web/src/views/template/crud.tsx
Normal file
@@ -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
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
56
web/src/views/template/index.vue
Normal file
56
web/src/views/template/index.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user