remove vue
This commit is contained in:
JaguarJack
@@ -1,287 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CatchForm :schema="form" @onSubmit="submit"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const form = {
|
||||
items: [
|
||||
{
|
||||
name: 'Grid_FhAuLh',
|
||||
props: {
|
||||
columns: 2
|
||||
},
|
||||
component: 'grid',
|
||||
children: [
|
||||
{
|
||||
name: 'Grid_qRvhpR',
|
||||
props: {
|
||||
columns: 1
|
||||
},
|
||||
component: 'grid',
|
||||
children: [
|
||||
{
|
||||
name: 'type',
|
||||
props: {
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: '目录'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '菜单'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '按钮'
|
||||
}
|
||||
],
|
||||
optionType: 'button'
|
||||
},
|
||||
label: '菜单类型',
|
||||
component: 'radio',
|
||||
class: 'mt-4',
|
||||
initialValue: 1
|
||||
},
|
||||
{
|
||||
name: 'permission_name',
|
||||
props: {
|
||||
clearable: true
|
||||
},
|
||||
label: '菜单名称',
|
||||
component: 'input',
|
||||
class: 'mt-4',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
name: 'module',
|
||||
props: {
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
label: '权限管理',
|
||||
value: 'permissions'
|
||||
},
|
||||
{
|
||||
label: '动态表单',
|
||||
value: 'test'
|
||||
},
|
||||
{
|
||||
label: 'Testss',
|
||||
value: 'tests'
|
||||
}
|
||||
]
|
||||
},
|
||||
label: '所属模块',
|
||||
component: 'select',
|
||||
class: 'mt-4',
|
||||
required: true,
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'route',
|
||||
props: {
|
||||
clearable: true
|
||||
},
|
||||
label: '路由Path',
|
||||
component: 'input',
|
||||
class: 'mt-4',
|
||||
required: true,
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'redirect',
|
||||
props: {
|
||||
clearable: true
|
||||
},
|
||||
label: '重定向',
|
||||
component: 'input',
|
||||
class: 'mt-4',
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'sort',
|
||||
props: {
|
||||
clearable: true,
|
||||
min: 1,
|
||||
max: 10000
|
||||
},
|
||||
label: '排序',
|
||||
component: 'input_number',
|
||||
class: 'mt-4',
|
||||
initialValue: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Grid',
|
||||
props: {
|
||||
columns: 1
|
||||
},
|
||||
component: 'grid',
|
||||
children: [
|
||||
{
|
||||
name: 'parent_id',
|
||||
props: {
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
id: 1,
|
||||
parent_id: 0,
|
||||
permission_name: '权限管理',
|
||||
children: [
|
||||
{
|
||||
id: 2,
|
||||
parent_id: 1,
|
||||
permission_name: '角色管理'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
parent_id: 1,
|
||||
permission_name: '菜单管理'
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
parent_id: 1,
|
||||
permission_name: '岗位管理'
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
parent_id: 1,
|
||||
permission_name: '部门管理'
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
parent_id: 1,
|
||||
permission_name: '创建菜单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
parent_id: 0,
|
||||
permission_name: '测试',
|
||||
children: [
|
||||
{
|
||||
id: 31,
|
||||
parent_id: 30,
|
||||
permission_name: '测试看看'
|
||||
},
|
||||
{
|
||||
id: 37,
|
||||
parent_id: 30,
|
||||
permission_name: '创建'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
label: 'permission_name',
|
||||
valueKey: 'id',
|
||||
value: 'id',
|
||||
'show-all-levels': false,
|
||||
checkStrictly: true,
|
||||
class: 'w-full'
|
||||
},
|
||||
label: '上级菜单',
|
||||
component: 'cascader',
|
||||
class: 'mt-4'
|
||||
},
|
||||
{
|
||||
name: 'permission_mark',
|
||||
props: {
|
||||
clearable: true,
|
||||
api: 'options/controllers',
|
||||
query: {
|
||||
module: '{{ $values.module }}'
|
||||
}
|
||||
},
|
||||
label: '权限标识',
|
||||
component: '{{$values.type == 3 ? "input" : "select"}}',
|
||||
class: 'mt-4',
|
||||
hidden: '{{$values.type == 1}}',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
name: 'icon',
|
||||
props: {
|
||||
clearable: true
|
||||
},
|
||||
label: '图标',
|
||||
component: 'icon_select',
|
||||
class: 'mt-4',
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'component',
|
||||
props: {
|
||||
clearable: true,
|
||||
"allow-create": true
|
||||
},
|
||||
label: '所属组件',
|
||||
component: 'select',
|
||||
class: 'mt-4',
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'hidden',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: '是'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '否'
|
||||
}
|
||||
]
|
||||
},
|
||||
label: '是否隐藏',
|
||||
component: 'radio',
|
||||
class: 'mt-4',
|
||||
initialValue: 2,
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'keepalive',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: '是'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '否'
|
||||
}
|
||||
]
|
||||
},
|
||||
label: '是否缓存',
|
||||
component: 'radio',
|
||||
class: 'mt-4',
|
||||
initialValue: 2,
|
||||
hidden: '{{$values.type == 3}}'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// @ts-nocheck
|
||||
/**import { useCreate } from '@/form/composables/useCreate'
|
||||
const props = defineProps({
|
||||
primary: [String, Number],
|
||||
api: String,
|
||||
})
|
||||
|
||||
|
||||
const { form } = useCreate(props.api, props.primary)
|
||||
*/
|
||||
const submit = (formData) => {
|
||||
console.log(formData)
|
||||
}
|
||||
</script>
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<catch-table
|
||||
:columns="[
|
||||
{
|
||||
label: '角色名称',
|
||||
prop: 'role_name'
|
||||
},
|
||||
{
|
||||
label: '角色标识',
|
||||
prop: 'description'
|
||||
},
|
||||
{
|
||||
label: '角色描述',
|
||||
prop: 'role_name'
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'created_at'
|
||||
},
|
||||
{
|
||||
type: 'operate',
|
||||
label: '操作',
|
||||
width: 200
|
||||
}
|
||||
]"
|
||||
:api="api"
|
||||
:search-form="[
|
||||
{
|
||||
type: 'input',
|
||||
label: '角色名称',
|
||||
name: 'role_name'
|
||||
}
|
||||
]"
|
||||
row-key="id"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #dialog="row">
|
||||
<Create :primary="row?.id" :api="api"/>
|
||||
</template>
|
||||
</catch-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// @ts-nocheck
|
||||
// import Create from './form/create.vue'
|
||||
import Create from './create.vue'
|
||||
|
||||
const api = 'permissions/roles'
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,109 +0,0 @@
|
||||
<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>
|
||||
@@ -1,112 +0,0 @@
|
||||
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: [],
|
||||
}),
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -1,113 +0,0 @@
|
||||
<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(() => {
|
||||
generateStore.getStructures.forEach(struct => {
|
||||
if (struct.field === 'id' || struct.field === 'created_at' || struct.field === 'updated_at') {
|
||||
struct.form = false
|
||||
}
|
||||
|
||||
if (struct.field === 'sort') {
|
||||
struct.form_component = 'input-number'
|
||||
}
|
||||
|
||||
if (struct.field === 'status') {
|
||||
struct.form_component = 'select'
|
||||
}
|
||||
})
|
||||
|
||||
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', 'textarea', 'upload']
|
||||
</script>
|
||||
@@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<CodeGen />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
import CodeGen from './components/codeGen.vue'
|
||||
</script>
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-4">
|
||||
<el-form-item
|
||||
:label="$t('module.form.name.title')"
|
||||
prop="title"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('module.form.name.required'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="formData.title" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.form.path.title')"
|
||||
prop="path"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('module.form.path.required'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="formData.path" :disabled="!!primary" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.form.keywords.title')" prop="keywords">
|
||||
<el-input v-model="formData.keywords" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.form.desc.title')" prop="desc">
|
||||
<el-input v-model="formData.description" type="textarea" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('module.form.dirs.title')" prop="dirs" v-if="!primary">
|
||||
<el-checkbox v-model="formData['dirs']['controllers']" label="Controllers" size="large" />
|
||||
<el-checkbox v-model="formData['dirs']['models']" label="Models" size="large" />
|
||||
<el-checkbox v-model="formData['dirs']['database']" label="Database" size="large" />
|
||||
<el-checkbox v-model="formData['dirs']['requests']" label="Requests" size="large" />
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCreate } from '/admin/composables/curd/useCreate'
|
||||
import { useShow } from '/admin/composables/curd/useShow'
|
||||
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
primary: String | Number,
|
||||
api: String,
|
||||
})
|
||||
|
||||
const { formData, form, loading, submitForm, close } = useCreate(
|
||||
props.api,
|
||||
props.primary,
|
||||
Object.assign({
|
||||
title: '',
|
||||
path: '',
|
||||
keywords: '',
|
||||
description: '',
|
||||
dirs: {
|
||||
controllers: true,
|
||||
models: true,
|
||||
database: true,
|
||||
requests: false,
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
if (props.primary) {
|
||||
useShow(props.api, props.primary, formData)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
close(() => emit('close'))
|
||||
})
|
||||
</script>
|
||||
@@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="模块名称">
|
||||
<el-input v-model="query.title" name="title" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
<div class="table-default">
|
||||
<Operate :show="open">
|
||||
<template v-slot:operate>
|
||||
<!-- header 插槽的内容放这里 -->
|
||||
<el-button type="success" class="float-right" @click="installVisible = true"><Icon name="cog-6-tooth" class="mr-1 w-4 h-4" /> 安装</el-button>
|
||||
</template>
|
||||
</Operate>
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading">
|
||||
<el-table-column prop="title" label="模块名称" width="180" />
|
||||
<el-table-column prop="path" label="模块目录" width="180" />
|
||||
<el-table-column prop="version" label="模块版本">
|
||||
<template #default="scope">
|
||||
<el-tag type="warning">{{ scope.row.version }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="enable" label="模块状态">
|
||||
<template #default="scope">
|
||||
<Status v-model="scope.row.enable" :id="scope.row.name" :api="api" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="300">
|
||||
<template #default="scope">
|
||||
<Update @click="open(scope.row.name)" />
|
||||
<Destroy @click="destroy(api, scope.row.name)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<Dialog v-model="visible" :title="title" destroy-on-close>
|
||||
<Create @close="close(reset)" :primary="id" :api="api" />
|
||||
</Dialog>
|
||||
|
||||
<!-- 安装 -->
|
||||
<Dialog v-model="installVisible" title="安装模块" destroy-on-close>
|
||||
<Install @close="closeInstall" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import Create from './create.vue'
|
||||
import Install from './install.vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
import { useDestroy } from '/admin/composables/curd/useDestroy'
|
||||
import { useOpen } from '/admin/composables/curd/useOpen'
|
||||
|
||||
const api = 'module'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api)
|
||||
const { destroy, deleted } = useDestroy('确认删除吗? ⚠️将会删除模块下所有文件')
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
const installVisible = ref<boolean>(false)
|
||||
const closeInstall = () => {
|
||||
installVisible.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
|
||||
deleted(reset)
|
||||
})
|
||||
</script>
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-4">
|
||||
<el-form-item label="安装方式" prop="type">
|
||||
<el-radio-group v-model="formData.type">
|
||||
<el-radio-button
|
||||
v-for="item in [
|
||||
{ label: '普通安装', value: 1 },
|
||||
{ label: 'ZIP 安装', value: 2 },
|
||||
]"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
name="type"
|
||||
>{{ item.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="模块名称"
|
||||
prop="title"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '模块名称必须填写',
|
||||
},
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
if (! /^[A-Za-z]+$/.test(value)) {
|
||||
callback('模块名称只允许大小字母组合')
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-select v-model="formData.title" placeholder="选择安装模块">
|
||||
<el-option v-for="item in modules" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传 ZIP" prop="file" v-if="formData.type === 2">
|
||||
<Upload action="module/upload" :limit="1" accept=".zip" :on-success="moduleUpload">
|
||||
<template #trigger>
|
||||
<el-button type="primary">选择模块文件</el-button>
|
||||
</template>
|
||||
</Upload>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<el-button type="primary" @click="submitForm(form)">安装</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCreate } from '/admin/composables/curd/useCreate'
|
||||
|
||||
import { onMounted } from 'vue'
|
||||
import { Code } from '/admin/enum/app'
|
||||
import Message from '/admin/support/message'
|
||||
|
||||
const { formData, form, loading, submitForm, close } = useCreate('module/install')
|
||||
formData.value.type = 1
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
onMounted(() => {
|
||||
close(() => emit('close'))
|
||||
})
|
||||
|
||||
const moduleUpload = (response, uploadFile) => {
|
||||
if (response.code === Code.SUCCESS) {
|
||||
formData.value.file = response.data
|
||||
} else {
|
||||
Message.error(response.message)
|
||||
}
|
||||
}
|
||||
|
||||
const modules = [
|
||||
{
|
||||
label: '权限管理',
|
||||
value: 'permissions',
|
||||
},
|
||||
{
|
||||
label: '内容管理',
|
||||
value: 'cms',
|
||||
},
|
||||
{
|
||||
label: '系统管理',
|
||||
value: 'system',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
@@ -1,38 +0,0 @@
|
||||
import { RouteRecordRaw } from 'vue-router'
|
||||
|
||||
// @ts-ignore
|
||||
const router: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/develop',
|
||||
component: () => import('/admin/layout/index.vue'),
|
||||
meta: { title: '开发工具', icon: 'wrench-screwdriver' },
|
||||
children: [
|
||||
{
|
||||
path: 'modules',
|
||||
name: 'modules',
|
||||
meta: { title: '模块管理', icon: 'queue-list' },
|
||||
component: () => import('./module/index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'schemas',
|
||||
name: 'schemas',
|
||||
meta: { title: 'Schemas', icon: 'list-bullet' },
|
||||
component: () => import('./schema/index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'generate/:schema',
|
||||
name: 'generate',
|
||||
meta: { title: '代码生成', hidden: true, active_menu: '/develop/schemas' },
|
||||
component: () => import('./generate/index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'dymaic',
|
||||
name: 'dymaic',
|
||||
meta: { title: '动态表格' },
|
||||
component: () => import('./dymaic/index.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default router
|
||||
@@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Schema v-if="active === 1" @next="next" @prev="prev" />
|
||||
<Structure v-if="active === 2" @next="next" @prev="prev" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import Schema from './steps/schema.vue'
|
||||
import Structure from './steps/structure.vue'
|
||||
import { useSchemaStore } from './store'
|
||||
|
||||
const schemaStore = useSchemaStore()
|
||||
|
||||
const active = ref(1)
|
||||
const next = () => {
|
||||
if (active.value++ >= 2) {
|
||||
active.value = 2
|
||||
}
|
||||
}
|
||||
const prev = () => {
|
||||
if (active.value-- === 1) {
|
||||
active.value = 1
|
||||
}
|
||||
}
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
watch(
|
||||
() => schemaStore.getFinished,
|
||||
function (value) {
|
||||
if (value) {
|
||||
emit('close')
|
||||
}
|
||||
},
|
||||
)
|
||||
</script>
|
||||
@@ -1,83 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="模块名称">
|
||||
<el-input v-model="query.module" name="module" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="Schema 名称">
|
||||
<el-input v-model="query.name" name="name" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
<div class="table-default">
|
||||
<Operate :show="open" />
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading">
|
||||
<el-table-column prop="module" label="所属模块" />
|
||||
<el-table-column prop="name" label="schema 名称" />
|
||||
<el-table-column prop="columns" label="字段">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="success" @click="view(scope.row.id)"><Icon name="eye" class="w-3 mr-1" /> 查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="is_soft_delete" label="?软删">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.is_soft_delete">是</el-tag>
|
||||
<el-tag type="danger" v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" />
|
||||
<el-table-column label="操作" width="250">
|
||||
<template #default="scope">
|
||||
<router-link :to="'/develop/generate/' + scope.row.id">
|
||||
<el-button type="warning" size="small"><Icon name="wrench-screwdriver" class="w-3 mr-1" /> 生成代码</el-button>
|
||||
</router-link>
|
||||
<Destroy @click="destroy(api, scope.row.id)" class="ml-2" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Paginate />
|
||||
</div>
|
||||
|
||||
<!-- schema 创建 -->
|
||||
<Dialog v-model="visible" :title="title" width="650px" destroy-on-close>
|
||||
<Create @close="close(reset)" :api="api" />
|
||||
</Dialog>
|
||||
|
||||
<!-- schema 表结构 -->
|
||||
<Dialog v-model="schemaVisible" title="Schema 结构" width="650px" destroy-on-close>
|
||||
<Show :id="id" :api="api" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import Create from './create.vue'
|
||||
import Show from './show.vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
import { useDestroy } from '/admin/composables/curd/useDestroy'
|
||||
import { useOpen } from '/admin/composables/curd/useOpen'
|
||||
|
||||
const schemaVisible = ref<boolean>(false)
|
||||
|
||||
const api = 'schema'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api)
|
||||
const { destroy, deleted } = useDestroy('确认删除吗? 删除后数据表将会保留，如需删除相关表，请手动进行删除!')
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
|
||||
const view = primaryId => {
|
||||
schemaVisible.value = true
|
||||
|
||||
id.value = primaryId
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
|
||||
deleted(reset)
|
||||
})
|
||||
</script>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<el-table :data="data?.columns" class="mt-3" v-loading="loading">
|
||||
<el-table-column prop="name" label="字段名称" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="nullable" label="nullable">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.nullable">是</el-tag>
|
||||
<el-tag type="danger" v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="default" label="默认值">
|
||||
<template #default="scope"> </template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="comment" label="注释" />
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useShow } from '/admin/composables/curd/useShow'
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
// const data = ref<Array<object>>()
|
||||
const { data, loading } = useShow('schema', props.id)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<div class="w-full sm:w-[90%] mx-auto">
|
||||
<el-form :model="schema" ref="form" label-width="80px">
|
||||
<el-form-item
|
||||
:label="$t('generate.code.module.name')"
|
||||
prop="module"
|
||||
:rules="[
|
||||
{
|
||||
// required: true,
|
||||
message: $t('generate.code.module.verify'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Select v-model="schema.module" clearable :placeholder="$t('generate.code.module.placeholder')" api="modules" class="w-full" filterable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('generate.schema.name')"
|
||||
prop="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('generate.schema.name_verify'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="schema.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('generate.schema.engine.name')"
|
||||
prop="engine"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('generate.schema.engine.verify'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-select class="w-full" v-model="schema.engine" :placeholder="$t('generate.schema.engine.placeholder')" clearable>
|
||||
<el-option v-for="engine in engines" :key="engine.value" :label="engine.label" :value="engine.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('generate.schema.default_field.name')">
|
||||
<el-checkbox v-model="schema.created_at" :label="$t('generate.schema.default_field.created_at')" size="large" />
|
||||
<el-checkbox v-model="schema.updated_at" :label="$t('generate.schema.default_field.updated_at')" size="large" />
|
||||
<el-checkbox v-model="schema.creator_id" :label="$t('generate.schema.default_field.creator')" size="large" />
|
||||
<el-checkbox v-model="schema.deleted_at" :label="$t('generate.schema.default_field.delete_at')" size="large" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('generate.schema.comment.name')"
|
||||
prop="comment"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('generate.schema.comment.verify'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="schema.comment" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="w-full sm:w-96 justify-between mx-auto pl-24 mt-4">
|
||||
<el-button class="mt-5" @click="$emit('prev')">{{ $t('system.prev') }}</el-button>
|
||||
<el-button class="mt-5" type="primary" @click="submitCreateTable(form)">{{ $t('system.next') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, computed, ref, unref } from 'vue'
|
||||
import { useSchemaStore } from '../store'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
||||
const schemaStore = useSchemaStore()
|
||||
schemaStore.start()
|
||||
|
||||
const emits = defineEmits(['prev', 'next'])
|
||||
|
||||
const schema = ref(schemaStore.getSchema)
|
||||
const form = ref<FormInstance>()
|
||||
const submitCreateTable = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate(valid => {
|
||||
if (valid) {
|
||||
emits('next')
|
||||
schemaStore.setSchema(unref(schema))
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
const engines = computed(() => {
|
||||
return [
|
||||
{
|
||||
value: 'InnoDB',
|
||||
label: 'InnoDB',
|
||||
},
|
||||
{
|
||||
value: 'MyISAM',
|
||||
label: 'MyISAM',
|
||||
},
|
||||
{
|
||||
value: 'Memory',
|
||||
label: 'Memory',
|
||||
},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
@@ -1,217 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<VueDraggable v-model="structures" target=".el-table__body tbody" animation="150" @end="onEnd">
|
||||
<el-table :data="structures" class="draggable" :lazy="false">
|
||||
<el-table-column prop="field" :label="$t('generate.schema.structure.field_name.name')" />
|
||||
<el-table-column prop="type" :label="$t('generate.schema.structure.type.name')">
|
||||
<template #default="scope">
|
||||
<el-tag type="success">{{ scope.row.type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="nullable" :label="$t('generate.schema.structure.nullable')" width="90px">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.nullable">{{ $t('system.yes') }}</el-tag>
|
||||
<el-tag v-else type="info">{{ $t('system.no') }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="default" :label="$t('generate.schema.structure.default')" />
|
||||
<!--<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="primary" :icon="Edit" @click="updateField(scope.row.id)" size="small" />
|
||||
<el-button type="danger" :icon="Delete" @click="deleteField(scope.row.id)" size="small" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</VueDraggable>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<el-button type="success" :icon="Plus" @click="addField">{{ $t('system.add') }}</el-button>
|
||||
</div>
|
||||
|
||||
<div class="w-full sm:w-96 justify-between mx-auto pl-24 mt-2">
|
||||
<el-button class="mt-5" @click="emits('prev')">{{ $t('system.prev') }}</el-button>
|
||||
<el-button class="mt-5" type="primary" @click="next">{{ $t('system.confirm') }}</el-button>
|
||||
</div>
|
||||
|
||||
<Dialog v-model="visible" :title="$t('system.add')">
|
||||
<el-form :model="structure" status-icon label-width="120px" ref="form">
|
||||
<el-form-item
|
||||
:label="$t('generate.schema.structure.field_name.name')"
|
||||
prop="field"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('generate.schema.structure.field_name.verify'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="structure.field" />
|
||||
</el-form-item>
|
||||
<div class="flex justify-between">
|
||||
<el-form-item
|
||||
class="w-full"
|
||||
:label="$t('generate.schema.structure.type.name')"
|
||||
prop="type"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('generate.schema.structure.type.verify'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-select v-model="structure.type" :placeholder="$t('generate.schema.structure.type.placeholder')" filterable class="w-full">
|
||||
<el-option v-for="item in types" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item :label="$t('generate.schema.structure.length')" prop="length">
|
||||
<el-input-number v-model="structure.length" :min="0" />
|
||||
</el-form-item>
|
||||
<div class="flex justify-between">
|
||||
<el-form-item label="nullable" prop="nullable">
|
||||
<el-switch v-model="structure.nullable" inline-prompt :active-text="$t('system.yes')" :inactive-text="$t('system.no')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('generate.schema.structure.default')" prop="default" v-if="!structure.nullable">
|
||||
<el-input v-model="structure.default" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item :label="$t('generate.schema.structure.unique')" prop="unique">
|
||||
<el-switch v-model="structure.unique" inline-prompt :active-text="$t('system.yes')" :inactive-text="$t('system.no')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('generate.schema.structure.comment')" prop="comment">
|
||||
<el-input v-model="structure.comment" text />
|
||||
</el-form-item>
|
||||
<div class="flex justify-end">
|
||||
<el-button type="primary" @click="submitStructure(form)">{{ $t('system.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Ref, ref } from 'vue'
|
||||
import { useSchemaStore, Structure } from '../store'
|
||||
import { Delete, Plus, Edit } from '@element-plus/icons-vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import Message from '/admin/support/message'
|
||||
import http from '/admin/support/http'
|
||||
import { Code } from '/admin/enum/app'
|
||||
import { VueDraggable } from 'vue-draggable-plus'
|
||||
|
||||
const schemaStore = useSchemaStore()
|
||||
const emits = defineEmits(['prev', 'next'])
|
||||
const visible = ref(false)
|
||||
|
||||
// 初始化
|
||||
const structures = ref(schemaStore.getStructures)
|
||||
|
||||
const structure: Ref<Structure> = ref(schemaStore.initStructure())
|
||||
// structure
|
||||
const addField = async () => {
|
||||
await form.value?.clearValidate()
|
||||
visible.value = true
|
||||
}
|
||||
const updateField = (id: number) => {
|
||||
visible.value = true
|
||||
schemaStore.getStructures.forEach(s => {
|
||||
if (s.id === id) {
|
||||
structure.value = s
|
||||
}
|
||||
})
|
||||
|
||||
schemaStore.setStructures(structures.value)
|
||||
}
|
||||
|
||||
const form = ref<FormInstance>()
|
||||
const submitStructure = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate(valid => {
|
||||
if (valid) {
|
||||
visible.value = !visible.value
|
||||
schemaStore.addStructure(structure.value)
|
||||
structure.value = schemaStore.initStructure()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const deleteField = (id: number) => {
|
||||
structures.value = structures.value.filter((s: Structure) => {
|
||||
return !(s.id === id)
|
||||
})
|
||||
schemaStore.setStructures(structures.value)
|
||||
}
|
||||
|
||||
const next = () => {
|
||||
if (schemaStore.getStructures.length < 1) {
|
||||
Message.error('请先填写表结构数据')
|
||||
} else {
|
||||
http.post('schema', schemaStore.$state).then(r => {
|
||||
if (r.data.code == Code.SUCCESS) {
|
||||
Message.success('创建成功')
|
||||
schemaStore.finished()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// 调整数据结构
|
||||
const onEnd = () => {
|
||||
schemaStore.setStructures(structures.value)
|
||||
}
|
||||
const types: string[] = [
|
||||
'id',
|
||||
'smallIncrements',
|
||||
'mediumIncrements',
|
||||
'increments',
|
||||
'smallInteger',
|
||||
'integer',
|
||||
'bigIncrements',
|
||||
'bigInteger',
|
||||
'mediumInteger',
|
||||
'unsignedInteger',
|
||||
'unsignedMediumInteger',
|
||||
'unsignedSmallInteger',
|
||||
'unsignedTinyInteger',
|
||||
'string',
|
||||
'text',
|
||||
'binary',
|
||||
'boolean',
|
||||
'char',
|
||||
'dateTimeTz',
|
||||
'dateTime',
|
||||
'date',
|
||||
'decimal',
|
||||
'double',
|
||||
'float',
|
||||
'geometryCollection',
|
||||
'geometry',
|
||||
'ipAddress',
|
||||
'json',
|
||||
'jsonb',
|
||||
'lineString',
|
||||
'longText',
|
||||
'macAddress',
|
||||
'mediumText',
|
||||
'multiLineString',
|
||||
'multiPoint',
|
||||
'multiPolygon',
|
||||
'nullableMorphs',
|
||||
'nullableTimestamps',
|
||||
'nullableUuidMorphs',
|
||||
'point',
|
||||
'polygon',
|
||||
'timeTz',
|
||||
'time',
|
||||
'timestampTz',
|
||||
'timestamp',
|
||||
'timestampsTz',
|
||||
'timestamps',
|
||||
'tinyIncrements',
|
||||
'tinyInteger',
|
||||
'tinyText',
|
||||
'uuid',
|
||||
'year',
|
||||
]
|
||||
</script>
|
||||
@@ -1,146 +0,0 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
/**
|
||||
* 表信息
|
||||
*/
|
||||
export interface Schema {
|
||||
module: string
|
||||
name: string
|
||||
comment: string
|
||||
engine: string
|
||||
charset: string
|
||||
collaction: string
|
||||
created_at: boolean
|
||||
creator_id: boolean
|
||||
updated_at: boolean
|
||||
deleted_at: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 表结构信息
|
||||
*/
|
||||
export interface Structure {
|
||||
id: number
|
||||
field: string
|
||||
length: number
|
||||
type: string
|
||||
nullable: boolean
|
||||
unique: boolean
|
||||
default: number | string
|
||||
comment: string
|
||||
}
|
||||
|
||||
/**
|
||||
* generate
|
||||
*/
|
||||
interface CreateSchema {
|
||||
schema: Schema
|
||||
structures: Structure[]
|
||||
is_finished: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* useSchemaStore
|
||||
*/
|
||||
export const useSchemaStore = defineStore('schemaStore', {
|
||||
state(): CreateSchema {
|
||||
return {
|
||||
// schema
|
||||
schema: Object.assign({
|
||||
module: '',
|
||||
name: '',
|
||||
comment: '',
|
||||
engine: 'InnoDB',
|
||||
charset: 'utf8mb4',
|
||||
collection: 'utf8mb4_unicode_ci',
|
||||
created_at: true,
|
||||
creator_id: true,
|
||||
updated_at: true,
|
||||
deleted_at: true,
|
||||
}),
|
||||
// structures
|
||||
structures: [] as Structure[],
|
||||
|
||||
// is finished
|
||||
is_finished: false,
|
||||
}
|
||||
},
|
||||
|
||||
// store getters
|
||||
getters: {
|
||||
getSchema(): Schema {
|
||||
return this.schema
|
||||
},
|
||||
|
||||
getStructures(): Structure[] {
|
||||
return this.structures
|
||||
},
|
||||
|
||||
getFinished(): boolean {
|
||||
return this.is_finished
|
||||
},
|
||||
},
|
||||
|
||||
// store actions
|
||||
actions: {
|
||||
// set schema
|
||||
setSchema(schema: Schema): void {
|
||||
this.schema = schema
|
||||
},
|
||||
|
||||
setStructures(structures: Array<Structure>): void {
|
||||
this.structures = structures
|
||||
},
|
||||
// add structure
|
||||
addStructure(structure: Structure): void {
|
||||
if (structure.id) {
|
||||
this.structures = this.structures.filter((s: Structure) => {
|
||||
if (s.id === structure.id) {
|
||||
s = structure
|
||||
}
|
||||
return s
|
||||
})
|
||||
} else {
|
||||
structure.id = this.structures.length + 1
|
||||
this.structures.push(structure)
|
||||
}
|
||||
},
|
||||
|
||||
// filter structures
|
||||
filterStructures(id: number) {
|
||||
this.structures = this.structures.filter((s: Structure) => {
|
||||
return !(s.id === id)
|
||||
})
|
||||
},
|
||||
|
||||
// init structure
|
||||
initStructure(): Structure {
|
||||
return Object.assign({
|
||||
id: 0,
|
||||
field: '',
|
||||
label: '',
|
||||
type: '',
|
||||
length: 0,
|
||||
nullable: false,
|
||||
unique: false,
|
||||
default: '',
|
||||
comment: '',
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* finished
|
||||
*/
|
||||
finished(): void {
|
||||
this.$reset()
|
||||
this.is_finished = true
|
||||
},
|
||||
|
||||
/**
|
||||
* unfinished
|
||||
*/
|
||||
start(): void {
|
||||
this.is_finished = false
|
||||
},
|
||||
},
|
||||
})
|
||||
BIN
modules/Permissions/views/.DS_Store
vendored
BIN
modules/Permissions/views/.DS_Store
vendored
Binary file not shown.
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-4">
|
||||
<el-form-item label="父级部门" prop="parent_id">
|
||||
<el-cascader :options="departments" name="parent_id" v-model="formData.parent_id" clearable :props="{ value: 'id', label: 'department_name', checkStrictly: true }" class="w-full" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称" prop="department_name" :rules="[{ required: true, message: '部门名称必须填写' }]">
|
||||
<el-input v-model="formData.department_name" name="department_name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门联系人" prop="principal">
|
||||
<el-input v-model="formData.principal" name="principal" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input v-model="formData.mobile" name="mobile" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="formData.email" name="email" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" name="sort" :min="1" />
|
||||
</el-form-item>
|
||||
<div class="flex justify-end">
|
||||
<el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCreate } from '/admin/composables/curd/useCreate'
|
||||
import { useShow } from '/admin/composables/curd/useShow'
|
||||
import http from '/admin/support/http'
|
||||
import { onMounted, ref, unref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
primary: String | Number,
|
||||
api: String,
|
||||
})
|
||||
|
||||
const { formData, form, loading, submitForm, close, beforeCreate, beforeUpdate } = useCreate(props.api, props.primary)
|
||||
formData.value.sort = 1
|
||||
|
||||
beforeCreate.value = () => {
|
||||
formData.value.parent_id = getParent(formData.value.parent_id)
|
||||
}
|
||||
|
||||
beforeUpdate.value = () => {
|
||||
formData.value.parent_id = getParent(formData.value.parent_id)
|
||||
}
|
||||
|
||||
const getParent = (parentId: any) => {
|
||||
return typeof parentId === 'undefined' ? 0 : parentId[parentId.length - 1]
|
||||
}
|
||||
|
||||
if (props.primary) {
|
||||
const { afterShow } = useShow(props.api, props.primary, formData)
|
||||
afterShow.value = formData => {
|
||||
const data = unref(formData)
|
||||
data.parent_id = data.parent_id ? [data.parent_id] : 0
|
||||
|
||||
if (!data.data_range) {
|
||||
data.data_range = null
|
||||
}
|
||||
|
||||
formData.value = data
|
||||
}
|
||||
}
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const departments = ref()
|
||||
onMounted(() => {
|
||||
http.get(props.api).then(r => {
|
||||
departments.value = r.data.data
|
||||
})
|
||||
|
||||
close(() => {
|
||||
emit('close')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="部门名称" prop="department_name">
|
||||
<el-input v-model="query.department_name" name="department_name" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
<div class="table-default">
|
||||
<Operate :show="open" />
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading" row-key="id" default-expand-all :tree-props="{ children: 'children' }">
|
||||
<el-table-column prop="department_name" label="部门名称" />
|
||||
<el-table-column prop="sort" label="排序" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<Status v-model="scope.row.status" :id="scope.row.id" :api="api" @refresh="search" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<Update @click="open(scope.row.id)" />
|
||||
<Destroy @click="destroy(api, scope.row.id)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<Dialog v-model="visible" :title="title" destroy-on-close>
|
||||
<Create @close="close(reset)" :primary="id" :api="api" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted } from 'vue'
|
||||
import Create from './form/create.vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
import { useDestroy } from '/admin/composables/curd/useDestroy'
|
||||
import { useOpen } from '/admin/composables/curd/useOpen'
|
||||
|
||||
const api = 'permissions/departments'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api, false)
|
||||
const { destroy, deleted } = useDestroy()
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
|
||||
deleted(reset)
|
||||
})
|
||||
</script>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-4">
|
||||
<el-form-item label="岗位名称" prop="job_name" :rules="[{ required: true, message: '岗位名称必须填写' }]">
|
||||
<el-input v-model="formData.job_name" name="job_name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位编码" prop="coding">
|
||||
<el-input v-model="formData.coding" name="coding" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio v-for="item in options" :key="item.value" :value="item.value" name="status">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" name="sort" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位描述" prop="description">
|
||||
<el-input v-model="formData.description" name="description" clearable type="textarea" />
|
||||
</el-form-item>
|
||||
<div class="flex justify-end">
|
||||
<el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCreate } from '/admin/composables/curd/useCreate'
|
||||
import { useShow } from '/admin/composables/curd/useShow'
|
||||
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
primary: [Number, String],
|
||||
api: String,
|
||||
})
|
||||
|
||||
const { formData, form, loading, submitForm, close } = useCreate(props.api, props.primary)
|
||||
|
||||
formData.value.status = 1
|
||||
formData.value.sort = 1
|
||||
|
||||
if (props.primary) {
|
||||
useShow(props.api, props.primary, formData)
|
||||
}
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
onMounted(() => {
|
||||
close(() => emit('close'))
|
||||
})
|
||||
|
||||
const options = [
|
||||
{ label: '正常', value: 1 },
|
||||
{ label: '禁用', value: 2 },
|
||||
]
|
||||
</script>
|
||||
@@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="岗位名称" prop="job_name">
|
||||
<el-input v-model="query.job_name" name="job_name" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
<div class="table-default">
|
||||
<Operate :show="open" />
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading">
|
||||
<el-table-column prop="job_name" label="岗位名称" />
|
||||
<el-table-column prop="coding" label="岗位编码" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<Status v-model="scope.row.status" :id="scope.row.id" :api="api" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" />
|
||||
<el-table-column prop="description" label="岗位描述" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<Update @click="open(scope.row.id)" />
|
||||
<Destroy @click="destroy(api, scope.row.id)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Paginate />
|
||||
</div>
|
||||
|
||||
<Dialog v-model="visible" :title="title" destroy-on-close>
|
||||
<Create @close="close(reset)" :primary="id" :api="api" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted } from 'vue'
|
||||
import Create from './form/create.vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
import { useDestroy } from '/admin/composables/curd/useDestroy'
|
||||
import { useOpen } from '/admin/composables/curd/useOpen'
|
||||
|
||||
const api = 'permissions/jobs'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api)
|
||||
const { destroy, deleted } = useDestroy()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
|
||||
deleted(reset)
|
||||
})
|
||||
</script>
|
||||
@@ -1,212 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="85px" ref="form" v-loading="loading" class="pr-4">
|
||||
<div class="flex flex-row justify-between">
|
||||
<div>
|
||||
<el-form-item label="菜单类型" prop="type">
|
||||
<el-radio-group v-model="formData.type">
|
||||
<el-radio-button
|
||||
v-for="item in [
|
||||
{ label: '目录', value: 1 },
|
||||
{ label: '菜单', value: 2 },
|
||||
{ label: '按钮', value: 3 },
|
||||
]"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
name="type"
|
||||
>{{ item.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="permission_name" :rules="[{ required: true, message: '菜单名称必须填写' }]">
|
||||
<el-input v-model="formData.permission_name" name="permission_name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属模块" prop="module" :rules="[{ required: true, message: '所属模块必须填写' }]" v-if="!isAction">
|
||||
<Select v-model="formData.module" api="modules" allow-create @clear="clearModule" />
|
||||
</el-form-item>
|
||||
<el-form-item label="路由Path" prop="route" :rules="[{ required: true, message: '路由Path必须填写' }]" v-if="!isAction">
|
||||
<el-input v-model="formData.route" name="route" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="Redirect" prop="redirect" v-if="!isAction">
|
||||
<el-input v-model="formData.redirect" name="redirect" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" name="sort" :min="1" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="父级菜单" prop="parent_id">
|
||||
<el-cascader :options="permissions" name="parent_id" v-model="formData.parent_id" clearable :props="{ value: 'id', label: 'permission_name', checkStrictly: true }" class="w-full" />
|
||||
</el-form-item>
|
||||
<el-form-item label="权限标识" prop="permission_mark" :rules="[{ required: true, message: '权限标识必须填写' }]" v-if="!isTop">
|
||||
<el-input v-model="formData.permission_mark" name="permission_mark" clearable v-if="isAction" />
|
||||
<Select v-model="formData.permission_mark" allow-create placeholder="请选择" api="controllers" :query="{ module: formData.module }" v-else />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单Icon" prop="icon" v-if="!isAction">
|
||||
<el-popover placement="right" :width="400" trigger="click">
|
||||
<template #reference>
|
||||
<el-input v-model="formData.icon" name="icon" clearable />
|
||||
</template>
|
||||
<div>
|
||||
<Icons v-model="formData.icon" @close="closeSelectIcon" />
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属组件" prop="component" v-if="!isAction">
|
||||
<Select v-model="formData.component" placeholder="请选择" allow-create api="components" :query="{ module: formData.module }" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Hidden" prop="hidden" v-if="!isAction">
|
||||
<el-radio-group v-model="formData.hidden">
|
||||
<el-radio
|
||||
v-for="item in [
|
||||
{ label: '显示', value: 1 },
|
||||
{ label: '隐藏', value: 2 },
|
||||
]"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
name="hidden"
|
||||
>{{ item.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Keepalive" prop="keepalive" v-if="!isAction">
|
||||
<el-radio-group v-model="formData.keepalive">
|
||||
<el-radio
|
||||
v-for="item in [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '禁用', value: 2 },
|
||||
]"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
name="keepalive"
|
||||
>{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="激活菜单" prop="active_menu" v-if="isMenu">
|
||||
<div class="w-full flex flex-row">
|
||||
<el-input v-model="formData.active_menu" name="active_menu" clearable class="w-3/4" />
|
||||
<el-tooltip effect="dark" :content="activeMenuIntro" raw-content placement="top">
|
||||
<div class="text-red-500 cursor-pointer w-1/4 ml-2 justify-center flex">说明</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCreate } from '/admin/composables/curd/useCreate'
|
||||
import { useShow } from '/admin/composables/curd/useShow'
|
||||
import { useOpen } from '/admin/composables/curd/useOpen'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import http from '/admin/support/http'
|
||||
import { MenuType } from '/admin/enum/app'
|
||||
|
||||
const props = defineProps({
|
||||
primary: [String,Number],
|
||||
api: String,
|
||||
})
|
||||
|
||||
const activeMenuIntro =
|
||||
'<div>如果是访问内页的菜单路由，例如创建文章 create/post, 虽然它隶属于文章列表，但实际上并不会嵌套在文章列表路由里</div><div>而是单独的一个路由，并且是不显示在左侧菜单的。所以在访问它的时候，需要左侧菜单高亮，则需要设置该参数</div>'
|
||||
|
||||
const { formData, form, loading, submitForm, close, beforeCreate, beforeUpdate } = useCreate(props.api, props.primary)
|
||||
|
||||
// 选择 icon
|
||||
const { open, visible } = useOpen()
|
||||
// 关闭选择 icon
|
||||
const closeSelectIcon = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 默认值
|
||||
const defaultSort = 1
|
||||
const defaultKeepalive = 1
|
||||
const defaultHidden = 1
|
||||
|
||||
// 初始化
|
||||
formData.value.sort = defaultSort
|
||||
formData.value.keepalive = defaultKeepalive
|
||||
formData.value.type = MenuType.TOP_TYPE
|
||||
formData.value.hidden = defaultHidden
|
||||
|
||||
// 默认目录
|
||||
const isTop = ref<boolean>(true)
|
||||
const isMenu = ref<boolean>(false)
|
||||
const isAction = ref<boolean>(false)
|
||||
|
||||
// 回显示表单
|
||||
if (props.primary) {
|
||||
const { afterShow } = useShow(props.api, props.primary, formData)
|
||||
|
||||
afterShow.value = formData => {
|
||||
if (formData.value.permission_mark.indexOf('@') !== -1) {
|
||||
formData.value.permission_mark = formData.value.permission_mark.split('@')[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
const permissions = ref()
|
||||
onMounted(() => {
|
||||
http.get(props.api).then(r => {
|
||||
permissions.value = r.data.data
|
||||
})
|
||||
|
||||
close(() => emit('close'))
|
||||
|
||||
// 监听 form data
|
||||
watch(
|
||||
formData,
|
||||
() => {
|
||||
const type: number = formData.value.type
|
||||
if (type === MenuType.TOP_TYPE) {
|
||||
isTop.value = true
|
||||
isMenu.value = isAction.value = false
|
||||
} else if (type === MenuType.PAGE_TYPE) {
|
||||
isMenu.value = true
|
||||
isTop.value = isAction.value = false
|
||||
} else {
|
||||
isAction.value = true
|
||||
isTop.value = isMenu.value = false
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
})
|
||||
|
||||
// 菜单是菜单类型的时，清除模块，那么权限标识&组件也需要清除
|
||||
const clearModule = () => {
|
||||
if (formData.value.type === MenuType.TOP_TYPE || formData.value.type === MenuType.PAGE_TYPE) {
|
||||
formData.value.component = null
|
||||
}
|
||||
if (formData.value.type === MenuType.PAGE_TYPE) {
|
||||
formData.value.permission_mark = null
|
||||
}
|
||||
}
|
||||
|
||||
// 创建前的钩子
|
||||
beforeCreate.value = () => {
|
||||
formData.value.parent_id = getParent(formData.value.parent_id)
|
||||
}
|
||||
|
||||
// 更新前的钩子
|
||||
beforeUpdate.value = () => {
|
||||
formData.value.parent_id = getParent(formData.value.parent_id)
|
||||
}
|
||||
|
||||
const getParent = (parentId: any) => {
|
||||
if (typeof parentId === 'number') {
|
||||
return parentId
|
||||
}
|
||||
|
||||
return typeof parentId === 'undefined' ? 0 : parentId[parentId.length - 1]
|
||||
}
|
||||
</script>
|
||||
@@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="菜单名称" prop="permission_name">
|
||||
<el-input v-model="query.permission_name" name="permission_name" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
<div class="table-default">
|
||||
<Operate :show="open" />
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading" row-key="id" default-expand-all :tree-props="{ children: 'children' }">
|
||||
<el-table-column prop="permission_name" label="菜单名称" />
|
||||
<el-table-column prop="route" label="菜单路由" />
|
||||
<el-table-column prop="permission_mark" label="权限标识" width="330">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.actions.length" class="flex grid gap-1 grid-cols-4">
|
||||
<el-tag v-for="action in scope.row.actions" class="cursor-pointer min-w-fit" @click="open(action.id)" closable @close="destroy(api, action.id)">{{ action.permission_name }}</el-tag>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-popconfirm v-if="scope.row.type === MenuType.PAGE_TYPE" confirm-button-text="确认" title="添加基础actions" @confirm="actionGenerate(scope.row.id)" placement="top">
|
||||
<template #reference>
|
||||
<el-tag class="cursor-pointer w-8">
|
||||
<Icon name="cog-6-tooth" class="animate-spin w-5 h-5" v-if="generateId === scope.row.id" />
|
||||
<Icon name="plus" className="w-4 h-4" v-else />
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="hidden" label="状态" width="100">
|
||||
<template #default="scope">
|
||||
<Status v-model="scope.row.hidden" :id="scope.row.id" :api="api" @refresh="search" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<Update @click="open(scope.row.id)" />
|
||||
<Destroy @click="destroy(api, scope.row.id)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<Dialog v-model="visible" :title="title" destroy-on-close>
|
||||
<Create @close="close(reset)" :primary="id" :api="api" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import Create from './form/create.vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
import { useDestroy } from '/admin/composables/curd/useDestroy'
|
||||
import { useOpen } from '/admin/composables/curd/useOpen'
|
||||
import { MenuType } from '/admin/enum/app'
|
||||
import http from '../../../../resources/admin/support/http'
|
||||
|
||||
const api = 'permissions/permissions'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api, false)
|
||||
const { destroy, deleted } = useDestroy()
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
deleted(reset)
|
||||
})
|
||||
|
||||
const actionLoading = ref<boolean>(false)
|
||||
const generateId = ref<number>(0)
|
||||
const actionGenerate = async (id: number) => {
|
||||
generateId.value = id
|
||||
http
|
||||
.post(api, { parent_id: id, actions: true })
|
||||
.then(r => {
|
||||
search()
|
||||
generateId.value = 0
|
||||
})
|
||||
.catch(e => {
|
||||
generateId.value = 0
|
||||
catchtable.value.reset()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -1,229 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-6">
|
||||
<el-form-item label="上级角色" prop="parent_id" v-if="!primary">
|
||||
<el-cascader
|
||||
:options="roles"
|
||||
name="parent_id"
|
||||
v-model="formData.parent_id"
|
||||
clearable
|
||||
check-strictly
|
||||
class="w-full"
|
||||
@change="getPermissions"
|
||||
:props="{ value: 'id', label: 'role_name', checkStrictly: true }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="角色名称"
|
||||
prop="role_name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '角色名称必须填写',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="formData.role_name" name="role_name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="角色标识"
|
||||
prop="identify"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '角色标识必须填写',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="formData.identify" name="identify" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="角色描述" prop="description">
|
||||
<el-input v-model="formData.description" name="description" clearable type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据权限" prop="data_range">
|
||||
<Select v-model="formData.data_range" name="data_range" clearable api="dataRange" class="w-full" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="自定义权限"
|
||||
prop="departments"
|
||||
v-if="showDepartments"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '自定义权限必须选择',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-tree-select
|
||||
v-model="formData.departments"
|
||||
value-key="id"
|
||||
class="w-full"
|
||||
:data="departments"
|
||||
:render-after-expand="false"
|
||||
show-checkbox
|
||||
multiple
|
||||
:props="{ value: 'id', label: 'department_name' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色权限" prop="permissions">
|
||||
<div class="h-40 overflow-auto w-full border border-gray-300 rounded pt-2 pl-2">
|
||||
<el-tree
|
||||
ref="permissionTree"
|
||||
v-model="formData.permissions"
|
||||
:data="permissions"
|
||||
node-key="id"
|
||||
class="w-full"
|
||||
:props="{ label: 'permission_name', value: 'id' }"
|
||||
show-checkbox
|
||||
:default-expand-all="false"
|
||||
@check="selectPermissions"
|
||||
:empty-text="permissionLoadingText"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div class="flex justify-end">
|
||||
<el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCreate } from '/admin/composables/curd/useCreate'
|
||||
import { useShow } from '/admin/composables/curd/useShow'
|
||||
import { nextTick, onMounted, ref, unref, watch } from 'vue'
|
||||
import http from '/admin/support/http'
|
||||
|
||||
const props = defineProps({
|
||||
primary: String | Number,
|
||||
api: String,
|
||||
hasPermissions: Array<Object>,
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const { formData, form, loading, submitForm, close, beforeCreate, beforeUpdate } = useCreate(props.api, props.primary)
|
||||
|
||||
if (props.primary) {
|
||||
const { afterShow } = useShow(props.api, props.primary, formData)
|
||||
// 更新角色值
|
||||
afterShow.value = formData => {
|
||||
const data = unref(formData)
|
||||
data.parent_id = data.parent_id ? [data.parent_id] : 0
|
||||
|
||||
if (!data.data_range) {
|
||||
data.data_range = null
|
||||
}
|
||||
|
||||
formData.value = data
|
||||
// 这里需要获取角色的上级的权限以限制可用权限范围
|
||||
getPermissions(data.parent_id)
|
||||
}
|
||||
}
|
||||
|
||||
const roles = ref()
|
||||
const permissions = ref()
|
||||
// 权限树对象
|
||||
const permissionTree = ref()
|
||||
// 部门
|
||||
const departments = ref()
|
||||
const showDepartments = ref<boolean>(false)
|
||||
|
||||
const permissionLoadingText = ref<string>('加载中...')
|
||||
|
||||
// 获取权限
|
||||
const getPermissions = async (value: number = 0) => {
|
||||
if (value) {
|
||||
// 获取角色权限
|
||||
http.get('permissions/roles/' + getParent(value), { from: 'parent_role' }).then(r => {
|
||||
permissions.value = r.data.data.permissions
|
||||
setCheckedPermissions()
|
||||
})
|
||||
} else {
|
||||
http.get('permissions/permissions', { from: 'role' }).then(r => {
|
||||
permissions.value = r.data.data
|
||||
setCheckedPermissions()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 设置已选权限
|
||||
const setCheckedPermissions = () => {
|
||||
nextTick(() => {
|
||||
props.hasPermissions.forEach(p => {
|
||||
permissionTree.value.setChecked(p.id, true, false)
|
||||
})
|
||||
})
|
||||
|
||||
if (!permissions.value.length) {
|
||||
permissionLoadingText.value = '暂无数据'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取角色信息
|
||||
const getRoles = () => {
|
||||
http.get(props.api, { id: props.primary ? props.primary : '' }).then(r => {
|
||||
roles.value = r.data.data
|
||||
})
|
||||
}
|
||||
|
||||
const getDepartments = () => {
|
||||
http.get('permissions/departments').then(r => {
|
||||
departments.value = r.data.data
|
||||
})
|
||||
}
|
||||
|
||||
// 新增默认获取全部权限
|
||||
if (!props.primary) {
|
||||
getPermissions()
|
||||
}
|
||||
|
||||
// 页面挂载完成后
|
||||
onMounted(() => {
|
||||
getRoles()
|
||||
getDepartments()
|
||||
close(() => emit('close'))
|
||||
watch(
|
||||
formData,
|
||||
function (value) {
|
||||
// 如果数据权限是自定义数据
|
||||
showDepartments.value = value.data_range === 2
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
})
|
||||
|
||||
const selectPermissions = (checkedNodes, checkedKeys) => {
|
||||
formData.value.permissions = checkedKeys.checkedKeys.concat(checkedKeys.halfCheckedKeys).sort()
|
||||
}
|
||||
|
||||
// 创建前的钩子
|
||||
beforeCreate.value = () => {
|
||||
formData.value.parent_id = getParent(formData.value.parent_id)
|
||||
}
|
||||
|
||||
// 更新前的钩子
|
||||
beforeUpdate.value = () => {
|
||||
const permissionIds = []
|
||||
formData.value.permissions.forEach(item => {
|
||||
permissionIds.push(item)
|
||||
})
|
||||
|
||||
formData.value.permissions = permissionIds
|
||||
formData.value.parent_id = getParent(formData.value.parent_id)
|
||||
}
|
||||
|
||||
const getParent = (parentId: any) => {
|
||||
return typeof parentId === 'undefined' ? 0 : parentId[parentId.length - 1]
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.el-tree .el-tree__empty-block .el-tree__empty-text) {
|
||||
@apply left-10 top-4;
|
||||
}
|
||||
:deep(.el-tree-node .is-expanded .el-tree-node__children) {
|
||||
@apply flex flex-wrap pl-9;
|
||||
}
|
||||
:deep(.el-tree-node .is-expanded .el-tree-node__children .el-tree-node__content) {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="角色名称" prop="role_name">
|
||||
<el-input v-model="query.role_name" name="role_name" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
<div class="table-default">
|
||||
<div class="pt-5 pl-2">
|
||||
<Add @click="openRoleForm(null, [])" />
|
||||
</div>
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading" row-key="id" default-expand-all :tree-props="{ children: 'children' }">
|
||||
<el-table-column prop="role_name" label="角色名称" />
|
||||
<el-table-column prop="identify" label="角色标识" />
|
||||
<el-table-column prop="description" label="角色描述" />
|
||||
<el-table-column prop="created_at" label="创建时间" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<Update @click="openRoleForm(scope.row.id, scope.row.permissions)" />
|
||||
<Destroy @click="destroy(api, scope.row.id)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<Dialog v-model="visible" :title="title" destroy-on-close>
|
||||
<Create @close="close(reset)" :primary="id" :api="api" :has-permissions="rolePermissions" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import Create from './form/create.vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
import { useDestroy } from '/admin/composables/curd/useDestroy'
|
||||
import { useOpen } from '/admin/composables/curd/useOpen'
|
||||
|
||||
const api = 'permissions/roles'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api, false)
|
||||
const { destroy, deleted } = useDestroy()
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
|
||||
const rolePermissions = ref<Array<number>>([])
|
||||
const openRoleForm = (id, permissions) => {
|
||||
rolePermissions.value = permissions
|
||||
open(id)
|
||||
}
|
||||
onMounted(() => {
|
||||
search()
|
||||
|
||||
deleted(reset)
|
||||
})
|
||||
</script>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-4">
|
||||
<el-form-item
|
||||
label="字典名称"
|
||||
prop="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '字典名称必须填写',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="formData.name" name="name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="字典键名"
|
||||
prop="key"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '字典键名必须填写',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="formData.key" name="key" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字典描述" prop="description">
|
||||
<el-input v-model="formData.description" name="description" clearable type="textarea" />
|
||||
</el-form-item>
|
||||
<div class="flex justify-end">
|
||||
<el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCreate } from '/admin/composables/curd/useCreate'
|
||||
import { useShow } from '/admin/composables/curd/useShow'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
primary: String | Number,
|
||||
api: String,
|
||||
})
|
||||
|
||||
const { formData, form, loading, submitForm, close } = useCreate(props.api, props.primary)
|
||||
|
||||
if (props.primary) {
|
||||
useShow(props.api, props.primary, formData)
|
||||
}
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
onMounted(() => {
|
||||
close(() => emit('close'))
|
||||
})
|
||||
</script>
|
||||
@@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="字典名称" prop="name">
|
||||
<el-input v-model="query.name" name="name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字典键名" prop="key">
|
||||
<el-input v-model="query.key" name="key" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字典状态" prop="status">
|
||||
<el-input v-model="query.status" name="status" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
|
||||
<div class="table-default">
|
||||
<Operate :show="open" />
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading">
|
||||
<el-table-column prop="id" label="ID" width="100" />
|
||||
<el-table-column prop="name" label="字典名称" />
|
||||
<el-table-column prop="key" label="字典键名">
|
||||
<template #default="scope">
|
||||
<router-link :to="{ path: '/system/dictionary/values/' + scope.row.id }">
|
||||
<el-text type="primary">{{ scope.row.key }}</el-text>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="字典状态">
|
||||
<template #default="scope">
|
||||
<Status v-model="scope.row.status" :id="scope.row.id" :api="api" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="字典描述" />
|
||||
<el-table-column label="操作" width="300">
|
||||
<template #default="scope">
|
||||
<Update @click="open(scope.row.id)" />
|
||||
<Destroy @click="destroy(api, scope.row.id)" />
|
||||
<router-link :to="{ path: '/system/dictionary/values/' + scope.row.id }">
|
||||
<Show text="列表" class="ml-3" />
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Paginate />
|
||||
</div>
|
||||
|
||||
<Dialog v-model="visible" :title="title" destroy-on-close>
|
||||
<Create @close="close(reset)" :primary="id" :api="api" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted } from 'vue'
|
||||
import Create from './create.vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
import { useDestroy } from '/admin/composables/curd/useDestroy'
|
||||
import { useOpen } from '/admin/composables/curd/useOpen'
|
||||
|
||||
const api = 'system/dictionary'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api)
|
||||
const { destroy, deleted } = useDestroy()
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
deleted(reset)
|
||||
})
|
||||
</script>
|
||||
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-4">
|
||||
<el-form-item
|
||||
label="字典值名"
|
||||
prop="label"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '字典值名必须填写',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="formData.label" name="label" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="字典键值"
|
||||
prop="value"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '字典键值必须填写',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input-number v-model="formData.value" name="value" clearable :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" name="sort" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="formData.description" name="description" clearable type="textarea" />
|
||||
</el-form-item>
|
||||
<div class="flex justify-end">
|
||||
<el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCreate } from '/admin/composables/curd/useCreate'
|
||||
import { useShow } from '/admin/composables/curd/useShow'
|
||||
import { onMounted } from 'vue'
|
||||
import router from '/admin/router'
|
||||
|
||||
const props = defineProps({
|
||||
primary: String | Number,
|
||||
api: String,
|
||||
})
|
||||
|
||||
const { formData, form, loading, submitForm, close } = useCreate(props.api, props.primary)
|
||||
|
||||
// 默认值
|
||||
formData.value.value = 1
|
||||
formData.value.sort = 1
|
||||
formData.value.dic_id = router.currentRoute.value.params.id
|
||||
|
||||
if (props.primary) {
|
||||
useShow(props.api, props.primary, formData)
|
||||
}
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
onMounted(() => {
|
||||
close(() => emit('close'))
|
||||
})
|
||||
</script>
|
||||
@@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="字典值名" prop="label">
|
||||
<el-input v-model="query.label" name="label" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-input v-model="query.status" name="status" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
<div class="table-default">
|
||||
<Operate :show="open" />
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading">
|
||||
<el-table-column prop="id" label="ID" />
|
||||
<el-table-column prop="label" label="字典值名称" />
|
||||
<el-table-column prop="value" label="字典键值" />
|
||||
<el-table-column prop="sort" label="排序" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<Status v-model="scope.row.status" :id="scope.row.id" :api="api" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="描述" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<Update @click="open(scope.row.id)" />
|
||||
<Destroy @click="destroy(api, scope.row.id)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Paginate />
|
||||
</div>
|
||||
|
||||
<Dialog v-model="visible" :title="title" destroy-on-close>
|
||||
<Create @close="close(reset)" :primary="id" :api="api" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted } from 'vue'
|
||||
import Create from './create.vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
import { useDestroy } from '/admin/composables/curd/useDestroy'
|
||||
import { useOpen } from '/admin/composables/curd/useOpen'
|
||||
import router from '/admin/router'
|
||||
|
||||
const api = 'system/dic/values'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api)
|
||||
query.value.dic_id = router.currentRoute.value.params.id
|
||||
|
||||
const { destroy, deleted } = useDestroy()
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
deleted(reset)
|
||||
})
|
||||
</script>
|
||||
@@ -1,26 +0,0 @@
|
||||
import { RouteRecordRaw } from 'vue-router'
|
||||
|
||||
// @ts-ignore
|
||||
const router: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/users',
|
||||
component: () => import('/admin/layout/index.vue'),
|
||||
meta: { title: '用户管理', icon: 'user' },
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'user-account',
|
||||
meta: { title: '账号管理', icon: 'home' },
|
||||
component: () => import('./user/index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'center',
|
||||
name: 'user-center',
|
||||
meta: { title: '个人中心', icon: 'home' },
|
||||
component: () => import('./user/center.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default router
|
||||
@@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col sm:flex-row dark:bg-regal-dark w-full">
|
||||
<el-card shadow="never" class="w-full sm:w-[35rem] h-[32rem]">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>个人资料</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="w-full">
|
||||
<Profile />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-tabs v-model="activeName" class="pl-3 pr-3 bg-white dark:bg-regal-dark mt-2 sm:mt-0 w-full ml-0 sm:ml-2">
|
||||
<el-tab-pane label="登录日志" name="login_log">
|
||||
<LoginLog />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="操作日志" name="operation_log">
|
||||
<OperateLog />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import Profile from './components/profile.vue'
|
||||
import LoginLog from './components/loginLog.vue'
|
||||
import OperateLog from './components/operateLog.vue'
|
||||
|
||||
const activeName = ref('login_log')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-tabs {
|
||||
--el-tabs-header-height: 62px !important;
|
||||
}
|
||||
|
||||
.el-tabs .el-tabs__item {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<div class="w-full sm:w-[28rem] min-h-[30rem] bg-white">
|
||||
<el-tree :data="departments" :props="{ label: 'department_name', value: 'id'}" @node-click="clickDepartment" class="p-5" :expand-on-click-node="false" :highlight-current="true"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import http from '/admin/support/http'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const departments = ref()
|
||||
|
||||
onMounted(() => {
|
||||
http.get('permissions/departments').then(r => {
|
||||
departments.value = r.data.data
|
||||
})
|
||||
})
|
||||
|
||||
const emits = defineEmits(['update:modelValue', 'searchDepartmentUsers'])
|
||||
|
||||
const clickDepartment = (node) => {
|
||||
emits('update:modelValue', node.id)
|
||||
|
||||
emits('searchDepartmentUsers')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-tree .el-tree-node) {
|
||||
@apply p-0.5
|
||||
}
|
||||
|
||||
:deep(.el-tree .el-tree-node .el-tree-node__content) {
|
||||
@apply h-8 rounded
|
||||
}
|
||||
</style>
|
||||
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<div class="table-default">
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading">
|
||||
<el-table-column prop="account" label="账户" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="platform" label="平台" />
|
||||
<el-table-column prop="login_ip" label="IP" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status === 1">成功</el-tag>
|
||||
<el-tag type="danger" v-else>失败</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="login_at" label="登录时间" />
|
||||
</el-table>
|
||||
|
||||
<Paginate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
|
||||
const api = 'user/login/log'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api)
|
||||
|
||||
onMounted(() => search())
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div class="table-default">
|
||||
<div class="w-full flex justify-end">
|
||||
<el-radio-group v-model="query.scope" size="small" @change="search">
|
||||
<el-radio-button value="self">只看自己</el-radio-button>
|
||||
<el-radio-button value="all">全部</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading">
|
||||
<el-table-column prop="creator" label="创建人" />
|
||||
<el-table-column prop="module" label="模块" />
|
||||
<el-table-column prop="action" label="操作" width="150" />
|
||||
<el-table-column prop="http_method" label="请求方法" width="90" />
|
||||
<el-table-column prop="http_code" label="请求状态" width="90">
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.http_code >= 200 && scope.row.http_code < 300"> {{ scope.row.http_code }}</el-tag>
|
||||
<el-tag type="danger" v-else>{{ scope.row.http_code }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="time_taken" label="耗时" />
|
||||
<el-table-column prop="params" label="参数">
|
||||
<template #default="scope">
|
||||
<el-tooltip class="box-item" effect="dark" :content="scope.row.params" placement="top-start">
|
||||
<el-button size="small" type="primary">查看</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Paginate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
|
||||
const api = 'user/operate/log'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api)
|
||||
|
||||
query.value.scope = 'self'
|
||||
|
||||
onMounted(() => search())
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="profile" ref="form" v-loading="loading" label-position="top">
|
||||
<Upload imageClass="w-28 h-28 rounded-full mx-auto" v-model="profile.avatar" />
|
||||
<el-form-item
|
||||
label="昵称"
|
||||
prop="username"
|
||||
class="mt-2"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '昵称必须填写',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="profile.username" placeholder="请填写昵称" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="邮箱"
|
||||
prop="email"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '邮箱必须填写',
|
||||
},
|
||||
{
|
||||
type: 'email',
|
||||
message: '邮箱格式不正确',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="profile.email" placeholder="请填写邮箱" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码"
|
||||
prop="password"
|
||||
:rules="[
|
||||
{
|
||||
pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/,
|
||||
message: '必须包含大小写字母和数字的组合，可以使用特殊字符，长度在6-20之间',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="profile.password" type="password" show-password placeholder="请输入密码" />
|
||||
</el-form-item>
|
||||
<div class="flex justify-center">
|
||||
<el-button type="primary" @click="submitForm(form)">{{ $t('system.update') }}</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useCreate } from '/admin/composables/curd/useCreate'
|
||||
import http from '/admin/support/http'
|
||||
import { Code } from '/admin/enum/app'
|
||||
import Message from '/admin/support/message'
|
||||
import { useUserStore } from '/admin/stores/modules/user'
|
||||
|
||||
interface profile {
|
||||
avatar: string
|
||||
username: string
|
||||
email: string
|
||||
password: string
|
||||
}
|
||||
|
||||
const profile = ref<profile>({
|
||||
avatar: '',
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
})
|
||||
const { form, loading, submitForm, afterCreate } = useCreate('user/online', null, profile)
|
||||
|
||||
const getUserInfo = () => {
|
||||
loading.value = true
|
||||
http.get('user/online').then(r => {
|
||||
profile.value.username = r.data.data.username
|
||||
profile.value.avatar = r.data.data.avatar
|
||||
profile.value.email = r.data.data.email
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getUserInfo()
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
afterCreate.value = () => {
|
||||
userStore.getUserInfo()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-upload) {
|
||||
@apply h-full w-full;
|
||||
}
|
||||
</style>
|
||||
@@ -1,129 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="80px" ref="form" v-loading="loading" class="pr-4">
|
||||
<div class="flex flex-row justify-between">
|
||||
<div :class="hasRoles ? 'w-1/2' : 'w-full'">
|
||||
<el-form-item
|
||||
label="昵称"
|
||||
prop="username"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '昵称必须填写',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="formData.username" placeholder="请填写昵称" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="邮箱"
|
||||
prop="email"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '邮箱必须填写',
|
||||
},
|
||||
{
|
||||
type: 'email',
|
||||
message: '邮箱格式不正确',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="formData.email" placeholder="请填写邮箱" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password" :rules="passwordRules">
|
||||
<el-input v-model="formData.password" type="password" show-password placeholder="请输入密码" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="角色" prop="roles" v-if="hasRoles" :rules="[{ required: true, message: '请选择角色' }]">
|
||||
<el-tree-select
|
||||
v-model="formData.roles"
|
||||
:default-expanded-keys="formData.roles"
|
||||
:data="roles"
|
||||
value-key="id"
|
||||
check-strictly
|
||||
class="w-full"
|
||||
:props="{ label: 'role_name', value: 'id' }"
|
||||
clearable
|
||||
multiple
|
||||
show-checkbox
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="w-1/2" v-if="hasRoles">
|
||||
<el-form-item label="部门" prop="department_id">
|
||||
<el-tree-select v-model="formData.department_id" :data="departments" check-strictly :props="{ label: 'department_name', value: 'id' }" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位" prop="department_id">
|
||||
<el-select v-model="formData.jobs" multiple>
|
||||
<el-option v-for="item in jobs" :key="item.id" :label="item.job_name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCreate } from '/admin/composables/curd/useCreate'
|
||||
import { useShow } from '/admin/composables/curd/useShow'
|
||||
|
||||
import { onMounted, ref } from 'vue'
|
||||
import http from '/admin/support/http'
|
||||
|
||||
const props = defineProps({
|
||||
primary: String | Number,
|
||||
api: String,
|
||||
hasRoles: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
|
||||
const passwordRules = [
|
||||
{
|
||||
required: true,
|
||||
message: '密码必须填写',
|
||||
},
|
||||
{
|
||||
pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/,
|
||||
message: '必须包含大小写字母和数字的组合，可以使用特殊字符，长度在6-20之间',
|
||||
},
|
||||
]
|
||||
|
||||
if (props.primary) {
|
||||
passwordRules.shift()
|
||||
}
|
||||
|
||||
const { formData, form, loading, submitForm, close } = useCreate(props.api, props.primary)
|
||||
|
||||
if (props.primary) {
|
||||
useShow(props.api, props.primary, formData)
|
||||
}
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
close(() => emit('close'))
|
||||
|
||||
const departments = ref()
|
||||
const jobs = ref()
|
||||
const roles = ref()
|
||||
|
||||
onMounted(() => {
|
||||
if (props.hasRoles) {
|
||||
http.get('permissions/departments').then(r => {
|
||||
departments.value = r.data.data
|
||||
})
|
||||
|
||||
http.get('permissions/jobs').then(r => {
|
||||
jobs.value = r.data.data
|
||||
})
|
||||
|
||||
http.get('permissions/roles').then(r => {
|
||||
roles.value = r.data.data
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col sm:flex-row w-full justify-between">
|
||||
<Department v-model="query.department_id" @searchDepartmentUsers="search" v-if="hasRoles" class="dark:bg-regal-dark" />
|
||||
<div :class="hasRoles ? 'w-full ml-0 sm:ml-2 mt-2 sm:mt-0' : 'w-full'">
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="query.username" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="query.email" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<Select v-model="query.status" clearable api="status" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
<div class="table-default">
|
||||
<Operate :show="open">
|
||||
<template #operate>
|
||||
<el-button @click="download('/user')">导出</el-button>
|
||||
</template>
|
||||
</Operate>
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading">
|
||||
<el-table-column prop="username" label="用户名" width="150" />
|
||||
<el-table-column prop="avatar" label="头像">
|
||||
<template #default="scope">
|
||||
<el-avatar :icon="UserFilled" v-if="!scope.row.avatar" />
|
||||
<el-avatar :src="scope.row.avatar" v-else />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="email" label="邮箱" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<Status v-model="scope.row.status" :id="scope.row.id" :api="api" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<Update @click="open(scope.row.id)" />
|
||||
<Destroy @click="destroy(api, scope.row.id)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<Paginate />
|
||||
</div>
|
||||
|
||||
<Dialog v-model="visible" :title="title" destroy-on-close>
|
||||
<Create @close="close(reset)" :primary="id" :api="api" :has-roles="hasRoles" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// @ts-nocheck
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import Create from './create.vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
import { useDestroy } from '/admin/composables/curd/useDestroy'
|
||||
import { useOpen } from '/admin/composables/curd/useOpen'
|
||||
import Department from './components/department.vue'
|
||||
import { useUserStore } from '/admin/stores/modules/user'
|
||||
import { isUndefined } from '/admin/support/helper'
|
||||
import { UserFilled } from '@element-plus/icons-vue'
|
||||
import { useExcelDownload } from '/resources/admin/composables/curd/useExcelDownload'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const api = 'users'
|
||||
const { data, query, search, reset, loading } = useGetList(api)
|
||||
const { destroy, deleted } = useDestroy()
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
const { download } = useExcelDownload()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
|
||||
const roles = ref<Array<Object>>()
|
||||
const hasRoles = ref<boolean>(false)
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
deleted(reset)
|
||||
hasRoles.value = !isUndefined(userStore.getRoles)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user