first commit
This commit is contained in:
JaguarJack
109
modules/Develop/views/generate/components/codeGen.vue
Normal file
109
modules/Develop/views/generate/components/codeGen.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<template #header>
|
||||
<div>
|
||||
<span>{{ $t('generate.code.title') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="w-full sm:w-[40%] mx-auto">
|
||||
<el-form :model="gen" ref="form" label-width="100px">
|
||||
<el-form-item
|
||||
:label="$t('generate.code.module.name')"
|
||||
prop="module"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('generate.code.module.verify'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Select v-model="gen.module" clearable :placeholder="$t('generate.code.module.placeholder')" api="modules" class="w-full" filterable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('generate.code.controller.name')"
|
||||
prop="controller"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('generate.code.controller.verify'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="gen.controller" clearable :placeholder="$t('generate.code.controller.placeholder')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('generate.code.model.name')" prop="model">
|
||||
<el-input v-model="gen.model" clearable :placeholder="$t('generate.code.model.placeholder')" />
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex">
|
||||
<el-form-item :label="$t('generate.code.paginate')" prop="paginate">
|
||||
<el-switch v-model="gen.paginate" inline-prompt :active-text="$t('system.yes')" :inactive-text="$t('system.no')" />
|
||||
</el-form-item>
|
||||
<el-form-item label-width="15px">
|
||||
<div class="text-sm text-gray-300">控制列表是否使用分页功能</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<Structure />
|
||||
<div class="w-full flex justify-center pt-5">
|
||||
<router-link to="/develop/schemas">
|
||||
<el-button>{{ $t('system.back') }}</el-button>
|
||||
</router-link>
|
||||
<el-button type="primary" @click="submitGenerate(form)" class="ml-5">{{ $t('system.finish') }}</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { watch, onMounted, reactive, ref } from 'vue'
|
||||
import { useGenerateStore } from './store'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import http from '/admin/support/http'
|
||||
import Structure from './structure.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const generateStore = useGenerateStore()
|
||||
const gen = reactive(generateStore.getCodeGen)
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const schemaId = router.currentRoute.value.params.schema
|
||||
|
||||
onMounted(() => {
|
||||
if (!generateStore.getSchemaId) {
|
||||
generateStore.setSchemaId(schemaId)
|
||||
getSchema()
|
||||
} else {
|
||||
if (schemaId !== generateStore.getSchemaId) {
|
||||
generateStore.setSchemaId(schemaId)
|
||||
generateStore.resetStructures()
|
||||
getSchema()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const getSchema = () => {
|
||||
http.get('schema/' + schemaId).then(r => {
|
||||
gen.module = r.data.data.module
|
||||
gen.schema = r.data.data.name
|
||||
|
||||
gen.model = r.data.data.name.replace(/\_(\w)/g, (value, letter) => {
|
||||
return letter.toUpperCase()
|
||||
})
|
||||
|
||||
generateStore.initStructures(r.data.data.columns)
|
||||
})
|
||||
}
|
||||
const form = ref<FormInstance>()
|
||||
const submitGenerate = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate(valid => {
|
||||
if (valid) {
|
||||
http.post('generate', generateStore.$state).then(r => {})
|
||||
//emits('next')
|
||||
//generateStore.$reset()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
112
modules/Develop/views/generate/components/store.ts
Normal file
112
modules/Develop/views/generate/components/store.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
/**
|
||||
* 表结构信息
|
||||
*/
|
||||
export interface Structure {
|
||||
field: string
|
||||
label: string
|
||||
form_component: string
|
||||
list: boolean
|
||||
form: boolean
|
||||
search: boolean
|
||||
search_op: string
|
||||
validates: string[]
|
||||
}
|
||||
|
||||
/**
|
||||
* CodeGen
|
||||
*/
|
||||
export interface CodeGen {
|
||||
module: string
|
||||
controller: string
|
||||
model: string
|
||||
paginate: true
|
||||
schema: string
|
||||
}
|
||||
|
||||
/**
|
||||
* generate
|
||||
*/
|
||||
interface generate {
|
||||
schemaId: number
|
||||
structures: Structure[]
|
||||
codeGen: CodeGen
|
||||
}
|
||||
|
||||
/**
|
||||
* useGenerateStore
|
||||
*/
|
||||
export const useGenerateStore = defineStore('generateStore', {
|
||||
state(): generate {
|
||||
return {
|
||||
// schema id
|
||||
schemaId: 0,
|
||||
// structures
|
||||
structures: [] as Structure[],
|
||||
// codeGen
|
||||
codeGen: Object.assign({
|
||||
module: '',
|
||||
controller: '',
|
||||
model: '',
|
||||
paginate: true,
|
||||
schema: '',
|
||||
}),
|
||||
}
|
||||
},
|
||||
|
||||
// store getters
|
||||
getters: {
|
||||
getSchemaId(): any {
|
||||
return this.schemaId
|
||||
},
|
||||
|
||||
getStructures(): Structure[] {
|
||||
return this.structures
|
||||
},
|
||||
|
||||
getCodeGen(): CodeGen {
|
||||
return this.codeGen
|
||||
},
|
||||
},
|
||||
|
||||
// store actions
|
||||
actions: {
|
||||
// set schema
|
||||
setSchemaId(schemaId: any): void {
|
||||
this.schemaId = schemaId
|
||||
},
|
||||
// reset
|
||||
resetStructures(): void {
|
||||
this.structures = []
|
||||
},
|
||||
// filter structures
|
||||
filterStructures(field: string) {
|
||||
this.structures = this.structures.filter((s: Structure) => {
|
||||
return !(s.field === field)
|
||||
})
|
||||
},
|
||||
|
||||
// init structure
|
||||
initStructures(fields: Array<any>): void {
|
||||
const unSupportFields = ['deleted_at', 'creator_id']
|
||||
|
||||
fields.forEach(field => {
|
||||
if (!unSupportFields.includes(field.name)) {
|
||||
this.structures.push(
|
||||
Object.assign({
|
||||
field: field.name,
|
||||
label: '',
|
||||
form_component: 'input',
|
||||
list: true,
|
||||
form: true,
|
||||
search: false,
|
||||
search_op: '',
|
||||
validates: [],
|
||||
}),
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
})
|
||||
99
modules/Develop/views/generate/components/structure.vue
Normal file
99
modules/Develop/views/generate/components/structure.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-table :data="structures">
|
||||
<el-table-column prop="field" :label="$t('generate.schema.structure.field_name.name')" width="100px" />
|
||||
<el-table-column prop="label" :label="$t('generate.schema.structure.form_label')" width="150px">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.label" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="label" :label="$t('generate.schema.structure.form_component')" width="110px">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.form_component" class="w-full" filterable>
|
||||
<el-option v-for="component in formComponents" :key="component" :label="component" :value="component" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="list" :label="$t('generate.schema.structure.list')">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.list" inline-prompt :active-text="$t('system.yes')" :inactive-text="$t('system.no')" width="45px" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="form" :label="$t('generate.schema.structure.form')">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.form" inline-prompt :active-text="$t('system.yes')" :inactive-text="$t('system.no')" width="45px" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="search" :label="$t('generate.schema.structure.search')">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.search" inline-prompt :active-text="$t('system.yes')" :inactive-text="$t('system.no')" width="45px" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="search_op" :label="$t('generate.schema.structure.search_op.name')" width="150px">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.search_op" :placeholder="$t('generate.schema.structure.search_op.placeholder')" class="w-full">
|
||||
<el-option v-for="op in operates" :key="op" :label="op" :value="op" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="validates" :label="$t('generate.schema.structure.rules.name')" width="250px">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.validates" :placeholder="$t('generate.schema.structure.rules.placeholder')" multiple filterable allow-create clearable class="w-full">
|
||||
<el-option v-for="validate in validates" :key="validate" :label="validate" :value="validate" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--<el-table-column prop="comment" label="注释" />-->
|
||||
<el-table-column prop="id" :label="$t('generate.schema.structure.operate')" width="120px">
|
||||
<template #default="scope">
|
||||
<el-button type="danger" :icon="Delete" @click="deleteField(scope.row.field)" size="small" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { useGenerateStore } from './store'
|
||||
import { Delete } from '@element-plus/icons-vue'
|
||||
|
||||
const generateStore = useGenerateStore()
|
||||
|
||||
const structures = computed(() => {
|
||||
return generateStore.getStructures
|
||||
})
|
||||
|
||||
const deleteField = (field: string) => {
|
||||
generateStore.filterStructures(field)
|
||||
}
|
||||
|
||||
const operates: string[] = ['=', '!=', '>', '>=', '<', '<=', 'like', 'RLike', 'LLike', 'in']
|
||||
|
||||
const validates: string[] = [
|
||||
'required',
|
||||
'integer',
|
||||
'numeric',
|
||||
'string',
|
||||
'timezone',
|
||||
'url',
|
||||
'uuid',
|
||||
'date',
|
||||
'alpha',
|
||||
'alpha_dash',
|
||||
'alpha_num',
|
||||
'boolean',
|
||||
'email',
|
||||
'image',
|
||||
'file',
|
||||
'ip',
|
||||
'ipv4',
|
||||
'ipv6',
|
||||
'mac_address',
|
||||
'json',
|
||||
'nullable',
|
||||
'present',
|
||||
'prohibited',
|
||||
]
|
||||
|
||||
const formComponents: string[] = ['cascader', 'date', 'datetime', 'input', 'input-number', 'radio', 'rate', 'select', 'tree', 'tree-select']
|
||||
</script>
|
||||
10
modules/Develop/views/generate/index.vue
Normal file
10
modules/Develop/views/generate/index.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<CodeGen />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
import CodeGen from './components/codeGen.vue'
|
||||
</script>
|
||||
Reference in New Issue
Block a user