lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

特性: 新增表单

This commit is contained in:
yuanzbz 2023-10-22 13:31:07 +08:00
parent 2925c5d832
commit 1d57dd78b8
17 changed files with 1343 additions and 740 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/we.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 146 KiB

After

Width:  |  Height:  |  Size: 143 KiB

46
src/components/SearchForm/advancedForm/index.vue
View File

@ -5,21 +5,24 @@
:inline="true"
:label-position="'right'"
:model="formInline"
class="form-inline">
class="form-inline"
>
<el-row
:class="{
'not-show':byHeight&&!isExpand
'not-show': byHeight && !isExpand,
}"
:gutter="gutterWidth">
<el-col :span="item.span"
v-for="item,index in columns"
:gutter="gutterWidth"
>
<el-col
:span="item.span"
v-for="(item, index) in columns"
:key="item.name"
v-show="byHeight?true:(index< (showRow*3)||isExpand)">
v-show="byHeight ? true : index < showRow * 3 || isExpand"
>
<el-form-item :label="item.title" :label-width="labelWidth" v-if="item.type === 'input'">
<el-input
clearable
v-model="formInline[item.name]" :placeholder="item.placeholder" />
<el-input clearable v-model="formInline[item.name]" :placeholder="item.placeholder" />
</el-form-item>
<template v-else-if="item.type === 'date'">
<el-form-item :label="item.title" :label-width="labelWidth">
<el-date-picker
@ -36,7 +39,9 @@
<div class="search-btn">
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
<el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
<el-button link type="primary" @click="isExpand = !isExpand"
>{{ isExpand ? '合并' : '展开'
}}<el-icon>
<arrow-down v-if="!isExpand" />
<arrow-up v-else /> </el-icon
></el-button>
@ -51,7 +56,7 @@ const ruleFormRef = ref<FormInstance>()
let props = defineProps({
// 宽度
labelWidth: {
default: "100px",
default: '100px',
},
gutterWidth: {
type: Number,
@ -63,19 +68,18 @@ let props = defineProps({
},
columns: {
type: Array,
default:()=>[]
default: () => [],
},
byHeight: {
type: Boolean,
default:false
}
default: false,
},
})
const emit = defineEmits(['submit', 'reset'])
// 收缩展开
const isExpand = ref(false)
const formInline = reactive({
})
const formInline = reactive({})
for (let item of props.columns) {
formInline[item.name] = null
@ -89,11 +93,11 @@ const resetForm = (formEl: FormInstance | undefined) => {
console.log('formEl', formEl)
if (!formEl) return
formEl.resetFields()
const keys = Object.keys(formInline);
keys.forEach(key => {
formInline[key] = null;
});
emit("reset", formInline);
const keys = Object.keys(formInline)
keys.forEach((key) => {
formInline[key] = null
})
emit('reset', formInline)
}
</script>

53
src/components/SearchForm/components/BaseFormItem.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<el-form-item :label="config?.label" v-if="config.type === 'input'" style="width: 100%">
<el-input v-model="value" v-bind="$attrs" />
</el-form-item>
<el-form-item :label="config?.label" v-if="config.type === 'select'" style="width: 100%">
<el-select v-model="value" v-bind="$attrs" style="width: 100%">
<el-option
v-for="item in config.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="config?.label" v-if="config.type === 'date-picker'" style="width: 100%">
<el-date-picker v-model="value" v-bind="$attrs" style="width: 100%" />
</el-form-item>
<el-form-item :label="config?.label" v-if="config.type === 'cascader'" style="width: 100%">
<el-cascader v-model="value" v-bind="$attrs" style="width: 100%" />
</el-form-item>
<el-form-item :label="config?.label" v-if="config.type === 'time-select'" style="width: 100%">
<el-time-select v-model="value" v-bind="$attrs" style="width: 100%" />
</el-form-item>
</template>
<script setup lang="ts">
import { computed } from 'vue'
type ConfigType = {
modelValue?: any
config?: any
}
const props = defineProps<ConfigType>()
const emits = defineEmits<{
(e: 'update:modelValue', value: any): void
}>()
const value = computed({
get() {
return props?.modelValue
},
set(value) {
emits('update:modelValue', value)
},
})
</script>
<script lang="ts">
export default {
inheritAttrs: false,
}
</script>
<style lang="less" scoped></style>

130
src/components/SearchForm/index.vue Normal file
View File

@ -0,0 +1,130 @@
<template>
<div class="advancedForm">
<el-form
ref="ruleFormRef"
:inline="true"
:label-position="'right'"
:model="formParams"
class="form-inline"
>
<el-row
:class="{
'not-show': byHeight && !isExpand,
}"
:gutter="gutterWidth"
>
<el-col
:span="item.span"
v-for="(item, index) in columns"
:key="item.name"
v-show="byHeight ? true : index < showRow * 3 || isExpand"
>
<BaseFormItem :key="index" :config="item" v-bind="item.attrs" v-model="item.value" />
</el-col>
</el-row>
</el-form>
<div class="search-btn">
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
<el-button link type="primary" @click="isExpand = !isExpand" v-if="columns.length > 3">
{{ isExpand ? '合并' : '展开'
}}<el-icon>
<arrow-down v-if="!isExpand" />
<arrow-up v-else /> </el-icon
></el-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import BaseFormItem from './components/BaseFormItem.vue'
const ruleFormRef = ref<FormInstance>()
let props = defineProps({
// 宽度
labelWidth: {
default: '100px',
},
gutterWidth: {
type: Number,
default: 24,
},
showRow: {
type: Number,
default: 1,
},
columns: {
type: Array,
default: () => [],
},
byHeight: {
type: Boolean,
default: false,
},
})
const emit = defineEmits(['submit', 'reset'])
// 收缩展开
const isExpand = ref(false)
const formParams = reactive({})
const initFormParams = () => {
for (let item of props.columns) {
formParams[item.name] = item?.value
}
}
// 进行遍历获取参数
const getFormParams = () => {
let searchParams = {}
for (let item of props.columns) {
searchParams[item.name] = item?.value
}
return searchParams
}
onMounted(() => {
initFormParams()
})
// 获取参数进行组装为 obj
const onSubmit = () => {
let searchParams = getFormParams()
emit('submit', searchParams)
}
// 重置参数
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
const keys = Object.keys(formParams)
keys.forEach((key) => {
let itemColums = props.columns.find((item) => item.name === key)
itemColums.value = formParams[key]
})
let searchParams = getFormParams()
emit('reset', searchParams)
}
</script>
<style lang="scss" scoped>
.advancedForm {
display: flex;
justify-content: space-between;
.form-inline {
flex: 1;
}
.el-form--inline .el-form-item {
width: 100%;
margin-right: 10px;
}
.search-btn {
margin-left: 40px;
}
.not-show {
height: 40px;
overflow: hidden;
}
}
</style>

