remove vue
This commit is contained in:
JaguarJack
parent
5fe198a2b2
commit
c25da3cfb2
10
.prettierrc
10
.prettierrc
@ -1,10 +0,0 @@
|
||||
{
|
||||
"semi": false,
|
||||
"printWidth": 200,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"singleQuote": true,
|
||||
"arrowParens": "avoid",
|
||||
"trailingComma": "all",
|
||||
"bracketSpacing": true
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"_comment": "This file is used to trick IntelliJ/Webstorm/PHPStorm to use the correct alias as defined in vite.config.js",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"/admin/*": ["resources/admin/*"],
|
||||
"@/module/*": ["modules/*/views/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
56
package.json
56
package.json
@ -1,56 +0,0 @@
|
||||
{
|
||||
"name": "catchadmin",
|
||||
"private": false,
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/vue": "^2.1.3",
|
||||
"@tinymce/tinymce-vue": "^5.1.1",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"element-plus": "^2.6.3",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.7",
|
||||
"terser": "^5.29.2",
|
||||
"vue": "^3.4.21",
|
||||
"vue-draggable-plus": "^0.4.0",
|
||||
"vue-i18n": "9",
|
||||
"vue-router": "4.3.0",
|
||||
"vuedraggable": "^2.24.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/logos": "^1.1.42",
|
||||
"@rollup/plugin-alias": "^5.1.0",
|
||||
"@types/mockjs": "^1.0.7",
|
||||
"@types/node": "^20.11.30",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||
"@typescript-eslint/parser": "^6.21.0",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"axios": "^1.6.8",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-standard": "^17.0.0",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-n": "^16.0.0",
|
||||
"eslint-plugin-promise": "^6.1.1",
|
||||
"eslint-plugin-vue": "^9.23.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"postcss": "^8.4.38",
|
||||
"prettier": "3.2.5",
|
||||
"sass": "^1.72.0",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.4.3",
|
||||
"unplugin-auto-import": "^0.17.5",
|
||||
"unplugin-icons": "^0.18.5",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^5.2.3",
|
||||
"vite-plugin-html": "^3.2.0",
|
||||
"vite-plugin-mock": "^3.0.0",
|
||||
"vue-tsc": "^2.0.7"
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
@ -1,7 +0,0 @@
|
||||
import '/admin/styles/index.scss'
|
||||
|
||||
import CatchAdmin from './support/catchAdmin'
|
||||
|
||||
const admin = new CatchAdmin()
|
||||
|
||||
admin.bootstrap()
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB |
@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div :style="bgColor" class="flex flex-col w-full">
|
||||
<img :src="notFound" class="w-full sm:w-3/5 m-auto" />
|
||||
<div class="mr-auto w-full bottom-0 m-auto">
|
||||
<div class="w-full text-center text-base text-gray-400">抱歉，您访问的页面不存在</div>
|
||||
<div @click="push('/')" class="text-center w-full mt-2">
|
||||
<el-button type="primary">回到首页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAppStore } from '/admin/stores/modules/app'
|
||||
import { computed } from 'vue'
|
||||
import notFound from '/admin/assets/404.png'
|
||||
|
||||
const { push } = useRouter()
|
||||
|
||||
const dark: string = '#161d31;'
|
||||
const light: string = 'rgb(241,245,249);'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const bgColor = computed(() => {
|
||||
return 'background-color:' + (appStore.getIsDarkMode ? dark : light)
|
||||
})
|
||||
</script>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<el-button type="primary" :size="size"><Icon name="plus" className="w-4 h-4 mr-1" /> {{ text }}</el-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: '新增',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<el-button type="danger" :size="size"><Icon name="trash" className="w-4 h-4 mr-1" /> {{ text }}</el-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
size: {
|
||||
type: String,
|
||||
default: 'small',
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: '删除',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<el-button type="primary" :size="size"><Icon name="eye" className="w-4 h-4 mr-1" /> {{ text }}</el-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
size: {
|
||||
type: String,
|
||||
default: 'small',
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: '详情',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<el-button type="success" :size="size"><Icon name="pencil-square" className="w-4 h-4 mr-1" /> {{ text }}</el-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
size: {
|
||||
type: String,
|
||||
default: 'small',
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: '更新',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :model-value="modelValue" :show-close="false" :fullscreen="isFullscreen" v-bind="$attrs" :width="width" :close="close" :before-close="beforeClose" draggable>
|
||||
<template #header="{ titleId, titleClass }">
|
||||
<div class="flex justify-between w-full">
|
||||
<div>
|
||||
<h4 :id="titleId" :class="titleClass">{{ title }}</h4>
|
||||
</div>
|
||||
<div class="flex w-12 justify-end">
|
||||
<!--<Icon :name="fullscreenIcon" @click="fullscreen" className="hover:cursor-pointer w-4 h-4" />-->
|
||||
<Icon name="x-mark" className="hover:cursor-pointer w-5 h-5" @click="close" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="pt-4">
|
||||
<slot />
|
||||
</div>
|
||||
<template #footer v-if="showFooter">
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="close">{{ $t('system.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="close">{{ $t('system.confirm') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
require: true,
|
||||
},
|
||||
showFooter: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
width: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
|
||||
const isFullscreen = ref(false)
|
||||
|
||||
const fullscreenIcon = computed(() => {
|
||||
return isFullscreen.value ? 'arrows-pointing-in' : 'arrows-pointing-out'
|
||||
})
|
||||
const fullscreen = () => {
|
||||
isFullscreen.value = !isFullscreen.value
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
emits('update:modelValue', false)
|
||||
}
|
||||
|
||||
// 遮罩关闭调用
|
||||
const beforeClose = () => {
|
||||
emits('update:modelValue', false)
|
||||
}
|
||||
const width = ref<string>('')
|
||||
|
||||
onMounted(() => {
|
||||
width.value = props.width ? props.width : getWidth()
|
||||
})
|
||||
|
||||
// 窗口尺寸
|
||||
const getWidth = () => {
|
||||
const clientWidth = window.document.body.clientWidth
|
||||
|
||||
if (clientWidth <= 726) {
|
||||
return '100%'
|
||||
}
|
||||
|
||||
if (clientWidth > 726 && clientWidth < 1440) {
|
||||
return '60%'
|
||||
}
|
||||
|
||||
return '650px'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dialog) {
|
||||
border-radius: 0.5rem;
|
||||
.el-dialog__header {
|
||||
margin-right: 0 !important;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,360 +0,0 @@
|
||||
<template>
|
||||
<div class="h-84 pl-2 pr-2">
|
||||
<div :class="`grid ${grid} gap-y-4 gap-x-4` + ' mt-3 h-72'">
|
||||
<div v-for="icon in icons" :key="icon" class="flex justify-center hover:cursor-pointer" @click="selectIcon(icon)">
|
||||
<div v-if="modelValue === icon">
|
||||
<div class="flex justify-center w-full text-violet-700"><Icon :name="icon" className="w-5 h-5" /></div>
|
||||
<div class="text-[1px] text-violet-700">{{ icon }}</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="flex justify-center w-full"><Icon :name="icon" className="w-5 h-5" /></div>
|
||||
<div class="text-[1px]">{{ icon }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-6">
|
||||
<el-pagination layout="prev,next" :page-size="limit" :total="total" prev-text="上一页" next-text="下一页" @next-click="handleNext" @prev-click="handlePrev" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
grid: {
|
||||
type: String,
|
||||
default: 'grid-cols-4',
|
||||
},
|
||||
})
|
||||
|
||||
const emits = defineEmits(['update:modelValue', 'close'])
|
||||
|
||||
const limit = ref<number>(16)
|
||||
const icons = ref<Array<string>>([])
|
||||
const total = ref<number>(0)
|
||||
function getIcons(page = 1) {
|
||||
const start = (page - 1) * limit.value
|
||||
const end = start + limit.value
|
||||
icons.value = constIcons.slice(start, end)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getIcons()
|
||||
total.value = constIcons.length
|
||||
})
|
||||
const handleNext = (value: number) => {
|
||||
getIcons(value)
|
||||
}
|
||||
|
||||
const handlePrev = (value: number) => {
|
||||
getIcons(value)
|
||||
}
|
||||
const selectIcon = (icon: string) => {
|
||||
emits('update:modelValue', icon)
|
||||
emits('close')
|
||||
}
|
||||
// icons
|
||||
const constIcons = [
|
||||
'academic-cap',
|
||||
'adjustments-horizontal',
|
||||
'adjustments-vertical',
|
||||
'archive-box-arrow-down',
|
||||
'archive-box-x-mark',
|
||||
'archive-box',
|
||||
'arrow-down-circle',
|
||||
'arrow-down-left',
|
||||
'arrow-down-on-square-stack',
|
||||
'arrow-down-on-square',
|
||||
'arrow-down-right',
|
||||
'arrow-down-tray',
|
||||
'arrow-down',
|
||||
'arrow-left-circle',
|
||||
'arrow-left-on-rectangle',
|
||||
'arrow-left',
|
||||
'arrow-long-down',
|
||||
'arrow-long-left',
|
||||
'arrow-long-right',
|
||||
'arrow-long-up',
|
||||
'arrow-path-rounded-square',
|
||||
'arrow-path',
|
||||
'arrow-right-circle',
|
||||
'arrow-right-on-rectangle',
|
||||
'arrow-right',
|
||||
'arrow-small-down',
|
||||
'arrow-small-left',
|
||||
'arrow-small-right',
|
||||
'arrow-small-up',
|
||||
'arrow-top-right-on-square',
|
||||
'arrow-trending-down',
|
||||
'arrow-trending-up',
|
||||
'arrow-up-circle',
|
||||
'arrow-up-left',
|
||||
'arrow-up-on-square-stack',
|
||||
'arrow-up-on-square',
|
||||
'arrow-up-right',
|
||||
'arrow-up-tray',
|
||||
'arrow-up',
|
||||
'arrow-uturn-down',
|
||||
'arrow-uturn-left',
|
||||
'arrow-uturn-right',
|
||||
'arrow-uturn-up',
|
||||
'arrows-pointing-in',
|
||||
'arrows-pointing-out',
|
||||
'arrows-right-left',
|
||||
'arrows-up-down',
|
||||
'at-symbol',
|
||||
'backspace',
|
||||
'backward',
|
||||
'banknotes',
|
||||
'bars-2',
|
||||
'bars-3-bottom-left',
|
||||
'bars-3-bottom-right',
|
||||
'bars-3-center-left',
|
||||
'bars-3',
|
||||
'bars-4',
|
||||
'bars-arrow-down',
|
||||
'bars-arrow-up',
|
||||
'battery-0',
|
||||
'battery-100',
|
||||
'battery-50',
|
||||
'beaker',
|
||||
'bell-alert',
|
||||
'bell-slash',
|
||||
'bell-snooze',
|
||||
'bell',
|
||||
'bolt-slash',
|
||||
'bolt',
|
||||
'book-open',
|
||||
'bookmark-slash',
|
||||
'bookmark-square',
|
||||
'bookmark',
|
||||
'briefcase',
|
||||
'bug-ant',
|
||||
'building-library',
|
||||
'building-office-2',
|
||||
'building-office',
|
||||
'building-storefront',
|
||||
'cake',
|
||||
'calculator',
|
||||
'calendar-days',
|
||||
'calendar',
|
||||
'camera',
|
||||
'chart-bar-square',
|
||||
'chart-bar',
|
||||
'chart-pie',
|
||||
'chat-bubble-bottom-center-text',
|
||||
'chat-bubble-bottom-center',
|
||||
'chat-bubble-left-ellipsis',
|
||||
'chat-bubble-left-right',
|
||||
'chat-bubble-left',
|
||||
'chat-bubble-oval-left-ellipsis',
|
||||
'chat-bubble-oval-left',
|
||||
'check-badge',
|
||||
'check-circle',
|
||||
'check',
|
||||
'chevron-double-down',
|
||||
'chevron-double-left',
|
||||
'chevron-double-right',
|
||||
'chevron-double-up',
|
||||
'chevron-down',
|
||||
'chevron-left',
|
||||
'chevron-right',
|
||||
'chevron-up-down',
|
||||
'chevron-up',
|
||||
'circle-stack',
|
||||
'clipboard-document-check',
|
||||
'clipboard-document-list',
|
||||
'clipboard-document',
|
||||
'clipboard',
|
||||
'clock',
|
||||
'cloud-arrow-down',
|
||||
'cloud-arrow-up',
|
||||
'cloud',
|
||||
'code-bracket-square',
|
||||
'code-bracket',
|
||||
'cog-6-tooth',
|
||||
'cog-8-tooth',
|
||||
'cog',
|
||||
'command-line',
|
||||
'computer-desktop',
|
||||
'cpu-chip',
|
||||
'credit-card',
|
||||
'cube-transparent',
|
||||
'cube',
|
||||
'currency-bangladeshi',
|
||||
'currency-dollar',
|
||||
'currency-euro',
|
||||
'currency-pound',
|
||||
'currency-rupee',
|
||||
'currency-yen',
|
||||
'cursor-arrow-rays',
|
||||
'cursor-arrow-ripple',
|
||||
'device-phone-mobile',
|
||||
'device-tablet',
|
||||
'document-arrow-down',
|
||||
'document-arrow-up',
|
||||
'document-chart-bar',
|
||||
'document-check',
|
||||
'document-duplicate',
|
||||
'document-magnifying-glass',
|
||||
'document-minus',
|
||||
'document-plus',
|
||||
'document-text',
|
||||
'document',
|
||||
'ellipsis-horizontal-circle',
|
||||
'ellipsis-horizontal',
|
||||
'ellipsis-vertical',
|
||||
'envelope-open',
|
||||
'envelope',
|
||||
'exclamation-circle',
|
||||
'exclamation-triangle',
|
||||
'eye-dropper',
|
||||
'eye-slash',
|
||||
'eye',
|
||||
'face-frown',
|
||||
'face-smile',
|
||||
'film',
|
||||
'finger-print',
|
||||
'fire',
|
||||
'flag',
|
||||
'folder-arrow-down',
|
||||
'folder-minus',
|
||||
'folder-open',
|
||||
'folder-plus',
|
||||
'folder',
|
||||
'forward',
|
||||
'funnel',
|
||||
'gif',
|
||||
'gift-top',
|
||||
'gift',
|
||||
'globe-alt',
|
||||
'globe-americas',
|
||||
'globe-asia-australia',
|
||||
'globe-europe-africa',
|
||||
'hand-raised',
|
||||
'hand-thumb-down',
|
||||
'hand-thumb-up',
|
||||
'hashtag',
|
||||
'heart',
|
||||
'home-modern',
|
||||
'home',
|
||||
'identification',
|
||||
'inbox-arrow-down',
|
||||
'inbox-stack',
|
||||
'inbox',
|
||||
'information-circle',
|
||||
'key',
|
||||
'language',
|
||||
'lifebuoy',
|
||||
'light-bulb',
|
||||
'link',
|
||||
'list-bullet',
|
||||
'lock-closed',
|
||||
'lock-open',
|
||||
'magnifying-glass-circle',
|
||||
'magnifying-glass-minus',
|
||||
'magnifying-glass-plus',
|
||||
'magnifying-glass',
|
||||
'map-pin',
|
||||
'map',
|
||||
'megaphone',
|
||||
'microphone',
|
||||
'minus-circle',
|
||||
'minus-small',
|
||||
'minus',
|
||||
'moon',
|
||||
'musical-note',
|
||||
'newspaper',
|
||||
'no-symbol',
|
||||
'paint-brush',
|
||||
'paper-airplane',
|
||||
'paper-clip',
|
||||
'pause-circle',
|
||||
'pause',
|
||||
'pencil-square',
|
||||
'pencil',
|
||||
'phone-arrow-down-left',
|
||||
'phone-arrow-up-right',
|
||||
'phone-x-mark',
|
||||
'phone',
|
||||
'photo',
|
||||
'play-circle',
|
||||
'play-pause',
|
||||
'play',
|
||||
'plus-circle',
|
||||
'plus-small',
|
||||
'plus',
|
||||
'power',
|
||||
'presentation-chart-bar',
|
||||
'presentation-chart-line',
|
||||
'printer',
|
||||
'puzzle-piece',
|
||||
'qr-code',
|
||||
'question-mark-circle',
|
||||
'queue-list',
|
||||
'radio',
|
||||
'receipt-percent',
|
||||
'receipt-refund',
|
||||
'rectangle-group',
|
||||
'rectangle-stack',
|
||||
'rocket-launch',
|
||||
'rss',
|
||||
'scale',
|
||||
'scissors',
|
||||
'server-stack',
|
||||
'server',
|
||||
'share',
|
||||
'shield-check',
|
||||
'shield-exclamation',
|
||||
'shopping-bag',
|
||||
'shopping-cart',
|
||||
'signal-slash',
|
||||
'signal',
|
||||
'sparkles',
|
||||
'speaker-wave',
|
||||
'speaker-x-mark',
|
||||
'square-2-stack',
|
||||
'square-3-stack-3d',
|
||||
'squares-2x2',
|
||||
'squares-plus',
|
||||
'star',
|
||||
'stop-circle',
|
||||
'stop',
|
||||
'sun',
|
||||
'swatch',
|
||||
'table-cells',
|
||||
'tag',
|
||||
'ticket',
|
||||
'trash',
|
||||
'trophy',
|
||||
'truck',
|
||||
'tv',
|
||||
'user-circle',
|
||||
'user-group',
|
||||
'user-minus',
|
||||
'user-plus',
|
||||
'user',
|
||||
'users',
|
||||
'variable',
|
||||
'video-camera-slash',
|
||||
'video-camera',
|
||||
'view-columns',
|
||||
'viewfinder-circle',
|
||||
'wallet',
|
||||
'wifi',
|
||||
'window',
|
||||
'wrench-screwdriver',
|
||||
'wrench',
|
||||
'x-circle',
|
||||
'x-mark',
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div class="flex justify-end pt-5">
|
||||
<el-pagination background :layout="layout" :current-page="page" :page-size="limit" @current-change="changePage" @size-change="changeLimit" :total="parseInt(total)" :page-sizes="pageSizes" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue'
|
||||
|
||||
const layout = 'total,sizes,prev, pager,next'
|
||||
|
||||
const pageSizes = [10, 20, 30, 50]
|
||||
|
||||
interface paginate {
|
||||
page: number
|
||||
limit: number
|
||||
total: string
|
||||
changePage: number
|
||||
changeLimit: number
|
||||
}
|
||||
|
||||
const { page, limit, total, changePage, changeLimit } = inject('paginate') as paginate
|
||||
</script>
|
||||
@ -1,63 +0,0 @@
|
||||
<template>
|
||||
<el-select v-bind="$attrs" class="w-full" clearable filterable>
|
||||
<el-option-group v-for="group in elOptions" :key="group.label" :label="group.label" v-if="group">
|
||||
<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-option-group>
|
||||
<el-option v-for="option in elOptions" :key="option.value" :label="option.label" :value="option.value" v-else>
|
||||
<slot />
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import http from '/admin/support/http'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
api: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
group: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
interface Option {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
|
||||
interface GroupOption {
|
||||
label: string
|
||||
options: Array<Option>
|
||||
}
|
||||
|
||||
const getOptions = () => {
|
||||
http.get('options/' + props.api, props.query).then(r => {
|
||||
elOptions.value = r.data.data
|
||||
})
|
||||
}
|
||||
|
||||
const elOptions: any = props.group ? ref<Array<GroupOption>>() : ref<Array<Option>>()
|
||||
if (props.api) {
|
||||
if (!props.query) {
|
||||
getOptions()
|
||||
} else {
|
||||
watch(props, function () {
|
||||
getOptions()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
elOptions.value = props.options
|
||||
}
|
||||
</script>
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<el-switch @change="enabled(api, id)" :active-value="activeValue" :inactive-value="inactiveValue" :model-value="modelValue" :loading="loading" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useEnabled } from '/admin/composables/curd/useEnabled'
|
||||
import { Status } from '/admin/enum/app'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: [Boolean, Number, String],
|
||||
api: {
|
||||
required: true,
|
||||
type: String,
|
||||
},
|
||||
id: {
|
||||
required: true,
|
||||
type: [String, Number],
|
||||
},
|
||||
})
|
||||
|
||||
const emits = defineEmits(['update:modelValue', 'refresh'])
|
||||
// @ts-ignore
|
||||
const { enabled, success, loading, afterEnabled } = useEnabled()
|
||||
|
||||
const activeValue = ref<boolean | number | string>()
|
||||
const inactiveValue = ref<boolean | number | string>()
|
||||
|
||||
if (typeof props.modelValue === 'boolean') {
|
||||
activeValue.value = true
|
||||
inactiveValue.value = false
|
||||
} else {
|
||||
activeValue.value = Status.ENABLE
|
||||
inactiveValue.value = Status.DISABLE
|
||||
}
|
||||
|
||||
success(() => {
|
||||
emits('update:modelValue', props.modelValue === activeValue.value ? inactiveValue.value : activeValue.value)
|
||||
})
|
||||
|
||||
afterEnabled.value = () => {
|
||||
emits('refresh')
|
||||
}
|
||||
</script>
|
||||
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<div class="pt-5 pl-2">
|
||||
<Add @click="show(showParams)" />
|
||||
<slot name="operate" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
show: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
|
||||
showParams: null,
|
||||
})
|
||||
</script>
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div class="w-full min-h-0 bg-white dark:bg-regal-dark pl-5 pt-5 pr-5 rounded-lg">
|
||||
<el-form :inline="true">
|
||||
<slot name="body" />
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search()">
|
||||
<Icon name="magnifying-glass" className="w-4 h-4 mr-1 -ml-1" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="reset()">
|
||||
<Icon name="arrow-path" className="w-4 h-4 mr-1 -ml-1" />
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
search: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
|
||||
reset: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-form-item) {
|
||||
min-width: 240px;
|
||||
}
|
||||
</style>
|
||||
@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:action="actionApi"
|
||||
:show-file-list="false"
|
||||
name="image"
|
||||
:auto-upload="auto"
|
||||
:headers="{ authorization: token, 'Request-from': 'Dashboard' }"
|
||||
v-bind="$attrs"
|
||||
:on-success="handleSuccess"
|
||||
>
|
||||
<template v-for="(index, name) in $slots" v-slot:[name]>
|
||||
<slot :name="name"></slot>
|
||||
</template>
|
||||
<img :src="modelValue" v-if="modelValue" :class="imageClass" />
|
||||
<div v-else class="w-24 h-24 border-blue-100 border-dashed border rounded flex justify-center pt-8">
|
||||
<Icon name="plus" />
|
||||
</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { env } from '/admin/support/helper'
|
||||
import { getAuthToken } from '/admin/support/helper'
|
||||
import { Code } from '/admin/enum/app'
|
||||
import Message from '/admin/support/message'
|
||||
|
||||
const props = defineProps({
|
||||
action: {
|
||||
type: String,
|
||||
default: 'upload/image',
|
||||
},
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
require: true,
|
||||
},
|
||||
imageClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
const baseURL = env('VITE_BASE_URL')
|
||||
|
||||
const actionApi = ref<string>('')
|
||||
|
||||
actionApi.value = baseURL + props.action
|
||||
|
||||
const token = ref<string>()
|
||||
token.value = 'Bearer ' + getAuthToken()
|
||||
|
||||
const handleSuccess = (response: any) => {
|
||||
if (response.code === Code.SUCCESS) {
|
||||
emits('update:modelValue', response.data.path)
|
||||
} else {
|
||||
Message.error(response.message)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<el-upload ref="upload" :action="action" :auto-upload="auto" v-bind="$attrs" :data="data" :before-upload="initOss" :on-success="handleSuccess">
|
||||
<template v-for="(index, name) in $slots" v-slot:[name]>
|
||||
<slot :name="name"></slot>
|
||||
</template>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import http from '/admin/support/http'
|
||||
import { ref } from 'vue'
|
||||
import Message from '/admin/support/message'
|
||||
const props = defineProps({
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
require: true,
|
||||
},
|
||||
})
|
||||
|
||||
const action = ref('')
|
||||
const data = ref({
|
||||
OSSAccessKeyId: '',
|
||||
policy: '',
|
||||
Signature: '',
|
||||
key: '',
|
||||
host: '',
|
||||
dir: '',
|
||||
expire: '',
|
||||
success_action_status: 200,
|
||||
})
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
const initOss = async (file: { size: number; name: any }) => {
|
||||
if (file.size > 10 * 1024 * 1024) {
|
||||
Message.error('最大支持 10MB 文件')
|
||||
return
|
||||
}
|
||||
|
||||
await http.get('upload/oss').then(r => {
|
||||
const { accessKeyId, bucket, dir, expire, host, policy, signature, url } = r.data.data
|
||||
action.value = host
|
||||
data.value.OSSAccessKeyId = accessKeyId
|
||||
data.value.policy = policy
|
||||
data.value.Signature = signature
|
||||
data.value.key = dir + file.name
|
||||
data.value.host = host
|
||||
data.value.dir = dir
|
||||
data.value.expire = expire
|
||||
})
|
||||
}
|
||||
|
||||
const handleSuccess = (r: any) => {
|
||||
emits('update:modelValue', action.value + data.value.key)
|
||||
}
|
||||
</script>
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<el-breadcrumb separator="/" class="flex sm:text-sm lg:text-base">
|
||||
<transition-group name="breadcrumb">
|
||||
<!--<el-breadcrumb-item :to="{ path: '/' }" class="text-blue=">Dashboard</el-breadcrumb-item>-->
|
||||
|
||||
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index" class="text">{{ item }}</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import router from '/admin/router'
|
||||
import { watch, onMounted, ref } from 'vue'
|
||||
import { useAppStore } from '/admin/stores/modules/app'
|
||||
import { RouteLocationNormalizedLoaded } from 'vue-router'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const breadcrumbs = ref<string[]>([])
|
||||
|
||||
// 监听当前路由的变化
|
||||
watch(router.currentRoute, (newValue, oldValue) => {
|
||||
// 激活菜单
|
||||
if (newValue.meta.active_menu) {
|
||||
appStore.setActiveMenu(newValue.meta.active_menu as string)
|
||||
}
|
||||
setActiveMenu(newValue)
|
||||
getBreadcrumbs(newValue)
|
||||
})
|
||||
|
||||
// get init breadcrumb
|
||||
onMounted(() => {
|
||||
setActiveMenu(router.currentRoute.value)
|
||||
getBreadcrumbs(router.currentRoute.value)
|
||||
})
|
||||
|
||||
const setActiveMenu = (route: RouteLocationNormalizedLoaded) => {
|
||||
if (route.path !== '/') {
|
||||
// 如果是内页，并且设置激活菜单
|
||||
if (route.meta.active_menu) {
|
||||
appStore.setActiveMenu(route.meta.active_menu as string)
|
||||
} else {
|
||||
appStore.setActiveMenu(route.path)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// get breadcrums
|
||||
function getBreadcrumbs(newRoute: RouteLocationNormalizedLoaded) {
|
||||
breadcrumbs.value = []
|
||||
breadcrumbs.value.push('首页')
|
||||
newRoute.matched.forEach(m => {
|
||||
if (m.meta.title !== undefined) {
|
||||
breadcrumbs.value.push(m.meta?.title as string)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 1s linear;
|
||||
}
|
||||
|
||||
.breadcrumb-leave-to {
|
||||
opacity: 0;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
.el-breadcrumb {
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@ -1,158 +0,0 @@
|
||||
<template>
|
||||
<el-form :class="schema.class" :model="formValues" :label-width="schema.labelWidth || 100" :label-position="schema.labelAlign || 'right'" :size="schema.size || 'default'" :disabled="schema.disabled" :hide-required-asterisk="schema.hideRequiredAsterisk" ref="formRef" v-bind="$attrs">
|
||||
<FormRender :formItems="formItems" />
|
||||
<slot name="body"/>
|
||||
<FormItem v-bind="footer" />
|
||||
<slot name="footer"/>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, reactive, provide, watch, onMounted } from 'vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { handleLinkages, deepParse, setDataByPath, getDataByPath } from '/admin/components/catchForm/support'
|
||||
import FormRender from './FormRender.vue'
|
||||
import FormItem from './FormItem.vue'
|
||||
import { cloneDeep, merge } from 'lodash'
|
||||
import type { anyObject, schemaType } from '/admin/components/catchForm/config/commonType'
|
||||
import { $schema, $formValues, $selectData, $formEvents, $initialValues } from '/admin/components/catchForm/config/symbol'
|
||||
|
||||
const props = defineProps<
|
||||
Readonly<{
|
||||
schema: schemaType
|
||||
schemaContext?: anyObject
|
||||
}>
|
||||
>()
|
||||
|
||||
const modelValue = defineModel()
|
||||
const emit = defineEmits<{
|
||||
onChange: [values: anyObject]
|
||||
onSubmit: [values: anyObject]
|
||||
onSubmitFailed: [e: anyObject]
|
||||
}>()
|
||||
const formRef = ref<FormInstance>()
|
||||
const selectData = reactive({})
|
||||
const initialValues = reactive({})
|
||||
const stateFormValues = ref({})
|
||||
|
||||
const formValues = computed({
|
||||
get() {
|
||||
return modelValue.value || stateFormValues.value
|
||||
},
|
||||
set(values) {
|
||||
modelValue.value = values
|
||||
stateFormValues.value = values
|
||||
}
|
||||
})
|
||||
|
||||
const context = computed(() => ({
|
||||
$values: formValues.value,
|
||||
$selectData: selectData,
|
||||
$initialValues: initialValues,
|
||||
...props.schemaContext
|
||||
}))
|
||||
|
||||
const formItems = computed(() => deepParse(props.schema.items || [], context.value))
|
||||
|
||||
// 保持schema的响应 传递给后代使用
|
||||
const currentSchema = computed(() => props.schema)
|
||||
|
||||
// 表单底部
|
||||
const defaultFooter = {
|
||||
name: 'FormFooter',
|
||||
props: {
|
||||
class: 'flex justify-end mt-4'
|
||||
},
|
||||
component: 'inline',
|
||||
children: [
|
||||
{
|
||||
name: 'divider_xAlcpi',
|
||||
props: {
|
||||
name: '提交',
|
||||
clickEvent: 'submitForm'
|
||||
},
|
||||
component: 'button',
|
||||
style: 'margin-right:10px'
|
||||
},
|
||||
{
|
||||
name: 'divider_UktsYm',
|
||||
props: {
|
||||
name: '重置',
|
||||
clickEvent: 'resetForm',
|
||||
type: 'default'
|
||||
},
|
||||
component: 'button'
|
||||
}
|
||||
]
|
||||
}
|
||||
const footer = computed(() => props.schema.footer || defaultFooter)
|
||||
const validate = () => formRef.value?.validate()
|
||||
|
||||
const submit = async () => {
|
||||
try {
|
||||
await validate()
|
||||
emit('onSubmit', formValues.value)
|
||||
return formValues.value
|
||||
} catch (e: any) {
|
||||
emit('onSubmitFailed', e)
|
||||
return Promise.reject(e)
|
||||
}
|
||||
}
|
||||
|
||||
const getFormValues = () => ({ ...formValues.value })
|
||||
const setFormValues = (values: anyObject) => {
|
||||
formValues.value = { ...formValues.value, ...values }
|
||||
}
|
||||
|
||||
const resetFields = (names: string[]) => {
|
||||
if (names) {
|
||||
let temp = cloneDeep(formValues.value)
|
||||
|
||||
names.forEach(name => {
|
||||
temp = setDataByPath(temp, name, getDataByPath(initialValues, name))
|
||||
})
|
||||
|
||||
formValues.value = temp
|
||||
|
||||
} else {
|
||||
formValues.value = initialValues
|
||||
}
|
||||
|
||||
clearValidate();
|
||||
}
|
||||
// 这里做一个魔法操作，分栏操作，导致第二栏没有办法初始化，所以 resetFields 下
|
||||
// 只有创建的时候进行该操作
|
||||
onMounted(() => {
|
||||
resetFields([]);
|
||||
})
|
||||
// const reset validates
|
||||
const clearValidate = () => {
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
watch(
|
||||
formValues,
|
||||
(newVal, oldVal) => {
|
||||
emit('onChange', newVal)
|
||||
handleLinkages({ newVal, oldVal, formValues, formItems: formItems.value })
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
watch(initialValues, newVal => {
|
||||
formValues.value = merge(formValues.value, newVal)
|
||||
})
|
||||
|
||||
provide($schema, currentSchema)
|
||||
provide($formValues, {
|
||||
formValues,
|
||||
updateFormValues: (values: anyObject) => (formValues.value = values)
|
||||
})
|
||||
provide($selectData, selectData)
|
||||
provide($formEvents, { submit, validate, getFormValues, setFormValues, resetFields })
|
||||
provide($initialValues, {
|
||||
initialValues,
|
||||
updateInitialValues: (values: anyObject) => Object.assign(initialValues, values)
|
||||
})
|
||||
|
||||
defineExpose({ submit, validate, getFormValues, setFormValues, resetFields, context })
|
||||
</script>
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div v-if="disabled" v-bind="$attrs" class="disabled-wrapper">
|
||||
<div class="mask"></div>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<template v-else> <slot /> </template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
disabled: Boolean
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.disabled-wrapper {
|
||||
background-color: var(--el-disabled-bg-color);
|
||||
position: relative;
|
||||
.mask {
|
||||
cursor: not-allowed;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,193 +0,0 @@
|
||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
||||
<template>
|
||||
<template v-if="!hidden">
|
||||
<div v-if="config.type === 'layout'" :style="itemStyle" :class="thisProps.class">
|
||||
<component :is="config.component" :name="name" :props="props" :children="children" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="config.type === 'assist'" :style="itemStyle" :class="thisProps.class">
|
||||
<component :is="config.component" v-bind="props" />
|
||||
</div>
|
||||
|
||||
<el-form-item v-else id="form-item" :style="itemStyle" :label="label" :key="name" :prop="name" :rules="computeRules" :class="thisProps.class">
|
||||
<!--<template #label v-if="!hideLabel">
|
||||
<div class="form-item-label">
|
||||
<div >{{ label }}</div>
|
||||
<div class="ico" v-if="help">
|
||||
<el-tooltip class="box-item" effect="dark" :content="help">
|
||||
<div><icon-render name="help" /></div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>-->
|
||||
<component :is="config.component" :class="formItemProps.class" :disabled="schema.disabled" :size="schema.size" v-bind="formItemProps" v-model:[config.modelName]="value" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, inject, nextTick, onMounted, ref } from 'vue'
|
||||
import { isArray, isString } from 'lodash'
|
||||
import { isRegexString, getDataByPath, setDataByPath } from '/admin/components/catchForm/support'
|
||||
import { $global, $schema, $formValues, $initialValues } from '/admin/components/catchForm/config/symbol'
|
||||
import type { formItemType, changeItemType, schemaType, anyObject, $globalType } from '/admin/components/catchForm/config/commonType'
|
||||
import defaultElements from '/admin/components/catchForm/components'
|
||||
|
||||
type FormItemProps = {
|
||||
label?: string
|
||||
name: string
|
||||
component: string
|
||||
required?: boolean
|
||||
props?: object
|
||||
initialValue?: any
|
||||
help?: string
|
||||
children?: formItemType[]
|
||||
hidden?: boolean | string
|
||||
hideLabel?: boolean
|
||||
rules?: any[]
|
||||
// eslint-disable-next-line vue/no-reserved-props
|
||||
class?: string
|
||||
// eslint-disable-next-line vue/no-reserved-props
|
||||
style?: any
|
||||
change?: changeItemType[]
|
||||
}
|
||||
|
||||
const thisProps = defineProps<FormItemProps>()
|
||||
|
||||
const { elements = {} } = inject<$globalType>($global, { elements: defaultElements })
|
||||
|
||||
const schema = inject<schemaType>($schema)
|
||||
|
||||
const { formValues, updateFormValues } = inject($formValues, {
|
||||
formValues: ref({}),
|
||||
updateFormValues: (values: anyObject) => {
|
||||
console.log(values)
|
||||
}
|
||||
})
|
||||
|
||||
const { initialValues, updateInitialValues } = inject($initialValues, {
|
||||
initialValues: {},
|
||||
updateInitialValues: (values: anyObject) => {
|
||||
console.log(values)
|
||||
}
|
||||
})
|
||||
|
||||
const value = computed({
|
||||
get() {
|
||||
return getDataByPath(formValues.value, thisProps.name)
|
||||
},
|
||||
set(val) {
|
||||
const newValues = setDataByPath(formValues.value, thisProps.name, val)
|
||||
|
||||
updateFormValues(newValues)
|
||||
}
|
||||
})
|
||||
|
||||
const itemStyle = computed(() => ({
|
||||
// marginBottom: thisProps.design ? 0 : '18px',
|
||||
...thisProps.style
|
||||
}))
|
||||
|
||||
const computeRules = computed(() => {
|
||||
const { rules, required } = thisProps
|
||||
|
||||
const ruleData = []
|
||||
|
||||
if (required) {
|
||||
ruleData.push({ required: true, message: '该字段是必填字段', trigger: 'blur' })
|
||||
}
|
||||
|
||||
if (rules) {
|
||||
const ruleParse = rules.map(({ type, message, trigger, customReg }) => {
|
||||
const ruleDef = {
|
||||
message,
|
||||
trigger
|
||||
}
|
||||
if (['email', 'url'].includes(type)) {
|
||||
return { ...ruleDef, type }
|
||||
}
|
||||
if (type === 'custom') {
|
||||
return {
|
||||
...ruleDef,
|
||||
pattern: customReg
|
||||
}
|
||||
}
|
||||
if (isRegexString(type)) {
|
||||
return {
|
||||
...ruleDef,
|
||||
pattern: type
|
||||
}
|
||||
}
|
||||
return {}
|
||||
})
|
||||
return [...ruleData, ...ruleParse]
|
||||
}
|
||||
|
||||
return ruleData
|
||||
})
|
||||
|
||||
const currentComponent = computed(() => {
|
||||
if (isString(value.value) && /^{{\s*(.*?)\s*}}$/.test(value.value)) {
|
||||
return 'input'
|
||||
}
|
||||
|
||||
return thisProps.component
|
||||
})
|
||||
|
||||
const config = computed(() => {
|
||||
return elements[currentComponent.value] || {}
|
||||
})
|
||||
|
||||
const formItemProps = computed(() => {
|
||||
const initProps: anyObject = {
|
||||
...thisProps.props,
|
||||
name: thisProps.name
|
||||
}
|
||||
|
||||
if (thisProps.children) {
|
||||
initProps.children = thisProps.children
|
||||
}
|
||||
|
||||
return initProps
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (thisProps.initialValue !== undefined) {
|
||||
if (!value.value || (isArray(value.value) && value.value.length === 0)) {
|
||||
const newInitialValues = setDataByPath(initialValues, thisProps.name, thisProps.initialValue)
|
||||
updateInitialValues(newInitialValues)
|
||||
// select array value
|
||||
if (isArray(value.value)) {
|
||||
nextTick(() => {
|
||||
value.value = thisProps.initialValue
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
if (!value.value && thisProps.default !== undefined) {
|
||||
const newInitialValues = setDataByPath(initialValues, thisProps.name, thisProps.default)
|
||||
updateInitialValues(newInitialValues)
|
||||
}*/
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#form-item {
|
||||
.form-item-label {
|
||||
display: flex;
|
||||
position: relative;
|
||||
.ico {
|
||||
margin-left: 3px;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
.el-tooltip__trigger {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +0,0 @@
|
||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
||||
<template>
|
||||
<form-item v-for="item in formItems" :key="item.name" v-bind="item" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { formItemsType } from '/admin/components/catchForm/config/commonType'
|
||||
import FormItem from './FormItem.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
formItems: formItemsType
|
||||
}>()
|
||||
</script>
|
||||
@ -1,6 +0,0 @@
|
||||
import { ElAlert } from 'element-plus'
|
||||
export default {
|
||||
name: 'alert',
|
||||
component: ElAlert,
|
||||
type: 'assist'
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<el-button class="Button" v-bind="{ ...$attrs, ...props }" @click="onClick">{{ name }}</el-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject } from 'vue'
|
||||
import { ElButton } from 'element-plus'
|
||||
import { $formEvents } from '/admin/components/catchForm/config/symbol'
|
||||
|
||||
const formEvents = inject($formEvents)
|
||||
|
||||
const props = defineProps({
|
||||
name: String,
|
||||
disabled: Boolean,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
clickEvent: String,
|
||||
customEvent: Function,
|
||||
color: String
|
||||
})
|
||||
|
||||
const onClick = () => {
|
||||
if (props.clickEvent === 'submitForm') {
|
||||
formEvents.submit()
|
||||
}
|
||||
if (props.clickEvent === 'resetForm') {
|
||||
formEvents.resetFields()
|
||||
}
|
||||
if (props.clickEvent === 'custom') {
|
||||
props.customEvent()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.Button {
|
||||
/* background-color: v-bind(color); */
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
import Button from './Button.vue'
|
||||
|
||||
export default {
|
||||
name: 'button',
|
||||
component: Button,
|
||||
type: 'assist'
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<ElCard v-bind="{ ...props, ...$attrs }">
|
||||
<FormRender :formItems="children" />
|
||||
</ElCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElCard } from 'element-plus'
|
||||
import FormRender from '/admin/components/catchForm/FormRender.vue'
|
||||
|
||||
defineProps({
|
||||
props: Object,
|
||||
children: Array,
|
||||
design: Boolean
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.form-item-grid {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
import Card from './Card.vue'
|
||||
|
||||
export default {
|
||||
name: 'card',
|
||||
component: Card,
|
||||
type: 'layout'
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<el-cascader
|
||||
v-model="modelValue"
|
||||
:options="options"
|
||||
:show-all-levels="!takeLastLevel"
|
||||
:props="{
|
||||
multiple,
|
||||
value: valueKey,
|
||||
label,
|
||||
checkStrictly,
|
||||
}"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
checkStrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
valueKey: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
value: {
|
||||
type:[String, Number, Array],
|
||||
default: ''
|
||||
},
|
||||
api: Object,
|
||||
name: String,
|
||||
takeLastLevel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const modelValue = defineModel()
|
||||
onMounted(() => {
|
||||
modelValue.value = props.value
|
||||
})
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
import Cascader from './Cascader.vue'
|
||||
|
||||
export default {
|
||||
name: 'cascader',
|
||||
type: 'basic',
|
||||
component: Cascader
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<div v-if="!options.length" style="font-size: 12px">暂无选项</div>
|
||||
|
||||
<el-checkbox-group v-bind="$attrs" v-model="modelValue" @change="selectChange">
|
||||
<template v-if="optionType === 'circle' || optionType === 'border'">
|
||||
<el-checkbox v-for="item in options" :key="item[valueKey]" :value="item[valueKey]" :border="optionType === 'border'" :disabled="item.disabled">{{ item[label] }}</el-checkbox>
|
||||
</template>
|
||||
|
||||
<el-space v-if="optionType === 'button'" wrap :size="[space, space]">
|
||||
<el-checkbox-button v-for="item in options" :key="item[valueKey]" :value="item[valueKey]" size="large" :disabled="item.disabled">{{ item[label] }}</el-checkbox-button>
|
||||
</el-space>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'static'
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
valueKey: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
autoSelectedFirst: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
api: Object,
|
||||
name: String,
|
||||
optionType: {
|
||||
type: String,
|
||||
default: 'circle'
|
||||
},
|
||||
space: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true // 不可更改
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
})
|
||||
|
||||
// const emits = defineEmits(['update:modelValue', 'onChangeSelect'])
|
||||
const modelValue = defineModel()
|
||||
const selectChange = value => {
|
||||
modelValue.value = value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
modelValue.value = props.value
|
||||
})
|
||||
// const { selectVal, currentOptions, selectChange, loading } = useSelect(props, emits)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,7 +0,0 @@
|
||||
import Checkbox from './Checkbox.vue'
|
||||
|
||||
export default {
|
||||
name: 'checkbox',
|
||||
type: 'basic',
|
||||
component: Checkbox
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<ElCollapse v-bind="{ ...props, ...$attrs }" v-model="activeKey">
|
||||
<ElCollapseItem v-for="item in children" :key="item.name" :name="item.name">
|
||||
<template #title>
|
||||
<Title :title="item.title" italic type="h4" />
|
||||
</template>
|
||||
<FormRender :formItems="item.children" />
|
||||
</ElCollapseItem>
|
||||
</ElCollapse>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import FormRender from '/admin/components/catchForm/FormRender.vue'
|
||||
import Title from '../Title/Title.vue'
|
||||
const thisProps = defineProps({
|
||||
props: Object,
|
||||
children: Array
|
||||
})
|
||||
|
||||
const activeKey = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
activeKey.value = thisProps.children.filter(item => item.checked).map(item => item.name)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.form-item-grid {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
import Collapse from './Collapse.vue'
|
||||
|
||||
export default {
|
||||
name: 'collapse',
|
||||
component: Collapse,
|
||||
type: 'layout'
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const modelValue = defineModel()
|
||||
|
||||
onMounted(() => {
|
||||
modelValue.value = props.value
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-color-picker v-model="modelValue" v-bind="$attrs"/>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@ -1,6 +0,0 @@
|
||||
import { ElColorPicker } from 'element-plus'
|
||||
export default {
|
||||
name: 'color_picker',
|
||||
component: ElColorPicker,
|
||||
type: 'basic'
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<span class="empty" v-if="!componentName">请输入全局注册得组件名</span>
|
||||
<component v-else :is="componentName" v-model="value" v-bind="$attrs" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
defineProps({
|
||||
componentName: String,
|
||||
modelValue: null
|
||||
})
|
||||
|
||||
const modelValue = defineModel()
|
||||
|
||||
const value = computed({
|
||||
get() {
|
||||
return modelValue.value
|
||||
},
|
||||
set(val) {
|
||||
modelValue.value = val
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.empty {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +0,0 @@
|
||||
import Custom from './Custom.vue'
|
||||
|
||||
export default {
|
||||
name: 'custom',
|
||||
component: Custom,
|
||||
initialValues: {
|
||||
label: '自定义组件',
|
||||
component: 'Custom',
|
||||
props: {}
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { ElDatePicker } from 'element-plus'
|
||||
|
||||
export default {
|
||||
name: 'date_picker',
|
||||
component: ElDatePicker,
|
||||
type: 'basic'
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<ElDivider v-bind="$attrs">{{ title }}</ElDivider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElDivider } from 'element-plus'
|
||||
|
||||
defineProps({
|
||||
title: String
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,7 +0,0 @@
|
||||
import Divider from './Divider.vue'
|
||||
|
||||
export default {
|
||||
name: 'divider',
|
||||
component: Divider,
|
||||
type: 'assist'
|
||||
}
|
||||
@ -1,161 +0,0 @@
|
||||
<template>
|
||||
<div id="formList">
|
||||
<div>
|
||||
<template v-if="mode === 'inline'">
|
||||
<el-form-item v-for="(item, index) in list" :key="item.key" class="list-item">
|
||||
<div class="list-item-content">
|
||||
<el-space>
|
||||
<form-item v-for="field in fields(index)" v-bind="field" :key="field.label" :name="`${name}.${index}.${field.name}`" hideLabel />
|
||||
</el-space>
|
||||
|
||||
<el-button v-if="allowReduce" @click="handleReduceItem(index)" circle size="small" :disabled="disabled">
|
||||
<Icon name="minus"/>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-if="mode === 'card'">
|
||||
<el-card v-for="(item, index) in list" :key="item.key" class="list-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ title + (index + 1) }}</span>
|
||||
<el-button v-if="allowReduce" @click="handleReduceItem(index)" circle size="small" :disabled="disabled">
|
||||
<Icon name="minus"/>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<form-item v-for="field in fields(index)" v-bind="field" :key="field.label" class="list-card-item" :name="`${name}.${index}.${field.name}`" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<el-table v-if="mode === 'table' && list.length" :data="list" style="width: 100%">
|
||||
<el-table-column :prop="item.name" :label="item.label" :key="item.name" v-for="item in children" :width="item.width" :formatter="(row, _, __, index) => formatter(item, row, index)" />
|
||||
<el-table-column fixed="right" min-width="60">
|
||||
<template #default="record">
|
||||
<el-button v-if="allowReduce" @click="handleReduceItem(record.$index)" circle size="small" :disabled="disabled">
|
||||
<Icon name="minus"/>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div>
|
||||
<el-button v-if="allowAdd && !isMax" @click="handleAddItem" circle size="small" :disabled="disabled">
|
||||
<Icon name="plus"/>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, h } from 'vue'
|
||||
import FormItem from '/admin/components/catchForm/FormItem.vue'
|
||||
import { deepParse } from '/admin/components/catchForm/support'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Array,
|
||||
children: Array,
|
||||
allowAdd: {
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
allowReduce: {
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
defaultLineCount: {
|
||||
default: 0,
|
||||
type: Number
|
||||
},
|
||||
maxLines: {
|
||||
default: 999,
|
||||
type: Number
|
||||
},
|
||||
mode: {
|
||||
default: 'table',
|
||||
type: String
|
||||
},
|
||||
title: {
|
||||
default: '卡片',
|
||||
type: String
|
||||
},
|
||||
newItemDefaults: {
|
||||
type: Function,
|
||||
default: () => ({})
|
||||
},
|
||||
name: String,
|
||||
disabled: Boolean
|
||||
})
|
||||
|
||||
const modelValue = defineModel();
|
||||
|
||||
const list = computed(() => {
|
||||
return modelValue.value || []
|
||||
})
|
||||
|
||||
const fields = computed(() => index => deepParse(props.children, { $item: list.value[index], $index: index }))
|
||||
|
||||
const isMax = computed(() => {
|
||||
return list.value.length >= props.maxLines
|
||||
})
|
||||
|
||||
const handleAddItem = () => {
|
||||
if (isMax.value) {
|
||||
return
|
||||
}
|
||||
|
||||
modelValue.value = [...list.value, props.newItemDefaults(list.value.length)]
|
||||
}
|
||||
|
||||
const handleReduceItem = index => {
|
||||
const newData = list.value.filter((v, i) => i !== index)
|
||||
|
||||
modelValue.value = newData
|
||||
}
|
||||
|
||||
const formatter = (item, data, index) => {
|
||||
return h(FormItem, {
|
||||
...deepParse(item, { $item: list.value[index], $index: index }),
|
||||
hideLabel: true,
|
||||
style: { marginBottom: 0 },
|
||||
name: `${props.name}.${index}.${item.name}`
|
||||
})
|
||||
// return (
|
||||
// <FormItem
|
||||
// {...deepParse(item, { $item: list.value[index], $index: index })}
|
||||
// hideLabel
|
||||
// style={{ marginBottom: 0 }}
|
||||
// name={`${props.name}.${index}.${item.name}`}
|
||||
// />
|
||||
// )
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#formList {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.list-item {
|
||||
margin-bottom: 10px;
|
||||
.list-item-content {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.list-card {
|
||||
margin-bottom: 10px;
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.list-card-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.list-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
import FormList from './FormList.vue'
|
||||
|
||||
export default {
|
||||
name: 'form_list',
|
||||
component: FormList,
|
||||
type: 'high'
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div class="form-item-grid">
|
||||
<div :style="gridStyle">
|
||||
<FormRender :formItems="children" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import FormRender from '/admin/components/catchForm/FormRender.vue'
|
||||
|
||||
const thisProps = defineProps({
|
||||
name: String,
|
||||
props: Object,
|
||||
children: Array,
|
||||
design: Boolean
|
||||
})
|
||||
const gridStyle = computed(() => ({
|
||||
display: 'grid',
|
||||
'grid-template-columns': `repeat(${thisProps.props.columns}, 1fr)`,
|
||||
'row-gap': thisProps.props['row-gap'] + 'px',
|
||||
'column-gap': thisProps.props['column-gap'] + 'px'
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.form-item-grid {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.el-form-item__content {
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
import Grid from './Grid.vue'
|
||||
|
||||
export default {
|
||||
name: 'grid',
|
||||
type: 'layout',
|
||||
component: Grid
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<el-popover placement="right" :width="400" trigger="click">
|
||||
<template #reference>
|
||||
<el-input v-model="iconModel" name="icon" clearable />
|
||||
</template>
|
||||
<div>
|
||||
<Icons v-model="iconModel" @close="closeSelectIcon" />
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
const iconModel = defineModel()
|
||||
// 选择 icon
|
||||
const visible = ref(false)
|
||||
// 关闭选择 icon
|
||||
const closeSelectIcon = () => {
|
||||
visible.value = false
|
||||
}
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
import IconSelect from './IconSelect.vue'
|
||||
|
||||
export default {
|
||||
name: 'icon_select',
|
||||
type: 'basic',
|
||||
component: IconSelect
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<div class="form-item-inline">
|
||||
<div :class="InlineStyle">
|
||||
<FormRender :formItems="children" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import FormRender from '/admin/components/catchForm/FormRender.vue'
|
||||
|
||||
const thisProps = defineProps({
|
||||
name: String,
|
||||
props: Object,
|
||||
children: Array,
|
||||
class: String
|
||||
})
|
||||
const InlineStyle = computed(() => thisProps.props.class)
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
import Inline from './Inline.vue'
|
||||
|
||||
export default {
|
||||
name: 'inline',
|
||||
type: 'layout',
|
||||
component: Inline
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import { ElInput } from 'element-plus'
|
||||
import { h } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'input',
|
||||
component: h(ElInput, { showWordLimit: true, autocomplete: 'off' }),
|
||||
type: 'basic'
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<span id="NumberInput">
|
||||
<el-input-number v-bind="{ ...$attrs, ...props }" v-model="value" />
|
||||
<span class="unit" v-if="unit">{{ unit }} </span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { ElInputNumber } from 'element-plus'
|
||||
|
||||
const props = defineProps({
|
||||
unit: String,
|
||||
min: { type: Number, default: 0 },
|
||||
max: Number,
|
||||
disabled: Boolean,
|
||||
step: { type: Number, default: 1 }
|
||||
})
|
||||
|
||||
const modelValue = defineModel()
|
||||
|
||||
const value = computed({
|
||||
get() {
|
||||
return modelValue.value
|
||||
},
|
||||
set(val) {
|
||||
modelValue.value = val
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#NumberInput {
|
||||
position: relative;
|
||||
.unit {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
import InputNumber from './InputNumber.vue'
|
||||
|
||||
export default {
|
||||
name: 'input_number',
|
||||
type: 'basic',
|
||||
component: InputNumber
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import { ElInput } from 'element-plus'
|
||||
import { h } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'password',
|
||||
component: h(ElInput, { type: 'password', showWordLimit: true, autocomplete: 'off' }),
|
||||
type: 'basic'
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
||||
<template>
|
||||
<div v-if="!options.length" style="font-size: 12px">暂无选项</div>
|
||||
<el-radio-group v-model="modelValue" @change="clickRadio" v-bind="$attrs">
|
||||
<el-space wrap :direction="direction" :size="[space, space]" alignment="normal" v-if="space > 0">
|
||||
<template v-if="optionType === 'circle' || optionType === 'border'">
|
||||
<el-radio v-for="item in options" :key="item[value]" :value="item[value]" :border="optionType === 'border'">{{ item[label] }}</el-radio>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-radio-button v-for="item in options" :key="item[value]" :value="item[value]" :size="$attrs.size">{{ item[label] }} </el-radio-button>
|
||||
</template>
|
||||
</el-space>
|
||||
<div v-else>
|
||||
<template v-if="optionType === 'circle' || optionType === 'border'">
|
||||
<el-radio v-for="item in options" :key="item[value]" :value="item[value]" :border="optionType === 'border'">{{ item[label] }}</el-radio>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-radio-button v-for="item in options" :key="item[value]" :value="item[value]" :size="$attrs.size">{{ item[label] }} </el-radio-button>
|
||||
</template>
|
||||
</div>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// import { defineEmits } from 'vue'
|
||||
// import useSelect from '/admin/components/catchForm/hooks/useSelect'
|
||||
|
||||
defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
autoSelectedFirst: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
api: Object,
|
||||
name: String,
|
||||
optionType: {
|
||||
type: String,
|
||||
default: 'circle'
|
||||
},
|
||||
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
},
|
||||
space: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const modelValue = defineModel()
|
||||
const clickRadio = value => {
|
||||
modelValue.value = value
|
||||
}
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
import Radio from './Radio.vue'
|
||||
|
||||
export default {
|
||||
name: 'radio',
|
||||
type: 'basic',
|
||||
component: Radio
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { ElRate } from 'element-plus'
|
||||
|
||||
export default {
|
||||
name: 'rate',
|
||||
component: ElRate,
|
||||
type: 'basic'
|
||||
}
|
||||
@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<el-select v-bind="$attrs" class="w-full" clearable filterable :multiple="multiple" :value-key="valueKey" v-model="modelValue">
|
||||
<template v-if="group">
|
||||
<el-option-group v-for="group in elOptions" :key="group[label]" :label="group[label]">
|
||||
<el-option v-for="item in group.options" :key="item[valueKey]" :label="item[label]" :value="item[valueKey]" />
|
||||
</el-option-group>
|
||||
</template>
|
||||
<el-option v-for="option in elOptions" :key="option[valueKey]" :label="option[label]" :value="option[valueKey]" v-else>
|
||||
<slot />
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { inject, ref, watch } from 'vue'
|
||||
import { $global} from '/admin/components/catchForm/config/symbol'
|
||||
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
require: false,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
valueKey: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
api: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: ''
|
||||
},
|
||||
group: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
interface Option {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
|
||||
interface GroupOption {
|
||||
label: string
|
||||
options: Array<Option>
|
||||
}
|
||||
|
||||
const modelValue = defineModel()
|
||||
|
||||
const { http } = inject($global)
|
||||
const getOptions = () => {
|
||||
http.get(props.api, props.query).then(r => {
|
||||
elOptions.value = r.data.data
|
||||
})
|
||||
}
|
||||
|
||||
const elOptions: any = props.group ? ref<Array<GroupOption>>() : ref<Array<Option>>()
|
||||
if (props.api) {
|
||||
if (!props.query) {
|
||||
getOptions()
|
||||
} else {
|
||||
watch(props, function () {
|
||||
getOptions()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
elOptions.value = props.options
|
||||
}
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
import Select from './Select.vue'
|
||||
|
||||
export default {
|
||||
name: 'select',
|
||||
type: 'basic',
|
||||
component: Select
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user