remove vue
This commit is contained in:
JaguarJack
@@ -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
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { ElSlider } from 'element-plus'
|
||||
|
||||
export default {
|
||||
name: 'slider',
|
||||
component: ElSlider,
|
||||
type: 'basic'
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { ElSwitch } from 'element-plus'
|
||||
import cswitch from './index.vue'
|
||||
export default {
|
||||
name: 'switch',
|
||||
component: cswitch,
|
||||
type: 'basic'
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { before } from 'node:test'
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: [Boolean, String, Number],
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
defineOptions({
|
||||
name: 'cswitch'
|
||||
})
|
||||
|
||||
const valueModel = defineModel()
|
||||
onMounted(() => {
|
||||
valueModel.value = props.value
|
||||
})
|
||||
|
||||
const change = (val: any) => {
|
||||
valueModel.value = val
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-switch @change="change" v-model="valueModel"/>
|
||||
</template>
|
||||
@@ -1,8 +0,0 @@
|
||||
import { ElInput } from 'element-plus'
|
||||
import { h } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'textarea',
|
||||
component: h(ElInput, { type: 'textarea', showWordLimit: true, autocomplete: 'off' }),
|
||||
type: 'basic'
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<component :is="type" :class="class" :style="{ fontStyle: italic ? 'italic' : 'normal' }">{{
|
||||
title
|
||||
}}</component>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '这是一个标题'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'h3'
|
||||
},
|
||||
class: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
italic: Boolean
|
||||
})
|
||||
</script>
|
||||
@@ -1,7 +0,0 @@
|
||||
import Title from './Title.vue'
|
||||
|
||||
export default {
|
||||
name: 'title',
|
||||
component: Title,
|
||||
type: 'assist'
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<Disabled :disabled="disabled"> <ElTransfer v-bind="$attrs" v-model="modelValue" :data="options" :props="{ label: props.label, key: props.valueKey }" /></Disabled>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElTransfer } from 'element-plus'
|
||||
import Disabled from '/admin/components/catchForm/Disabled.vue'
|
||||
|
||||
const modelValue = defineModel()
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'static'
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
valueKey: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
api: Object,
|
||||
disabled: Boolean
|
||||
})
|
||||
|
||||
// const emits = defineEmits(['update:modelValue', 'onChangeSelect'])
|
||||
|
||||
// const { selectVal, currentOptions, selectChange, loading } = useSelect(props, emits)
|
||||
|
||||
// watchEffect(() => {
|
||||
// console.log(currentOptions.value)
|
||||
// })
|
||||
</script>
|
||||
@@ -1,7 +0,0 @@
|
||||
import Transfer from './Transfer.vue'
|
||||
|
||||
export default {
|
||||
name: 'transfer',
|
||||
type: 'basic',
|
||||
component: Transfer
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
<template>
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="data"
|
||||
:node-key="valueKey"
|
||||
:class="class"
|
||||
:props="{ label }"
|
||||
@check="selectPermissions"
|
||||
@node-click="nodeClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, onMounted, watch, inject } from 'vue'
|
||||
import { isArray } from 'lodash'
|
||||
import { $global} from '/admin/components/catchForm/config/symbol'
|
||||
|
||||
const tree = ref()
|
||||
const modelValue = defineModel()
|
||||
const currentCheckedKeys = ref<Array<number>|Array<string>|string|number>([])
|
||||
const data = ref<any>([])
|
||||
const { http } = inject($global)
|
||||
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'static'
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
valueKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
class: {
|
||||
type: String,
|
||||
default: 'w-full'
|
||||
},
|
||||
api: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
})
|
||||
|
||||
if (props.api) {
|
||||
http.get(props.api).then((r:any) => {
|
||||
data.value = r.data.data
|
||||
})
|
||||
} else {
|
||||
data.value = props.options
|
||||
}
|
||||
|
||||
// 设置已选权限
|
||||
const selectPermissions = (checkedNodes: any, checkedKeys: any) => {
|
||||
currentCheckedKeys.value = checkedKeys.checkedKeys.concat(checkedKeys.halfCheckedKeys).sort()
|
||||
tree.value.setCheckedKeys(checkedKeys.checkedKeys)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (tree.value) {
|
||||
if (isArray(modelValue.value)) {
|
||||
modelValue.value.forEach(id => {
|
||||
tree.value.setChecked(id, true, false)
|
||||
})
|
||||
} else {
|
||||
tree.value.setCurrentKey(modelValue.value, true, false);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const nodeClick = (node:any) => {
|
||||
currentCheckedKeys.value = node.id
|
||||
}
|
||||
// 监听选中的 checked
|
||||
watch(() => currentCheckedKeys.value, (newValue) => {
|
||||
modelValue.value = newValue
|
||||
}, {deep: true})
|
||||
</script>
|
||||
@@ -1,7 +0,0 @@
|
||||
import Tree from './Tree.vue'
|
||||
|
||||
export default {
|
||||
name: 'tree',
|
||||
type: 'basic',
|
||||
component: Tree
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<el-upload v-model:file-list="fileList" :action="action" :name="uploadKey" multiple :before-upload="beforeAvatarUpload" :limit="limit" :on-exceed="handleExceed" v-bind="$attrs">
|
||||
<el-button type="primary">
|
||||
<template #icon><IconRender name="upload" /></template>
|
||||
{{ buttonText }}
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onBeforeMount, computed } from 'vue'
|
||||
import { ElUpload, ElButton, ElMessage } from 'element-plus'
|
||||
|
||||
const props = defineProps({
|
||||
action: String,
|
||||
height: Number,
|
||||
width: Number,
|
||||
fileTypes: { type: Array, default: () => [] },
|
||||
size: Number,
|
||||
dataPath: {
|
||||
type: String,
|
||||
default: 'data'
|
||||
},
|
||||
uploadKey: {
|
||||
type: String,
|
||||
default: 'file'
|
||||
},
|
||||
buttonText: {
|
||||
type: String,
|
||||
default: '点击上传'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
})
|
||||
|
||||
const modelValue = defineModel({
|
||||
type: Array,
|
||||
required: true
|
||||
})
|
||||
|
||||
const fileList = computed({
|
||||
get() {
|
||||
return modelValue.value
|
||||
},
|
||||
set(val) {
|
||||
modelValue.value = val
|
||||
}
|
||||
})
|
||||
|
||||
const beforeAvatarUpload = rawFile => {
|
||||
const [, type] = rawFile.type.split('/')
|
||||
|
||||
// if (!props.fileTypes.includes(type)) {
|
||||
// ElMessage.error('不支持该图片格式!')
|
||||
// return false
|
||||
// }
|
||||
|
||||
if (rawFile.size / 1024 / 1024 > props.size) {
|
||||
ElMessage.error(`图片文件大小不能超过${props.size}MB！`)
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
const handleExceed = () => {
|
||||
ElMessage.warning(`上传数量限制为 ${props.limit} 个！`)
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
const { modelValue } = props
|
||||
|
||||
if (modelValue) {
|
||||
imageUrl.value = modelValue
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -1,7 +0,0 @@
|
||||
import Upload from './Upload.vue'
|
||||
|
||||
export default {
|
||||
name: 'upload',
|
||||
component: Upload,
|
||||
type: 'basic'
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue'
|
||||
import { uploadFile } from '/admin/composables/upload'
|
||||
const props = defineProps({
|
||||
action: {
|
||||
type: String
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'image'
|
||||
},
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// eslint-disable-next-line vue/no-reserved-props
|
||||
class: {
|
||||
type: String,
|
||||
default: 'w-24 h-24'
|
||||
},
|
||||
requestFrom: {
|
||||
type: String,
|
||||
default: 'Dashboard'
|
||||
},
|
||||
token:{
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
ext: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['docx', 'pdf', 'txt', 'html', 'zip', 'tar', 'doc', 'css', 'csv', 'ppt', 'xlsx', 'xls', 'xml']
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 定义文件 v-model
|
||||
const fileModel = defineModel({
|
||||
type: String,
|
||||
default: '',
|
||||
required: true
|
||||
})
|
||||
const { upload, beforeUpload, handleExceed, handleSuccess, file, filename} = uploadFile(props.action, props.ext)
|
||||
// 更新 model 的 value
|
||||
watch(
|
||||
() => file.value,
|
||||
(newValue, oldValue) => {
|
||||
fileModel.value = newValue
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:action="action"
|
||||
:show-file-list="false"
|
||||
:name="name"
|
||||
:on-exceed="handleExceed"
|
||||
:auto-upload="auto"
|
||||
:headers="{ authorization: token, 'Request-from': requestFrom }"
|
||||
v-bind="$attrs"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
:limit="1"
|
||||
>
|
||||
<div v-if="fileModel">
|
||||
{{ filename }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex items-center justify-center w-24 h-12 text-[14px] border border-blue-100 border-dashed rounded">
|
||||
<div>点击上传文件</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -1,7 +0,0 @@
|
||||
import UploadFile from './UploadFile.vue'
|
||||
|
||||
export default {
|
||||
name: 'upload_file',
|
||||
component: UploadFile,
|
||||
type: 'basic'
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { uploadFile } from '/admin/composables/upload'
|
||||
import { getFilename } from '/admin/support/helper'
|
||||
import { Plus, Delete } from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
action: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'image'
|
||||
},
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// eslint-disable-next-line vue/no-reserved-props
|
||||
class: {
|
||||
type: String,
|
||||
default: 'w-24 h-24'
|
||||
},
|
||||
requestFrom: {
|
||||
type: String,
|
||||
default: 'Dashboard'
|
||||
},
|
||||
token:{
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
ext: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['docx', 'pdf', 'txt', 'html', 'zip', 'tar', 'doc', 'css', 'csv', 'ppt', 'xlsx', 'xls', 'xml']
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 定义文件 v-model
|
||||
const filesModel = defineModel({
|
||||
type: Array,
|
||||
default: [],
|
||||
required: true
|
||||
})
|
||||
const files = ref([])
|
||||
|
||||
const { upload, beforeUpload, handleExceed, handleSuccess, file, filename} = uploadFile(props.action, props.ext)
|
||||
const delFile = (key: number) => {
|
||||
files.value = files.value.filter((item, index) => index !== key)
|
||||
filesModel.value = files.value
|
||||
}
|
||||
// 更新 model 的 value
|
||||
watch(
|
||||
() => file.value,
|
||||
(newValue, oldValue) => {
|
||||
files.value.push(newValue)
|
||||
}
|
||||
)
|
||||
|
||||
watch(() => files.value, (newValue, oldValue) => {
|
||||
filesModel.value = newValue
|
||||
}, { deep: true, immediate: true })
|
||||
</script>
|
||||
<template>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:action="action"
|
||||
multiple
|
||||
:show-file-list="false"
|
||||
:name="name"
|
||||
:auto-upload="auto"
|
||||
:headers="{ authorization: token, 'Request-from': requestFrom }"
|
||||
v-bind="$attrs"
|
||||
:on-exceed="handleExceed"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
>
|
||||
<div class="flex flex-col w-full">
|
||||
<div>
|
||||
<div class="flex items-center justify-center w-24 h-12 text-[14px] border border-blue-100 border-dashed rounded">
|
||||
<div>点击上传文件</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div v-for="(item, key) in files" :key="key" class="flex justify-between w-full">
|
||||
<div>{{ getFilename(item) }}</div>
|
||||
<div class="h-8 flex items-center ml-4"><el-icon @click.stop="delFile(key)" class="cursor-pointer"><Delete /></el-icon></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
import UploadFiles from './UploadFiles.vue'
|
||||
|
||||
export default {
|
||||
name: 'upload_files',
|
||||
component: UploadFiles,
|
||||
type: 'basic'
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<el-upload
|
||||
:action="action"
|
||||
:show-file-list="false"
|
||||
name="image"
|
||||
:auto-upload="auto"
|
||||
:headers="{ authorization: token, 'Request-from': requestFrom }"
|
||||
ref="upload"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="beforeUpload"
|
||||
:limit="1"
|
||||
>
|
||||
<img v-if="fileModel" :src="fileModel" :class="class" />
|
||||
<div v-else>
|
||||
<div class="flex items-center justify-center w-24 h-24 border border-collapse">
|
||||
<el-icon><Plus /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue'
|
||||
import { uploadImage } from '/admin/composables/upload'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
action: {
|
||||
type: String
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'image'
|
||||
},
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// eslint-disable-next-line vue/no-reserved-props
|
||||
class: {
|
||||
type: String,
|
||||
default: 'w-24 h-24'
|
||||
},
|
||||
requestFrom: {
|
||||
type: String,
|
||||
default: 'Dashboard'
|
||||
},
|
||||
token:{
|
||||
type: String
|
||||
},
|
||||
ext: {
|
||||
type: Array,
|
||||
default: () => ['jpg', 'jpeg', 'png', 'bmp', 'gif']
|
||||
}
|
||||
})
|
||||
|
||||
// 定义文件 v-model
|
||||
const fileModel = defineModel({
|
||||
type: String,
|
||||
default: '',
|
||||
required: true
|
||||
})
|
||||
const { upload, beforeUpload, handleExceed, handleSuccess, file } = uploadImage(props.action, props.ext)
|
||||
// 更新 model 的 value
|
||||
watch(
|
||||
() => file.value,
|
||||
(newValue, oldValue) => {
|
||||
fileModel.value = newValue
|
||||
}
|
||||
)
|
||||
</script>
|
||||
@@ -1,7 +0,0 @@
|
||||
import UploadImage from './UploadImage.vue'
|
||||
|
||||
export default {
|
||||
name: 'upload_image',
|
||||
component: UploadImage,
|
||||
type: 'basic'
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div v-for="(item, key) in images" :key="key" class="relative w-24 h-24 group">
|
||||
<img :src="item" class="w-full h-full" />
|
||||
<div class="w-full h-full absolute top-0 left-0 bg-black bg-opacity-50 z-10 hidden group-hover:block" >
|
||||
</div>
|
||||
<div class="absolute top-9 left-10 text-white z-50" >
|
||||
<el-icon @click.prevent="delImage(key)" class="cursor-pointer"><Delete /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-upload
|
||||
:action="action"
|
||||
:show-file-list="false"
|
||||
:name="name"
|
||||
multiple
|
||||
:headers="{ authorization: token, 'Request-from': requestFrom }"
|
||||
ref="upload"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<div class="flex items-center justify-center w-24 h-24 border border-collapse">
|
||||
<el-icon><Plus /></el-icon>
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { uploadImage } from '/admin/composables/upload'
|
||||
import { Plus, Delete } from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
action: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'image'
|
||||
},
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// eslint-disable-next-line vue/no-reserved-props
|
||||
class: {
|
||||
type: String,
|
||||
default: 'w-24 h-24 p-2'
|
||||
},
|
||||
requestFrom: {
|
||||
type: String,
|
||||
default: 'Dashboard'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
token:{
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
ext: {
|
||||
type: Array,
|
||||
default: () => ['jpg', 'jpeg', 'png', 'bmp', 'gif']
|
||||
}
|
||||
})
|
||||
|
||||
// 定义文件 v-model
|
||||
const filesModel = defineModel({
|
||||
type: Array<String>,
|
||||
default: [],
|
||||
required: true
|
||||
})
|
||||
const images = ref([])
|
||||
const { upload, beforeUpload, handleExceed, handleSuccess, file } = uploadImage(props.action, props.ext)
|
||||
const delImage = (key: number) => {
|
||||
images.value = images.value.filter((item, index) => index !== key)
|
||||
filesModel.value = images.value
|
||||
}
|
||||
// 更新 model 的 value
|
||||
watch(
|
||||
() => file.value,
|
||||
(newValue, oldValue) => {
|
||||
images.value.push(newValue)
|
||||
}
|
||||
)
|
||||
|
||||
watch(() => images.value, (newValue, oldValue) => {
|
||||
filesModel.value = newValue
|
||||
}, { deep: true, immediate: true })
|
||||
</script>
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
import UploadImages from './UploadImages.vue'
|
||||
|
||||
export default {
|
||||
name: 'upload_images',
|
||||
component: UploadImages,
|
||||
type: 'basic'
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import type { formElement } from '/admin/components/catchForm/config/commonType'
|
||||
|
||||
const modules = import.meta.glob('./*/index.ts', { eager: true })
|
||||
const components: { [component: string]: formElement } = {}
|
||||
|
||||
for (const path in modules) {
|
||||
const data = (modules[path] as { default: formElement }).default
|
||||
if (data) {
|
||||
components[data.name] = data
|
||||
}
|
||||
}
|
||||
export default components
|
||||
@@ -1,64 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
label: 'url',
|
||||
component: 'Input',
|
||||
name: 'props.api.url',
|
||||
initialValue: '/current/query/article',
|
||||
designKey: 'form-UrE8'
|
||||
},
|
||||
{
|
||||
label: '请求方式',
|
||||
component: 'Radio',
|
||||
name: 'props.api.method',
|
||||
props: {
|
||||
mode: 'static',
|
||||
autoSelectedFirst: true,
|
||||
options: [
|
||||
{
|
||||
label: 'GET',
|
||||
value: 'GET'
|
||||
},
|
||||
{
|
||||
label: 'POST',
|
||||
value: 'POST'
|
||||
},
|
||||
{
|
||||
label: 'PUT',
|
||||
value: 'PUT'
|
||||
},
|
||||
{
|
||||
label: 'DELETE',
|
||||
value: 'DELETE'
|
||||
}
|
||||
]
|
||||
},
|
||||
designKey: 'form-nOpD'
|
||||
},
|
||||
{
|
||||
label: '请求参数',
|
||||
component: 'JsonEdit',
|
||||
name: 'props.api.params',
|
||||
hidden: '{{ ["POST","PUT"].includes($values.props.api.method) }}',
|
||||
initialValue: {},
|
||||
props: {
|
||||
mode: 'dialog'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '请求参数',
|
||||
component: 'JsonEdit',
|
||||
name: 'props.api.data',
|
||||
hidden: '{{ ["GET","DELETE"].includes($values.props.api.method) }}',
|
||||
initialValue: {},
|
||||
props: {
|
||||
mode: 'dialog'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '数据路径',
|
||||
component: 'Input',
|
||||
name: 'props.api.dataPath',
|
||||
initialValue: 'data',
|
||||
designKey: 'form-UrE8'
|
||||
}
|
||||
]
|
||||
@@ -1,47 +0,0 @@
|
||||
import { recursionDelete } from '/admin/components/catchForm/support'
|
||||
|
||||
const basicAttr = (omit = [], moreAttrs = []) => {
|
||||
const attr = [
|
||||
{ label: '标签', component: 'Input', name: 'label' },
|
||||
{
|
||||
label: '唯一标识',
|
||||
component: 'Input',
|
||||
name: 'name',
|
||||
help: "既是唯一标识，也是数据路径。比如输入【props.name】，数据就会保存为 { props: { name:'xxx' } }"
|
||||
},
|
||||
{ label: '字段说明', component: 'Textarea', name: 'help' },
|
||||
{
|
||||
label: '占位提示',
|
||||
component: 'Input',
|
||||
name: 'props.placeholder',
|
||||
designKey: 'form-ekRL'
|
||||
},
|
||||
{ label: '初始值', component: 'Input', name: 'initialValue' },
|
||||
{
|
||||
component: 'Grid',
|
||||
children: [
|
||||
{ label: '是否必填', component: 'Switch', name: 'required' },
|
||||
{ label: '是否只读', component: 'Switch', name: 'props.readonly' },
|
||||
{ label: '是否禁用', component: 'Switch', name: 'props.disabled' },
|
||||
{ label: '隐藏字段', component: 'Switch', name: 'hidden' },
|
||||
{ label: '隐藏标签', component: 'Switch', name: 'hideLabel' }
|
||||
],
|
||||
props: {
|
||||
columns: 3,
|
||||
'row-gap': 0,
|
||||
'column-gap': 20
|
||||
},
|
||||
designKey: 'form-R003',
|
||||
name: 'cNmCuu',
|
||||
style: {
|
||||
marginBottom: 0
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const omitAttrs = recursionDelete(attr, (item) => !omit.includes(item.name))
|
||||
|
||||
return [...omitAttrs, ...moreAttrs]
|
||||
}
|
||||
|
||||
export default basicAttr
|
||||
@@ -1,18 +0,0 @@
|
||||
const basicAttr = (omit = []) => {
|
||||
const attr = [
|
||||
{ label: '自定义class', component: 'Input', name: 'props.class' },
|
||||
{
|
||||
label: '自定义style',
|
||||
component: 'JsonEdit',
|
||||
name: 'props.style',
|
||||
help: '与vue的style对象格式一样',
|
||||
props: {
|
||||
mode: 'dialog'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
return attr.filter((item) => !omit.includes(item.name))
|
||||
}
|
||||
|
||||
export default basicAttr
|
||||
@@ -1,6 +0,0 @@
|
||||
export { default as basicAttr } from './basicAttr'
|
||||
export { default as highAttr } from './highAttr'
|
||||
export { default as apiAttr } from './apiAttr'
|
||||
export { default as linkageAttr } from './linkageAttr'
|
||||
export { default as optionAttr } from './optionAttr'
|
||||
export { default as mergeAttr } from './mergeAttr'
|
||||
@@ -1,36 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
component: 'Alert',
|
||||
props: {
|
||||
type: 'success',
|
||||
description: '对于配置级的联动，请直接点击下方按钮【编辑配置文本】，通过插值表达式实现',
|
||||
closable: true,
|
||||
'show-icon': true
|
||||
},
|
||||
designKey: 'design-MQPU',
|
||||
name: 'form-Oqi5'
|
||||
},
|
||||
{
|
||||
label: '值联动',
|
||||
help: '本字段值改变时，修改其他字段的值',
|
||||
name: 'change',
|
||||
component: 'FormList',
|
||||
children: [
|
||||
{
|
||||
label: '目标字段',
|
||||
name: 'target',
|
||||
component: 'Input',
|
||||
props: {}
|
||||
},
|
||||
{
|
||||
label: '值',
|
||||
name: 'value',
|
||||
component: 'Input',
|
||||
props: {}
|
||||
}
|
||||
],
|
||||
props: {
|
||||
mode: 'card'
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -1,32 +0,0 @@
|
||||
const mergeAttr = (attrConfig) => {
|
||||
const { basic = [], high = [], linkage = [] } = attrConfig
|
||||
|
||||
const attrs = [
|
||||
{
|
||||
component: 'Collapse',
|
||||
name: 'mergeAttr',
|
||||
children: [
|
||||
{
|
||||
title: '常用属性',
|
||||
name: 'basic',
|
||||
checked: true,
|
||||
children: basic
|
||||
},
|
||||
{
|
||||
title: '高级属性',
|
||||
name: 'high',
|
||||
children: high
|
||||
},
|
||||
{
|
||||
title: '联动规则',
|
||||
name: 'linkage',
|
||||
children: linkage
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
return attrs
|
||||
}
|
||||
|
||||
export default mergeAttr
|
||||
@@ -1,91 +0,0 @@
|
||||
import apiAttr from './apiAttr'
|
||||
|
||||
export default [
|
||||
{
|
||||
component: 'Divider',
|
||||
props: {
|
||||
title: '选项设置',
|
||||
contentPosition: 'center'
|
||||
},
|
||||
designKey: 'design-gSnX',
|
||||
name: 'form-xDEe',
|
||||
style: {
|
||||
marginTop: '40px'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '标签key',
|
||||
component: 'Input',
|
||||
name: 'props.labelKey',
|
||||
designKey: 'form-X6hs'
|
||||
},
|
||||
{
|
||||
label: '值Key',
|
||||
component: 'Input',
|
||||
name: 'props.valueKey',
|
||||
designKey: 'form-STkl'
|
||||
},
|
||||
{
|
||||
label: '数据模式',
|
||||
component: 'Radio',
|
||||
name: 'props.mode',
|
||||
props: {
|
||||
mode: 'static',
|
||||
options: [
|
||||
{
|
||||
label: '静态',
|
||||
value: 'static'
|
||||
},
|
||||
{
|
||||
label: '远程',
|
||||
value: 'remote'
|
||||
}
|
||||
],
|
||||
optionType: 'button',
|
||||
space: 0
|
||||
},
|
||||
designKey: 'form-PLpj'
|
||||
},
|
||||
{
|
||||
label: '静态选项',
|
||||
name: 'props.options',
|
||||
component: 'FormList',
|
||||
hidden: '{{$values.props.mode!=="static"}}',
|
||||
children: [
|
||||
{
|
||||
label: '选项名',
|
||||
name: '{{$values.props.labelKey}}',
|
||||
component: 'Input',
|
||||
props: {
|
||||
placeholder: '请输入...'
|
||||
},
|
||||
designKey: 'form-LnGh'
|
||||
// initialValue: "{{ '选项' + ($index+1) }}"
|
||||
},
|
||||
{
|
||||
label: '选项值',
|
||||
name: '{{$values.props.valueKey}}',
|
||||
component: 'Input',
|
||||
props: {},
|
||||
designKey: 'form-HYtW'
|
||||
// initialValue: "{{ 'value' + ($index+1) }}"
|
||||
}
|
||||
],
|
||||
designKey: 'form-Iwpd',
|
||||
props: {
|
||||
mode: 'table',
|
||||
newItemDefaults:
|
||||
'{{ (index) => ({ [$values.props.labelKey]: `选项${index + 1}`, [$values.props.valueKey]: `value${index + 1}` }) }}'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Card',
|
||||
props: {
|
||||
// header: '远程数据'
|
||||
},
|
||||
designKey: 'id-pGeN',
|
||||
name: 'form-6vzT',
|
||||
hidden: '{{$values.props.mode==="static"}}',
|
||||
children: apiAttr
|
||||
}
|
||||
]
|
||||
@@ -1,70 +0,0 @@
|
||||
type anyObject = { [key: string]: any }
|
||||
|
||||
type formValuesType = anyObject
|
||||
|
||||
type contextType = {
|
||||
$values: formValuesType
|
||||
$selectData: formValuesType
|
||||
$initialValues: formValuesType
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
type changeItemType = {
|
||||
target: string
|
||||
value: any
|
||||
}
|
||||
|
||||
interface formItemType {
|
||||
label?: string
|
||||
name: string
|
||||
component: string
|
||||
required?: boolean
|
||||
props?: object
|
||||
default?: any
|
||||
help?: string
|
||||
children?: formItemType[]
|
||||
hidden?: boolean | string
|
||||
hideLabel?: boolean
|
||||
rules?: any[]
|
||||
class?: string
|
||||
style?: any
|
||||
change?: changeItemType[]
|
||||
footer: formItemType
|
||||
}
|
||||
|
||||
type formItemsType = formItemType[]
|
||||
|
||||
type schemaType = {
|
||||
labelWidth: number
|
||||
labelAlign: string
|
||||
size: string
|
||||
footer: Object
|
||||
class?: string
|
||||
disabled?: boolean
|
||||
hideRequiredAsterisk?: boolean
|
||||
labelBold?: boolean
|
||||
items: formItemsType
|
||||
}
|
||||
|
||||
type formElement = {
|
||||
name: string
|
||||
component: any
|
||||
icon: string
|
||||
type: 'assist' | 'layout' | 'basic' | 'high'
|
||||
order: number
|
||||
attr: formItemsType
|
||||
initialValues: formItemType
|
||||
modelName: string
|
||||
}
|
||||
|
||||
type iconSelectConfigType = { component?: any; propKey?: string; iconList?: string[] }
|
||||
|
||||
type $globalType = {
|
||||
http?: any
|
||||
getSchema?: (schemaId: string) => Promise<schemaType>
|
||||
elements?: { [key: string]: formElement }
|
||||
iconSelectConfig?: iconSelectConfigType
|
||||
customElements?: { [key: string]: formElement }
|
||||
}
|
||||
|
||||
export type { anyObject, schemaType, formValuesType, contextType, formItemType, formItemsType, formElement, changeItemType, $globalType, iconSelectConfigType }
|
||||
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable symbol-description */
|
||||
export const $global = Symbol()
|
||||
export const $schema = Symbol()
|
||||
export const $formValues = Symbol()
|
||||
export const $selectData = Symbol()
|
||||
export const $formEvents = Symbol()
|
||||
export const $initialValues = Symbol()
|
||||
export const $current = Symbol()
|
||||
export const $methods = Symbol()
|
||||
export const $hoverKey = Symbol()
|
||||
@@ -1,2 +0,0 @@
|
||||
export { default as selectLoadMore } from './selectLoadMore'
|
||||
export { default as tableLoadMore } from './tableLoadMore'
|
||||
@@ -1,23 +0,0 @@
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
const loadMore = (app) => {
|
||||
app.directive('selectLoadMore', {
|
||||
mounted: function (el, binding) {
|
||||
nextTick(() => {
|
||||
const dropdown = document.querySelector(`.${binding.arg} .el-select-dropdown__wrap`) // 获取下拉框元素
|
||||
|
||||
if (dropdown) {
|
||||
dropdown.addEventListener('scroll', function () {
|
||||
// 监听元素触底
|
||||
const condition = this.scrollHeight - this.scrollTop - 5 <= this.clientHeight
|
||||
if (condition) {
|
||||
binding.value()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default loadMore
|
||||
@@ -1,20 +0,0 @@
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
const loadMore = app => {
|
||||
app.directive('tableLoadMore', {
|
||||
mounted: function (el, binding) {
|
||||
nextTick(() => {
|
||||
const dom = el.querySelector('.el-scrollbar__wrap') // 获取下拉框元素
|
||||
dom.addEventListener('scroll', function () {
|
||||
// 监听元素触底
|
||||
const condition = this.scrollHeight - this.scrollTop - 5 <= this.clientHeight
|
||||
if (condition) {
|
||||
binding.value()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default loadMore
|
||||
@@ -1,49 +0,0 @@
|
||||
import { ref, watch, inject } from 'vue'
|
||||
import { isEqual, debounce, throttle } from 'lodash'
|
||||
import { getDataByPath } from '/admin/components/catchForm/support'
|
||||
|
||||
const useRequest = ({ api, debounceTime, throttleTime }) => {
|
||||
const $request = inject('$request')
|
||||
|
||||
const data = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
|
||||
const res = await $request.get(api)
|
||||
|
||||
const resData = getDataByPath(res, api.dataPath)
|
||||
|
||||
data.value = resData
|
||||
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const debounceRemote = debounce(fetchData, debounceTime)
|
||||
const throttleRemote = throttle(fetchData, throttleTime)
|
||||
|
||||
const run = () => {
|
||||
if (debounceTime) {
|
||||
return debounceRemote()
|
||||
}
|
||||
if (throttleTime) {
|
||||
return throttleRemote()
|
||||
}
|
||||
|
||||
return fetchData()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => api,
|
||||
(newVal, oldVal) => {
|
||||
if (!isEqual(newVal, oldVal)) {
|
||||
run()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
return { data, loading }
|
||||
}
|
||||
|
||||
export default useRequest
|
||||
@@ -1,151 +0,0 @@
|
||||
import { ref, reactive, computed, watch, onMounted, inject } from 'vue'
|
||||
import { isEqual, isPlainObject, debounce } from 'lodash'
|
||||
import { getDataByPath } from '/admin/components/catchForm/support'
|
||||
import { $selectData, $global } from '/admin/components/catchForm/config/symbol'
|
||||
|
||||
const useSelect = (props, emits) => {
|
||||
const selectData = inject($selectData)
|
||||
|
||||
const { request } = inject($global)
|
||||
|
||||
const selectVal = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(val) {
|
||||
emits('update:modelValue', val)
|
||||
}
|
||||
})
|
||||
|
||||
const currentOptions = ref([])
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const isMax = ref(false)
|
||||
|
||||
const stateParams = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
// filters: {},
|
||||
})
|
||||
|
||||
const fetchData = debounce(async () => {
|
||||
if (isMax.value || !props.api) return
|
||||
|
||||
const { url, method, data, dataPath } = props.api
|
||||
|
||||
loading.value = true
|
||||
|
||||
let res = null
|
||||
if (method === 'get') {
|
||||
res = await request.get(url, data)
|
||||
} else {
|
||||
res = await request.post(url, data)
|
||||
}
|
||||
|
||||
const resData = getDataByPath(res, dataPath)
|
||||
|
||||
if (resData.length !== stateParams.pageSize) {
|
||||
isMax.value = true
|
||||
}
|
||||
|
||||
const resDataParse = resData.map(item => {
|
||||
if (isPlainObject(item)) {
|
||||
return item
|
||||
}
|
||||
return { label: item, value: item }
|
||||
})
|
||||
|
||||
currentOptions.value = [...currentOptions.value, ...resDataParse]
|
||||
|
||||
stateParams.pageNum++
|
||||
|
||||
loading.value = false
|
||||
}, 300)
|
||||
|
||||
onMounted(() => {
|
||||
const { mode, options } = props
|
||||
if (mode === 'static') {
|
||||
currentOptions.value = options
|
||||
isMax.value = true
|
||||
}
|
||||
if (mode === 'remote') {
|
||||
fetchData()
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.api,
|
||||
(newVal, oldVal) => {
|
||||
// bug：这里发生只api内存地址变化，实际api无变化也会触发监听。暂时使用深层对比解决
|
||||
if (!isEqual(newVal, oldVal)) {
|
||||
currentOptions.value = []
|
||||
isMax.value = false
|
||||
stateParams.pageNum = 1
|
||||
fetchData()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(currentOptions, newVal => {
|
||||
const { autoSelectedFirst, modelValue, valueKey, multiple, sort } = props
|
||||
// 自动选中第一项
|
||||
if (autoSelectedFirst && newVal.length && !modelValue?.length) {
|
||||
const firstValue = multiple ? [newVal[0][valueKey]] : newVal[0][valueKey]
|
||||
emits('update:modelValue', firstValue)
|
||||
selectChange(firstValue)
|
||||
}
|
||||
|
||||
if (sort) {
|
||||
currentOptions.value = currentOptions.value.sort((a, b) => a.value - b.value)
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.options,
|
||||
newVal => {
|
||||
if (props.mode === 'static') {
|
||||
currentOptions.value = newVal
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.mode,
|
||||
newVal => {
|
||||
if (newVal === 'static') {
|
||||
currentOptions.value = props.options
|
||||
}
|
||||
if (newVal === 'remote') {
|
||||
currentOptions.value = []
|
||||
fetchData()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const selectChange = val => {
|
||||
const { valueKey, multiple, name } = props
|
||||
|
||||
let valueData = {}
|
||||
|
||||
if (multiple) {
|
||||
// 多选就过滤出vals对应的源数据
|
||||
valueData = currentOptions.value.filter(item => {
|
||||
return val.includes(item[valueKey])
|
||||
})
|
||||
} else {
|
||||
// 单选找到单项对应的源数据
|
||||
valueData = currentOptions.value.find(item => item[valueKey] === val)
|
||||
}
|
||||
|
||||
// 如果接到了selectData，给顶级组件保存当前值对应得数据源
|
||||
if (selectData) {
|
||||
selectData[name] = valueData
|
||||
}
|
||||
emits('onChangeSelect', selectData)
|
||||
}
|
||||
|
||||
return { selectVal, selectChange, currentOptions, loading, fetchData, isMax }
|
||||
}
|
||||
|
||||
export default useSelect
|
||||
@@ -1,69 +0,0 @@
|
||||
import type { App } from 'vue'
|
||||
import CatchForm from './CatchForm.vue'
|
||||
import { $global } from '/admin/components/catchForm/config/symbol'
|
||||
import * as Directives from '/admin/components/catchForm/directive'
|
||||
|
||||
import type {
|
||||
anyObject,
|
||||
schemaType,
|
||||
formValuesType,
|
||||
contextType,
|
||||
formItemType,
|
||||
formItemsType,
|
||||
formElement,
|
||||
changeItemType,
|
||||
$globalType
|
||||
} from '/admin/components/catchForm/config/commonType'
|
||||
import components from '/admin/components/catchForm/components'
|
||||
|
||||
/**
|
||||
* 合并 custom elements
|
||||
* @param customElements
|
||||
* @returns
|
||||
*/
|
||||
const handleMergeElements = (customElements: { [key: string]: formElement }) => {
|
||||
const mergeElements: { [key: string]: formElement } = {}
|
||||
|
||||
Object.entries(components).forEach(([key, value]) => {
|
||||
const customData = customElements[key]
|
||||
if (customData) {
|
||||
return (mergeElements[key] = {
|
||||
...value,
|
||||
component: customData.component,
|
||||
modelName: customData.modelName || 'modelValue',
|
||||
attr: customData.attr || value.attr
|
||||
})
|
||||
}
|
||||
|
||||
return (mergeElements[key] = { ...value, modelName: 'modelValue' })
|
||||
})
|
||||
|
||||
return mergeElements
|
||||
}
|
||||
|
||||
type $optionsType = {
|
||||
http?: any
|
||||
// elements?: { [key: string]: formElement }
|
||||
// iconSelectConfig?: iconSelectConfigType
|
||||
customElements?: { [key: string]: formElement }
|
||||
}
|
||||
|
||||
const install = function (app: App<Element>, options: $optionsType = {}) {
|
||||
const { http, customElements = {} } = options
|
||||
|
||||
app.provide($global, {
|
||||
http: http,
|
||||
elements: handleMergeElements(customElements)
|
||||
})
|
||||
// 注册指令
|
||||
Object.values(Directives).forEach(fn => fn(app))
|
||||
}
|
||||
|
||||
export { CatchForm }
|
||||
|
||||
export type { anyObject, schemaType, formValuesType, contextType, formItemType, formItemsType, formElement, changeItemType, $globalType }
|
||||
|
||||
export function bootstrapCatchForm(app: App, options:Object = {}) {
|
||||
install(app, options)
|
||||
app.component('CatchForm', CatchForm)
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
/* eslint-disable no-new-func */
|
||||
import { cloneDeep, isString, isPlainObject, isArray } from 'lodash'
|
||||
import type { formValuesType } from '/admin/components/catchForm/config/commonType'
|
||||
import type { formItemType, formItemsType } from '/admin/components/catchForm/config/commonType'
|
||||
import { isEqual } from 'lodash'
|
||||
import type { anyObject, contextType} from '/admin/components/catchForm/config/commonType'
|
||||
|
||||
type handleLinkagesType = (obj: { newVal: Object; oldVal: Object; formValues: anyObject; formItems: formItemsType }) => void
|
||||
|
||||
// 模板转换函数，将一个由双大括号包裹的字符串，转化为js表达式并返回结果（context限制变量范围）
|
||||
const templateParse = (str: string, context: contextType) => {
|
||||
if (!str) return str
|
||||
if (typeof str !== 'string') return str
|
||||
|
||||
const template = str.match(/{{(.+?)}}/)
|
||||
if (template) {
|
||||
try {
|
||||
const parse = new Function(Object.keys(context).join(','), 'return ' + template[1])
|
||||
|
||||
return parse(...Object.values(context))
|
||||
} catch (e) {
|
||||
// console.log(str, '模板转换错误：', e)
|
||||
return str
|
||||
}
|
||||
} else {
|
||||
return str
|
||||
}
|
||||
}
|
||||
|
||||
const deepParse = (prop: any, context: contextType): any => {
|
||||
const $values = context.$values
|
||||
|
||||
if (isString(prop)) {
|
||||
return templateParse(prop, context)
|
||||
}
|
||||
|
||||
if (isPlainObject(prop)) {
|
||||
return Object.keys(prop).reduce((all, key) => {
|
||||
const itemContext = { ...context }
|
||||
|
||||
if (prop.name && $values) {
|
||||
itemContext.$val = getDataByPath($values, prop.name)
|
||||
itemContext.$select = context.$selectData[prop.name]
|
||||
}
|
||||
|
||||
return { ...all, [key]: deepParse(prop[key], itemContext) }
|
||||
}, {})
|
||||
}
|
||||
if (isArray(prop)) {
|
||||
return prop.map(item => {
|
||||
return deepParse(item, context)
|
||||
})
|
||||
}
|
||||
|
||||
return prop
|
||||
}
|
||||
|
||||
const handleLinkages: handleLinkagesType = ({ newVal, oldVal, formValues, formItems }) => {
|
||||
for (const item of formItems) {
|
||||
const newValue = getDataByPath(newVal, item.name)
|
||||
const oldValue = getDataByPath(oldVal, item.name)
|
||||
|
||||
if (item.change && !isEqual(newValue, oldValue)) {
|
||||
let temp = cloneDeep(formValues.value)
|
||||
item.change.forEach(({ target, value }) => {
|
||||
temp = setDataByPath(temp, target, value)
|
||||
})
|
||||
formValues.value = temp
|
||||
}
|
||||
|
||||
if (item.children && item.component !== 'FormList') {
|
||||
handleLinkages({
|
||||
newVal,
|
||||
oldVal,
|
||||
formValues,
|
||||
formItems: item.children
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const recursionDelete = (items: formItemsType, callback: (item: formItemType) => boolean): formItemsType => {
|
||||
const data = items.filter(callback)
|
||||
return data.map(item => {
|
||||
if (item.children) {
|
||||
return {
|
||||
...item,
|
||||
children: recursionDelete(item.children, callback)
|
||||
}
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
const setDataByPath = (object: formValuesType, path: string, value: any) => {
|
||||
const cloneObj = cloneDeep(object)
|
||||
// 将路径字符串分割成路径数组
|
||||
const pathArray = path.split('.')
|
||||
// 递归函数，用于在对象的深层级找到要修改的位置并更新其值
|
||||
function update(obj: formValuesType, pathArray: string[], value: any) {
|
||||
// 如果路径数组为空，表示已经到达了最后一级，更新值并返回
|
||||
if (pathArray.length === 1) {
|
||||
obj[pathArray[0]] = value
|
||||
return
|
||||
}
|
||||
|
||||
// 获取当前路径的第一个部分
|
||||
const currentKey = pathArray.shift()
|
||||
|
||||
if (currentKey) {
|
||||
// 如果当前键不存在，则创建一个空对象
|
||||
if (!obj[currentKey]) {
|
||||
obj[currentKey] = {}
|
||||
}
|
||||
|
||||
// 递归调用更新函数
|
||||
update(obj[currentKey], pathArray, value)
|
||||
}
|
||||
}
|
||||
|
||||
// 调用递归函数
|
||||
update(cloneObj, pathArray, value)
|
||||
|
||||
// 返回更新后的对象
|
||||
return cloneObj
|
||||
}
|
||||
|
||||
const isRegexString = (str: string) => {
|
||||
const regexMetaCharacters = /[.*+?^${}()|[\]\\]/
|
||||
|
||||
return regexMetaCharacters.test(str)
|
||||
}
|
||||
|
||||
const getRandomId = (length: number) => {
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
|
||||
let randomId = ''
|
||||
|
||||
for (let i = 0; i < length; i++) {
|
||||
const randomIndex = Math.floor(Math.random() * characters.length)
|
||||
randomId += characters.charAt(randomIndex)
|
||||
}
|
||||
|
||||
return randomId
|
||||
}
|
||||
|
||||
const getDataByPath = (obj: anyObject, path: string) => {
|
||||
// 使用正则表达式分割路径字符串
|
||||
const keys = path.split('.')
|
||||
|
||||
// 遍历路径，逐层深入对象
|
||||
let result = obj
|
||||
for (const key of keys) {
|
||||
if (result && typeof result === 'object' && key in result) {
|
||||
result = result[key]
|
||||
} else {
|
||||
// 如果路径无效，返回 undefined 或者其他默认值
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
export { setDataByPath, recursionDelete, isRegexString, getRandomId, handleLinkages, getDataByPath, deepParse}
|
||||
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<div v-if="notNeedPopover()">
|
||||
{{ content }}
|
||||
</div>
|
||||
<el-popover v-else effect="dark" placement="top-start" :width="300" trigger="hover" :content="content">
|
||||
<template #reference>
|
||||
{{ ellipsis(length) }}
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Prop {
|
||||
content?: string
|
||||
length: number
|
||||
}
|
||||
|
||||
const props = defineProps<Prop>()
|
||||
|
||||
// need popover
|
||||
const notNeedPopover = () => {
|
||||
const length = props.content ? props.content.length : 0
|
||||
return length <= 20
|
||||
}
|
||||
|
||||
// 截取
|
||||
const ellipsis = (length: number): string => {
|
||||
if (props.content) {
|
||||
return props.content.substring(0, length) + '...'
|
||||
}
|
||||
|
||||
return ''
|
||||
}
|
||||
</script>
|
||||
@@ -1,62 +0,0 @@
|
||||
<template>
|
||||
<el-switch @change="enabeldField" :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, inject } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
api: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
id: {
|
||||
required: false,
|
||||
type: [String, Number]
|
||||
},
|
||||
field: {
|
||||
require: false,
|
||||
type: String,
|
||||
default: 'status'
|
||||
},
|
||||
refresh: {
|
||||
type: Function,
|
||||
defaulat: null,
|
||||
required: false
|
||||
}
|
||||
})
|
||||
|
||||
const modelValue = defineModel()
|
||||
// @ts-ignore
|
||||
const { enabled, success, loading, afterEnabled } = useEnabled()
|
||||
|
||||
const activeValue = ref<boolean | number | string>()
|
||||
const inactiveValue = ref<boolean | number | string>()
|
||||
|
||||
if (typeof modelValue.value === 'boolean') {
|
||||
activeValue.value = true
|
||||
inactiveValue.value = false
|
||||
} else {
|
||||
activeValue.value = Status.ENABLE
|
||||
inactiveValue.value = Status.DISABLE
|
||||
}
|
||||
|
||||
success(() => {
|
||||
modelValue.value = modelValue.value === activeValue.value ? inactiveValue.value : activeValue.value
|
||||
})
|
||||
|
||||
afterEnabled.value = () => {
|
||||
if (props.refresh) {
|
||||
props.refresh()
|
||||
} else {
|
||||
const refresh = inject('refresh') as Function
|
||||
refresh()
|
||||
}
|
||||
}
|
||||
|
||||
const enabeldField = () => {
|
||||
enabled(props.api, props.id as string | number, { field: props.field })
|
||||
}
|
||||
</script>
|
||||
@@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<div class="grid w-full grid-cols-1 gap-4 pl-2 sm:grid-cols-3 lg:grid-cols-6 place-content-between">
|
||||
<template v-for="(item, k) in fields" :key="k">
|
||||
<div v-if="item.show && (k < 3 || expand)" class="align-items-center justify-items-center">
|
||||
<el-form-item :label="item.label" v-if="item.type === 'input'">
|
||||
<el-input :placeholder="item.placeholder" v-model="query[item.name]" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="item.label" v-if="item.type === 'select'">
|
||||
<Select :api="item.api" :options="item.options" v-model="query[item.name]" :placeholder="item.placeholder" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="item.label" v-if="item.type === 'input-number'">
|
||||
<el-input-number v-model="query[item.name]" :placeholder="item.placeholder" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="item.label" v-if="item.type === 'date'">
|
||||
<el-date-picker type="date" v-model="query[item.name]" :placeholder="item.placeholder" clearable value-format="YYYY-MM-DD" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="item.label" v-if="item.type === 'datetime'">
|
||||
<el-date-picker type="datetime" v-model="query[item.name]" :placeholder="item.placeholder" clearable value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="item.label" v-if="item.type === 'tree'">
|
||||
<el-tree-select v-model="query[item.name]" value-key="id" :placeholder="item.placeholder" clearable :data="item.options" check-strictly :props="item.props" />
|
||||
</el-form-item>
|
||||
<template v-if="item.type === 'range'">
|
||||
<div class="flex flex-wrap">
|
||||
<el-form-item :label="item.label">
|
||||
<div class="flex flex-wrap gap-x-2">
|
||||
<div v-for="(sitem, key) in item.children" :key="key">
|
||||
<el-input v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'input'" clearable />
|
||||
<Select :api="item.api" :options="item.options" v-model="query[item.name]" :placeholder="item.placeholder" clearable v-if="item.type === 'select'" />
|
||||
<el-input-number v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'input-number'" clearable />
|
||||
<el-date-picker type="date" v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'date'" clearable value-format="YYYY-MM-DD" />
|
||||
<el-date-picker type="datetime" v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'datetime'" clearable value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex justify-end col-end-0 sm:col-end-5 lg:col-end-8">
|
||||
<el-button type="primary" @click="search"> {{ t('system.search') }} </el-button>
|
||||
<el-button @click="reset"> {{ t('system.reset') }} </el-button>
|
||||
<el-button @click="expandSearch()" v-if="fields.length > 3" text circle>
|
||||
<Icon :name="expand ? 'chevron-up' : 'chevron-down'" className="w-4 h-4" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// @ts-nocheck
|
||||
import { reactive, ref } from 'vue'
|
||||
import { isBoolean, t } from '/admin/support/helper'
|
||||
type itemType = 'input' | 'select' | 'input-number' | 'date' | 'datetime' | 'range'
|
||||
interface Option {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
interface field {
|
||||
type: itemType
|
||||
label: string
|
||||
name: string
|
||||
api?: string
|
||||
placeholder?: string
|
||||
default?: any
|
||||
options?: Array<Option>
|
||||
children?: Array<field>
|
||||
show?: boolean
|
||||
props?: Object // 树形 props
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
fields: {
|
||||
type: Array<field>,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['search', 'reset'])
|
||||
const query = ref<Object>({})
|
||||
const expand = ref<boolean>(false)
|
||||
|
||||
const _fields = ref<Array<field>>(props.fields)
|
||||
_fields.value = _fields.value?.map(field => {
|
||||
if (!field.placeholder) {
|
||||
field.placeholder = (field.type === 'select' ? '请选择' : '请输入') + field.label
|
||||
}
|
||||
field.show = isBoolean(field.show) ? field.show : true
|
||||
return reactive(field)
|
||||
})
|
||||
|
||||
const search = () => {
|
||||
emits('search', query.value, true)
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
query.value = {}
|
||||
emits('reset')
|
||||
}
|
||||
const expandSearch = () => {
|
||||
expand.value = !expand.value
|
||||
}
|
||||
|
||||
defineExpose({ reset })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-form-item__label) {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,63 +0,0 @@
|
||||
export type columnType = 'expand' | 'selection' | 'index' | 'operate'
|
||||
export type fixed = 'fiexed' | 'right' | 'left'
|
||||
export interface Column {
|
||||
type?: columnType // 类型 expand select index
|
||||
label?: string
|
||||
prop?: string
|
||||
'min-width'?: string | number
|
||||
width?: number | string
|
||||
slot?: 'string'
|
||||
header: 'string' // 表头插槽名称
|
||||
align?: string
|
||||
fixed?: fixed
|
||||
sortable?: boolean | string
|
||||
'sort-method'?: Function
|
||||
'sort-by'?: Function
|
||||
resizable?: boolean
|
||||
formatter?: Function // function(row, column, cellValue, index)
|
||||
'header-align'?: string
|
||||
'class-name'?: string
|
||||
selectable?: Function // function(row, index)
|
||||
show: boolean
|
||||
index?: number | Function // 如果设置了 type=index，可以通过传递 index 属性来自定义索引
|
||||
children?: Array<Column> // 多级表头
|
||||
filter?:Function,
|
||||
ellipsis?:boolean|number, // 当文字太多时，可以使用省略文字
|
||||
switch?: boolean, // swith 字段状态切换
|
||||
switchRefresh?: Function, // switch refresh 刷新
|
||||
// 图片预览
|
||||
image?: boolean,
|
||||
preview: boolean, // 默认不预览
|
||||
// 标签
|
||||
tags?: boolean|Array<number>,
|
||||
// 链接🔗
|
||||
link?:boolean,
|
||||
link_text?: string,
|
||||
// 操作
|
||||
update?: boolean, // 编辑操作
|
||||
destroy?: boolean // 删除操作
|
||||
}
|
||||
|
||||
// 分页
|
||||
export interface paginate {
|
||||
layout:string,
|
||||
limit: number,
|
||||
page: number,
|
||||
limits: Array<number>,
|
||||
total: number,
|
||||
changePage: Function,
|
||||
changeLimit: Function
|
||||
}
|
||||
|
||||
// option
|
||||
export interface Option {
|
||||
label: string,
|
||||
value: string|number
|
||||
}
|
||||
// 搜索 item
|
||||
export interface SItem {
|
||||
type: string,
|
||||
name: string,
|
||||
default: any,
|
||||
options: Array<Option>
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user