14
src/components/Table/PropTable/index.vue
View File

@ -1,9 +1,7 @@
<template>
<div class="zb-pro-table">
<div class="header">
<el-form :inline="true"
class="search-form"
:model="formInline" ref="ruleFormRef" >
<el-form :inline="true" class="search-form" :model="formInline" ref="ruleFormRef">
<template v-for="(item, index) in formSearchData" :key="index">
<el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
<template v-if="item.valueType === 'input'">
@ -12,7 +10,9 @@
<template v-if="item.valueType === 'select'">
<el-select
style="width: 100%"
v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
v-model="formInline[item.name]"
:placeholder="`请选择${item.label}`"
>
<el-option
v-for="ite in item.options"
:key="ite.value"
@ -27,7 +27,9 @@
<div class="search">
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
<el-button @click="reset(ruleFormRef)">重置</el-button>
<el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
<el-button link type="primary" @click="isExpand = !isExpand"
>{{ isExpand ? '合并' : '展开'
}}<el-icon>
<arrow-down v-if="!isExpand" />
<arrow-up v-else /> </el-icon
></el-button>
@ -220,7 +222,7 @@ const deleteAction = (row) => {
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
min-height: 300px;
.operator {
margin-bottom: 15px
margin-bottom: 15px;
}
.table {
position: relative;

249
src/components/Table/PropTable/index1.vue Normal file
View File

@ -0,0 +1,249 @@
<template>
<div class="zb-pro-table">
<div class="header">
<el-form :inline="true"
class="search-form"
:model="formInline" ref="ruleFormRef" >
<template v-for="(item, index) in formSearchData" :key="index">
<el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
<template v-if="item.valueType === 'input'">
<el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
</template>
<template v-if="item.valueType === 'select'">
<el-select
style="width: 100%"
v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
<el-option
v-for="ite in item.options"
:key="ite.value"
:label="ite.label"
:value="ite.value"
/>
</el-select>
</template>
</el-form-item>
</template>
</el-form>
<div class="search">
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
<el-button @click="reset(ruleFormRef)">重置</el-button>
<el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
<arrow-down v-if="!isExpand" />
<arrow-up v-else /> </el-icon
></el-button>
</div>
</div>
<!----------底部---------------------->
<div class="footer">
<!-----------工具栏操作工具----------------->
<div class="operator">
<slot name="btn"></slot>
</div>
<!-- ------------表格--------------->
<div class="table">
<el-table
class="zb-table"
v-loading="loading"
@selection-change="(val) => emit('selection-change', val)"
:data="list"
:border="true"
>
<template v-for="item in columns">
<el-table-column
v-if="item.type"
:type="item.type"
:width="item.width"
:align="item.align!=null?item.align:'center'"
:fixed="item.fixed"
:label="item.label"
/>
<el-table-column
v-else
:prop="item.name"
:width="item.width"
:align="item.align!=null?item.align:'center'"
:fixed="item.fixed"
:label="item.label"
>
<template #default="scope">
<span v-if="!item.slot">{{ scope.row[item.name] }}</span>
<slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
</template>
</el-table-column>
</template>
</el-table>
</div>
<!-- ------------分页--------------->
<div class="pagination">
<el-pagination
v-model:currentPage="currentPage1"
:page-size="10"
background
layout="total, sizes, prev, pager, next, jumper"
:total="data.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import {Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
let props = defineProps({
columns: {
type: Array,
default: () => [],
},
data: {
type: Array,
default: () => [],
},
loading: {
type: Boolean,
default: false,
},
})
const currentPage1 = ref(1)
// 收缩展开
const isExpand = ref(false)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
currentPage1.value = val
}
const list = computed(() => {
let arr = JSON.parse(JSON.stringify(props.data))
return arr.splice((currentPage1.value - 1) * 10, 10)
})
const listLoading = ref(false)
const confirmEdit = (row) => {
row.edit = false
}
const cancelEdit = (row) => {
row.edit = false
}
import { reactive } from 'vue'
let obj = {}
let search = []
for (let item of props.columns) {
if (item.inSearch) {
obj[item.name] = null
}
if (item.inSearch) {
search.push(item)
}
}
const formSearchData = ref(search)
const formInline = reactive(obj)
const onSubmit = () => {
console.log('submit!', formInline)
emit('onSubmit', formInline)
}
const reset = (formEl: FormInstance | undefined) => {
formSearchData.value.forEach((item) => {
formInline[item.name] = null
})
emit('reset')
}
const deleteAction = (row) => {
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
})
.then(() => {
list.value = list.value.filter((item) => item.id !== row.id)
ElMessage.success('删除成功')
})
.catch(() => {})
}
</script>
<style scoped lang="scss">
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
.zb-pro-table {
width: 100%;
height: 100%;
display:flex;
flex-direction:column;
.header{
display: flex;
padding: 16px 16px 0 16px;
margin-bottom: 16px;
border-radius: 4px;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
.search-form{
flex: 1;
::v-deep{
.el-input--default{
width: 200px;
}
}
}
.search{
flex-shrink: 0;
white-space: nowrap;
}
}
.footer{
flex: 1;
display: flex;
padding: 16px;
flex-direction: column;
border-radius: 4px;
overflow: hidden;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
min-height: 300px;
.operator{
margin-bottom: 15px
}
.table{
position: relative;
flex: 1;
}
.zb-table{
position: absolute;
height: 100%;
}
}
::v-deep{
.el-table__header th{
font-size: 15px;
font-weight: 700;
color: #252525;
}
}
.pagination{
width: 100%;
display: flex;
justify-content: center;
padding-top: 20px;
box-sizing: border-box;
}
}
</style>

