0b2/catchAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:创建数据表字段，支持拖拽

Browse Source
This commit is contained in:
JaguarJack 2024-04-21 13:46:53 +08:00
parent 898ce1305d
commit d995a8ce0d
2 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
modules/Develop/views/schema/steps/structure.vue
View File

@ -1,27 +1,29 @@
<template> <template>
<div> <div>
<el-table :data="structures" class="draggable"> <VueDraggable v-model="structures" target=".el-table__body tbody" animation="150" @end="onEnd">
<el-table-column prop="field" :label="$t('generate.schema.structure.field_name.name')" /> <el-table :data="structures" class="draggable" :lazy="false">
<el-table-column prop="type" :label="$t('generate.schema.structure.type.name')"> <el-table-column prop="field" :label="$t('generate.schema.structure.field_name.name')" />
<template #default="scope"> <el-table-column prop="type" :label="$t('generate.schema.structure.type.name')">
<el-tag type="success">{{ scope.row.type }}</el-tag> <template #default="scope">
</template> <el-tag type="success">{{ scope.row.type }}</el-tag>
</el-table-column> </template>
<el-table-column prop="nullable" :label="$t('generate.schema.structure.nullable')" width="90px"> </el-table-column>
<template #default="scope"> <el-table-column prop="nullable" :label="$t('generate.schema.structure.nullable')" width="90px">
<el-tag v-if="scope.row.nullable">{{ $t('system.yes') }}</el-tag> <template #default="scope">
<el-tag v-else type="info">{{ $t('system.no') }}</el-tag> <el-tag v-if="scope.row.nullable">{{ $t('system.yes') }}</el-tag>
</template> <el-tag v-else type="info">{{ $t('system.no') }}</el-tag>
</el-table-column> </template>
<el-table-column prop="default" :label="$t('generate.schema.structure.default')" /> </el-table-column>
<!--<el-table-column prop="comment" label="注释" />--> <el-table-column prop="default" :label="$t('generate.schema.structure.default')" />
<el-table-column prop="id" :label="$t('generate.schema.structure.operate')" width="120px"> <!--<el-table-column prop="comment" label="注释" />-->
<template #default="scope"> <el-table-column prop="id" :label="$t('generate.schema.structure.operate')" width="120px">
<el-button type="primary" :icon="Edit" @click="updateField(scope.row.id)" size="small" /> <template #default="scope">
<el-button type="danger" :icon="Delete" @click="deleteField(scope.row.id)" size="small" /> <el-button type="primary" :icon="Edit" @click="updateField(scope.row.id)" size="small" />
</template> <el-button type="danger" :icon="Delete" @click="deleteField(scope.row.id)" size="small" />
</el-table-column> </template>
</el-table> </el-table-column>
</el-table>
</VueDraggable>
<div class="flex justify-end mt-4"> <div class="flex justify-end mt-4">
<el-button type="success" :icon="Plus" @click="addField">{{ $t('system.add') }}</el-button> <el-button type="success" :icon="Plus" @click="addField">{{ $t('system.add') }}</el-button>
@ -95,14 +97,14 @@ import type { FormInstance } from 'element-plus'
import Message from '/admin/support/message' import Message from '/admin/support/message'
import http from '/admin/support/http' import http from '/admin/support/http'
import { Code } from '/admin/enum/app' import { Code } from '/admin/enum/app'
import { VueDraggable } from 'vue-draggable-plus'
const schemaStore = useSchemaStore() const schemaStore = useSchemaStore()
const emits = defineEmits(['prev', 'next']) const emits = defineEmits(['prev', 'next'])
const visible = ref(false) const visible = ref(false)
const structures = computed(() => { // 初始化
return schemaStore.getStructures const structures = ref(schemaStore.getStructures)
})
const structure: Ref<Structure> = ref(schemaStore.initStructure()) const structure: Ref<Structure> = ref(schemaStore.initStructure())
// structure // structure
@ -149,7 +151,11 @@ const next = () => {
}) })
} }
} }
// 调整数据结构
const onEnd = () => {
console.log(structures.value)
schemaStore.setStructures(structures.value)
}
const types: string[] = [ const types: string[] = [
'id', 'id',
'smallIncrements', 'smallIncrements',

1
package.json
View File

@ -16,6 +16,7 @@
"pinia": "^2.1.7", "pinia": "^2.1.7",
"terser": "^5.29.2", "terser": "^5.29.2",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-draggable-plus": "^0.4.0",
"vue-i18n": "9", "vue-i18n": "9",
"vue-router": "4.3.0", "vue-router": "4.3.0",
"vuedraggable": "^2.24.3" "vuedraggable": "^2.24.3"