first commit

modules/Develop/views/generate/components/codeGen.vue

@@ -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>

modules/Develop/views/generate/components/store.ts

@@ -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: [],
+            }),
+          )
+        }
+      })
+    },
+  },
+})

modules/Develop/views/generate/components/structure.vue

@@ -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>