4
src/layout/components/Main/index.vue
View File

@ -13,8 +13,8 @@
<script lang="ts" setup>
import { useWrapComponents } from '@/hooks/useWrapComponents'
import { computed, ref } from 'vue'
import {useSettingStore} from "@/store/modules/setting"
import {usePermissionStore} from "@/store/modules/permission"
import { useSettingStore } from '@/store/modules/setting'
import { usePermissionStore } from '@/store/modules/permission'
const SettingStore = useSettingStore()
const PermissionStore = usePermissionStore()
const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes)

12
src/layout/components/Sidebar/index.vue
View File

@ -11,12 +11,7 @@
class="el-menu-vertical-demo"
:collapse="isCollapse"
>
<SubItem
v-for="route in permission_routes"
:key="route.path"
:item="route"
/>
<SubItem v-for="route in permission_routes" :key="route.path" :item="route" />
</el-menu>
</el-scrollbar>
</div>
@ -25,8 +20,8 @@
<script lang="ts" setup>
import Logo from './components/Logo.vue'
import SubItem from '../SubMenu/SubItem.vue'
import {useSettingStore} from "@/store/modules/setting"
import {usePermissionStore} from "@/store/modules/permission"
import { useSettingStore } from '@/store/modules/setting'
import { usePermissionStore } from '@/store/modules/permission'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
@ -45,7 +40,6 @@ const permission_routes = computed(() => PermissionStore.permission_routes)
const activeMenu = computed(() => {
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}

22
src/layout/index.vue
View File

@ -11,7 +11,7 @@
import { computed, watch } from 'vue'
import Theme from '@/components/Theme/index.vue'
import Mobile from './components/Mobile/index.vue'
import {useSettingStore} from "@/store/modules/setting"
import { useSettingStore } from '@/store/modules/setting'
import { useResizeHandler } from '@/hooks/useResizeHandler'
import LayoutVertical from './LayoutVertical/index.vue'
import LayoutHorizontal from './LayoutHorizontal/index.vue'
@ -23,7 +23,7 @@
horizontal: LayoutHorizontal,
vertical: LayoutVertical,
columns: LayoutColumns,
};
}
// 是否折叠
const isCollapse = computed(() => {
@ -31,14 +31,17 @@
})
let { device } = useResizeHandler()
watch(()=>device.value,(val)=>{
watch(
() => device.value,
(val) => {
let vertical = val === 'mobile' ? 'vertical' : themeConfig.value.mode
const body = document.body as HTMLElement;
body.setAttribute("class", `layout-${vertical}`);
},{
immediate:true
})
const body = document.body as HTMLElement
body.setAttribute('class', `layout-${vertical}`)
},
{
immediate: true,
},
)
// 当屏幕切换的时候进行变换
const classObj = computed(() => {
@ -49,7 +52,6 @@
mobile: device.value === 'mobile',
}
})
</script>
<style lang="scss" scoped>

41
src/routers/index.ts
View File

@ -1,5 +1,11 @@
import { createRouter, createWebHistory, RouteRecordRaw,createWebHashHistory,Router } from 'vue-router'
import Layout from "@/layout/index.vue";
import {
createRouter,
createWebHistory,
RouteRecordRaw,
createWebHashHistory,
Router,
} from 'vue-router'
import Layout from '@/layout/index.vue'
// 扩展继承属性
interface extendRoute {
hidden?: boolean
@ -17,7 +23,6 @@ import externalLink from './modules/externalLink'
import formRouter from './modules/form'
import functionPageRouter from './modules/functionPage'
// 异步组件
export const asyncRoutes = [
...dataScreenRouter,
@ -46,19 +51,20 @@ export const asyncRoutes = [
* meta.icon ==> 菜单icon
* meta.affix ==> 如果设置为true将会出现在 标签栏中
* meta.breadcrumb ==> 如果设置为false，该项将隐藏在breadcrumb中（默认值为true）
* meta.activeMenu ==> 详情页的时候可以设置菜单高亮 ,高亮菜单的path
*/
export const constantRoutes: Array<RouteRecordRaw & extendRoute> = [
{
path: "/404",
name: "404",
component: () => import("@/views/errorPages/404.vue"),
path: '/404',
name: '404',
component: () => import('@/views/errorPages/404.vue'),
hidden: true,
},
{
path: "/403",
name: "403",
component: () => import("@/views/errorPages/403.vue"),
path: '/403',
name: '403',
component: () => import('@/views/errorPages/403.vue'),
hidden: true,
},
{
@ -66,22 +72,22 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
name: 'Login',
component: () => import('@/views/login/index.vue'),
hidden: true,
meta: { title: '登录',}
meta: { title: '登录' },
},
{
path: '/',
name: 'layout',
component: Layout,
redirect: '/home',
meta: { title: '首页', icon: 'House', },
meta: { title: '首页', icon: 'House' },
children: [
{
path: '/home',
component: () => import('@/views/home/index.vue'),
name: 'home',
meta: { title: '首页', icon: 'House', affix: true ,role:['other']}
meta: { title: '首页', icon: 'House', affix: true, role: ['other'] },
},
]
],
},
]
@ -90,15 +96,14 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
*/
export const notFoundRouter = {
path: '/:pathMatch(.*)',
name: "notFound",
redirect: '/404'
};
name: 'notFound',
redirect: '/404',
}
const router = createRouter({
// history: createWebHistory(process.env.BASE_URL), // history
history: createWebHashHistory(), // hash
routes:constantRoutes
routes: constantRoutes,
})
export default router

25
src/routers/modules/form.ts
View File

@ -1,9 +1,9 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from "@/layout/index.vue";
import Layout from '@/layout/index.vue'
const formRouter = [{
const formRouter = [
{
path: '/form',
component: Layout,
redirect: '/form/validateForm',
@ -11,34 +11,41 @@ const formRouter = [{
alwaysShow: true,
meta: {
title: '超级表单',
icon: 'Grape'
icon: 'Grape',
},
children: [
{
path: '/form/validateForm',
component: () => import('@/views/form/validateForm/index.vue'),
name: 'validateForm',
meta: { title: '校验 Form', keepAlive: true , icon: 'MenuIcon'}
meta: { title: '校验 Form', keepAlive: true, icon: 'MenuIcon' },
},
{
path: '/form/advancedForm',
component: () => import('@/views/form/advancedForm/index.vue'),
name: 'advancedForm',
meta: { title: '收缩 Form', icon: 'MenuIcon'}
meta: { title: '收缩 Form', icon: 'MenuIcon' },
},
{
path: '/form/appendForm',
component: () => import('@/views/form/appendForm/index.vue'),
name: 'appendForm',
meta: { title: '增删 Form', keepAlive: true , icon: 'MenuIcon'}
meta: { title: '增删 Form', keepAlive: true, icon: 'MenuIcon' },
},
{
path: '/form/moreForm',
component: () => import('@/views/form/moreForm/index.vue'),
name: 'moreForm',
meta: { title: '多表单验证', keepAlive: true , icon: 'MenuIcon'}
meta: { title: '多表单验证', keepAlive: true, icon: 'MenuIcon' },
},
{
path: '/form/searchForm',
component: () => import('@/views/form/searchForm/index.vue'),
name: 'searchForm',
meta: { title: '查询 Form', keepAlive: true, icon: 'MenuIcon' },
},
],
},
]
}]
export default formRouter

39
src/routers/modules/other.ts
View File

@ -2,108 +2,109 @@
import Layout from '@/layout/index.vue'
const othersRouter = [{
const othersRouter = [
{
path: '/other',
component: Layout,
redirect: '/other/clipboard',
name: 'other',
meta: {
title: '常用组件',
icon: 'management'
icon: 'management',
},
children: [
{
path: '/other/clipboard',
component: () => import('@/views/other/clipboard/index.vue'),
name: 'clipboard',
meta: { title: '剪贴板', roles:['other'] ,icon: 'MenuIcon',}
meta: { title: '剪贴板', roles: ['other'], icon: 'MenuIcon' },
},
{
path: '/other/editor',
component: () => import('@/views/other/editor/index.vue'),
name: 'editor',
meta: { title: '富文本编辑器', roles: ['other'] , icon: 'MenuIcon'}
meta: { title: '富文本编辑器', roles: ['other'], icon: 'MenuIcon' },
},
{
path: '/other/code-mirror',
component: () => import('@/views/other/codeMirror/index.vue'),
name: 'code-mirror',
meta: { title: '代码编辑器', roles: ['other'] , icon: 'MenuIcon'}
meta: { title: '代码编辑器', roles: ['other'], icon: 'MenuIcon' },
},
{
path: '/other/mark-down',
component: () => import('@/views/other/markDown/index.vue'),
name: 'mark-down',
meta: { title: 'markDown', roles: ['other'] , icon: 'MenuIcon'}
meta: { title: 'markDown', roles: ['other'], icon: 'MenuIcon' },
},
{
path: '/other/print',
component: () => import('@/views/other/print/index.vue'),
name: 'print',
meta: { title: '打印' , icon: 'MenuIcon'}
meta: { title: '打印', icon: 'MenuIcon' },
},
{
path: '/other/cropper',
component: () => import('@/views/other/cropper/index.vue'),
name: 'cropper',
meta: { title: '头像裁剪' , icon: 'MenuIcon'}
meta: { title: '头像裁剪', icon: 'MenuIcon' },
},
{
path: '/other/card-drag',
component: () => import('@/views/other/cardDrag/index.vue'),
name: 'card-drag',
meta: { title: '卡片拖拽', icon: 'MenuIcon' }
meta: { title: '卡片拖拽', icon: 'MenuIcon' },
},
{
path: '/other/upload',
component: () => import('@/views/other/upload/index.vue'),
name: 'upload',
meta: { title: '上传图片', icon: 'MenuIcon' }
meta: { title: '上传图片', icon: 'MenuIcon' },
},
{
path: '/other/qrcode',
component: () => import('@/views/other/qrcode/index.vue'),
name: 'qrcode',
meta: { title: '生成二维码', icon: 'MenuIcon' }
meta: { title: '生成二维码', icon: 'MenuIcon' },
},
{
path: '/other/svgIcon',
component: () => import('@/views/other/svgIcon/index.vue'),
name: 'svgIcon',
meta: { title: 'svg 图标', icon: 'MenuIcon' }
meta: { title: 'svg 图标', icon: 'MenuIcon' },
},
{
path: '/other/iconfont',
component: () => import('@/views/other/iconfont/index.vue'),
name: 'iconfont',
meta: { title: '阿里图标库', icon: 'MenuIcon' }
meta: { title: '阿里图标库', icon: 'MenuIcon' },
},
{
path: '/other/water-marker',
component: () => import('@/views/other/waterMarker/index.vue'),
name: 'water-marker',
meta: { title: '生成水印' , icon: 'MenuIcon'}
meta: { title: '生成水印', icon: 'MenuIcon' },
},
{
path: '/other/right-menu',
component: () => import('@/views/other/rightMenu/index.vue'),
name: 'right-menu',
meta: { title: '右键菜单' , icon: 'MenuIcon'}
meta: { title: '右键菜单', icon: 'MenuIcon' },
},
{
path: '/other/count',
component: () => import('@/views/other/count/index.vue'),
name: 'count',
meta: { title: '数字动画', icon: 'MenuIcon' }
meta: { title: '数字动画', icon: 'MenuIcon' },
},
{
path: '/other/text-clamp',
component: () => import('@/views/other/textClamp/index.vue'),
name: 'text-clamp',
meta: { title: '多行文本省略', icon: 'MenuIcon' }
meta: { title: '多行文本省略', icon: 'MenuIcon' },
},
],
},
]
}]
export default othersRouter

17
src/routers/modules/table.ts
View File

@ -1,35 +1,35 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from "@/layout/index.vue";
import Layout from '@/layout/index.vue'
const tableRouter = [{
const tableRouter = [
{
path: '/table',
component: Layout,
redirect: '/table/comprehensive',
name: 'table',
meta: {
title: '超级表格',
icon: 'School'
icon: 'School',
},
children: [
{
path: '/table/comprehensive',
component: () => import('@/views/table/ComprehensiveTable/index.vue'),
name: 'comprehensive',
meta: { title: '综合表格', keepAlive: true , icon: 'MenuIcon'}
meta: { title: '综合表格', keepAlive: true, icon: 'MenuIcon' },
},
{
path: '/table/inlineTable',
component: () => import('@/views/table/InlineEditTable/index.vue'),
name: 'inlineTable',
meta: { title: '行内编辑', keepAlive: true , icon: 'MenuIcon'}
meta: { title: '行内编辑', keepAlive: true, icon: 'MenuIcon' },
},
{
path: '/table/editableProTable',
component: () => import('@/views/table/EditableProTable/index.vue'),
name: 'editableProTable',
meta: { title: '可编辑表格', keepAlive: true , icon: 'MenuIcon'}
meta: { title: '可编辑表格', keepAlive: true, icon: 'MenuIcon' },
},
// {
// path: 'virtualTable',
@ -37,7 +37,8 @@ const tableRouter = [{
// name: 'virtualTable',
// meta: { title: '虚拟表格', keepAlive: true , icon: 'MenuIcon'}
// },
],
},
]
}]
export default tableRouter

119
src/views/form/searchForm/constants.tsx Normal file
View File

@ -0,0 +1,119 @@
export const baseSearchColumns = [
{
type: 'input',
name: 'name1',
label: '字段1',
span: 8,
value: '字段1',
attrs: {
placeholder: '请输入字段1',
clearable: true,
},
},
{
type: 'select',
name: 'name2',
label: '字段2',
value: '',
placeholder: '字段2',
span: 8,
options: [
{ value: 'Option1', label: 'Option1' },
{ value: 'Option2', label: 'Option2' },
{ value: 'Option3', label: 'Option3' },
{ value: 'Option4', label: 'Option4' },
{ value: 'Option5', label: 'Option5' },
],
attrs: {
placeholder: '请选择',
clearable: true,
},
},
{
type: 'date-picker',
name: 'name3',
label: '时间',
span: 8,
value: null,
attrs: {
placeholder: '请选择时间',
clearable: true,
type: 'date',
valueFormat: 'YYYY-MM-DD',
},
},
{
type: 'date-picker',
name: 'name4',
label: '时间秒',
span: 8,
value: null,
attrs: {
placeholder: '请选择时间',
clearable: true,
type: 'datetime',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
},
{
type: 'date-picker',
name: 'name5',
label: '时间范围',
span: 8,
value: '',
attrs: {
placeholder: '请选择时间范围',
clearable: true,
type: 'daterange',
valueFormat: 'YYYY-MM-DD',
'start-placeholder': '开始时间',
'end-placeholder': '结束时间',
},
},
{
type: 'time-select',
name: 'name6',
label: '时间选择',
span: 8,
value: '',
attrs: {
placeholder: '请选择',
clearable: true,
},
},
{
type: 'cascader',
name: 'name7',
label: '级联选择器',
span: 8,
value: '',
attrs: {
placeholder: '请选择',
clearable: true,
options: [
{
value: 'disciplines',
label: 'Disciplines',
children: [
{
value: 'consistency',
label: 'Consistency',
},
{
value: 'feedback',
label: 'Feedback',
},
{
value: 'efficiency',
label: 'Efficiency',
},
{
value: 'controllability',
label: 'Controllability',
},
],
},
],
},
},
]

3
src/views/form/searchForm/index.scss Normal file
View File

@ -0,0 +1,3 @@
.searchdForm{
padding: 20px;
}

35
src/views/form/searchForm/index.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<PageWrapLayout>
<SearchForm :columns="searchColumns" @submit="onSubmit" @reset="resetForm" />
<div v-if="Object.keys(formValue).length">{{ formValue }}</div>
</PageWrapLayout>
</template>
<script lang="ts" setup>
import SearchForm from '@/components/SearchForm/index.vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { baseSearchColumns } from './constants'
const formValue = ref({})
const searchColumns = ref(baseSearchColumns)
// 查询
const onSubmit = (formInline) => {
console.log('获取参数', formInline)
formValue.value = formInline
ElMessage.success(JSON.stringify(formInline))
}
// 重置
const resetForm = (formInline) => {
console.log('获取参数', formInline)
formValue.value = formInline
ElMessage.success('重置成功')
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>

6
src/views/table/ComprehensiveTable/index.vue
View File

@ -106,7 +106,7 @@ const column = [
],
valueType: 'select',
},
{name: 'price', label: '价格', inSearch: true, valueType: 'input',},
{ name: 'price', label: '价格', inSearch: true, valueType: 'input' },
{ name: 'admin', label: '账号', inSearch: true, valueType: 'input' },
{ name: 'address', label: '地址', inSearch: true, valueType: 'input', width: 180 },
{ name: 'date', label: '日期', sorter: true, inSearch: true, valueType: 'input', width: 180 },
@ -249,9 +249,7 @@ const onSubmit = (val) => {
}, 500)
}
const getHeight = ()=>{
}
const getHeight = () => {}
onMounted(() => {
nextTick(() => {