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

提交

This commit is contained in:
zouzhibing 2022-04-26 15:32:51 +08:00
parent 21a4ce40f7
commit 78d1639148
10 changed files with 412 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -3,7 +3,7 @@ vue-element-perfect 是一个后台前端解决方案, 基于Vue3.0+TS+Element-p
## 效果预览
预览地址 [项目预览地址](https://yuanzbz.gitee.io/vue-admin-perfect/index.html#/home)
国内预览地址 [项目预览地址](http://182.61.5.190:8889/#/table/complex)
附上github地址 [vue-admin-perfect](https://github.com/zouzhibin/vue-admin-perfect)

12
pushp.sh
View File

@ -1,12 +0,0 @@
#强制推送
#!/usr/bin/env bash
set -e
git init
git add -A
git commit -m '🎉 发布新版本'
git push -f "https://${access_token}@github.com/zouzhibin/vue-admin-perfect.git" master:gh-pages
exec /bin/bash

10
src/router/modules/table.ts
View File

@ -20,11 +20,17 @@ const tableRouter = {
meta: { title: '综合表格', noCache: true }
},
{
path: 'edit-table',
path: 'inline-table',
component: () => import('@/views/table/inline-edit-table.vue'),
name: 'edit-table',
name: 'inline-table',
meta: { title: '行内编辑', noCache: true }
},
{
path: 'edit-table',
component: () => import('@/views/table/edit.vue'),
name: 'edit-table',
meta: { title: '可编辑表格', noCache: true }
},
// {
// path: 'multi-table',
// component: () => import('@/views/table/multi-table.vue'),

254
src/views/components-demo/button.vue
View File

@ -1,129 +1,130 @@
<template>
<el-card class="box-card">
<template #header>
<div class="card-header">
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>基础用法
</span>
</div>
</template>
<div>
<el-button class="item">Default</el-button>
<el-button type="primary" class="item">Primary</el-button>
<el-button type="success" class="item">Success</el-button>
<el-button type="info" class="item">Info</el-button>
<el-button type="warning" class="item">Warning</el-button>
<el-button type="danger" class="item">Danger</el-button>
<el-button class="item">中文</el-button>
<el-button plain class="item">Plain</el-button>
<el-button type="primary" plain class="item">Primary</el-button>
<el-button type="success" plain class="item">Success</el-button>
<el-button type="info" plain class="item">Info</el-button>
<el-button type="warning" plain class="item">Warning</el-button>
<el-button type="danger" plain class="item">Danger</el-button>
<el-button round class="item">Round</el-button>
<el-button type="primary" round class="item">Primary</el-button>
<el-button type="success" round class="item">Success</el-button>
<el-button type="info" round class="item">Info</el-button>
<el-button type="warning" round class="item">Warning</el-button>
<el-button type="danger" round class="item">Danger</el-button>
<el-button :icon="Search" circle class="item"/>
<el-button type="primary" :icon="Edit" circle class="item"/>
<el-button type="success" :icon="Check" circle class="item"/>
<el-button type="info" :icon="Message" circle class="item"/>
<el-button type="warning" :icon="Star" circle class="item"/>
<el-button type="danger" :icon="Delete" circle class="item"/>
</div>
</template>
<div>
<el-button class="item">Default</el-button>
<el-button type="primary" class="item">Primary</el-button>
<el-button type="success" class="item">Success</el-button>
<el-button type="info" class="item">Info</el-button>
<el-button type="warning" class="item">Warning</el-button>
<el-button type="danger" class="item">Danger</el-button>
<el-button class="item">中文</el-button>
<el-button plain class="item">Plain</el-button>
<el-button type="primary" plain class="item">Primary</el-button>
<el-button type="success" plain class="item">Success</el-button>
<el-button type="info" plain class="item">Info</el-button>
<el-button type="warning" plain class="item">Warning</el-button>
<el-button type="danger" plain class="item">Danger</el-button>
<el-button round class="item">Round</el-button>
<el-button type="primary" round class="item">Primary</el-button>
<el-button type="success" round class="item">Success</el-button>
<el-button type="info" round class="item">Info</el-button>
<el-button type="warning" round class="item">Warning</el-button>
<el-button type="danger" round class="item">Danger</el-button>
<el-button :icon="Search" circle class="item"/>
<el-button type="primary" :icon="Edit" circle class="item"/>
<el-button type="success" :icon="Check" circle class="item"/>
<el-button type="info" :icon="Message" circle class="item"/>
<el-button type="warning" :icon="Star" circle class="item"/>
<el-button type="danger" :icon="Delete" circle class="item"/>
</div>
</el-card>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>禁用状态
</span>
</div>
</template>
<div>
<el-button disabled class="item">Default</el-button>
<el-button type="primary" disabled class="item">Primary</el-button>
<el-button type="success" disabled class="item">Success</el-button>
<el-button type="info" disabled class="item">Info</el-button>
<el-button type="warning" disabled class="item">Warning</el-button>
<el-button type="danger" disabled class="item">Danger</el-button>
<el-button plain disabled class="item">Plain</el-button>
<el-button type="primary" plain disabled class="item">Primary</el-button>
<el-button type="success" plain disabled class="item">Success</el-button>
<el-button type="info" plain disabled class="item"> Info</el-button>
<el-button type="warning" plain disabled class="item">Warning</el-button>
<el-button type="danger" plain disabled class="item">Danger</el-button>
</div>
</template>
<div>
<el-button disabled class="item">Default</el-button>
<el-button type="primary" disabled class="item">Primary</el-button>
<el-button type="success" disabled class="item">Success</el-button>
<el-button type="info" disabled class="item">Info</el-button>
<el-button type="warning" disabled class="item">Warning</el-button>
<el-button type="danger" disabled class="item">Danger</el-button>
<el-button plain disabled class="item">Plain</el-button>
<el-button type="primary" plain disabled class="item">Primary</el-button>
<el-button type="success" plain disabled class="item">Success</el-button>
<el-button type="info" plain disabled class="item"> Info</el-button>
<el-button type="warning" plain disabled class="item">Warning</el-button>
<el-button type="danger" plain disabled class="item">Danger</el-button>
</div>
</el-card>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>文字按钮
</span>
</div>
</template>
<div>
<el-button type="text" class="item">文字按钮</el-button>
<el-button type="text" disabled class="item">文字按钮</el-button>
</div>
</template>
<div>
<el-button type="text" class="item">文字按钮</el-button>
<el-button type="text" disabled class="item">文字按钮</el-button>
</div>
</el-card>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>图标按钮
</span>
</div>
</template>
<div>
<el-button type="primary" :icon="Edit" class="item"/>
<el-button type="primary" :icon="Share" class="item"/>
<el-button type="primary" :icon="Delete" class="item"/>
<el-button type="primary" :icon="Search" class="item">Search</el-button>
<el-button type="primary" class="item">
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
</div>
</template>
<div>
<el-button type="primary" :icon="Edit" class="item"/>
<el-button type="primary" :icon="Share" class="item"/>
<el-button type="primary" :icon="Delete" class="item"/>
<el-button type="primary" :icon="Search" class="item">Search</el-button>
<el-button type="primary" class="item">
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
</div>
</el-card>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>按钮组
</span>
</div>
</template>
<div>
<el-button type="primary" icon="ArrowLeft" class="item">上一页</el-button>
<el-button type="primary" class="item">
下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon>
</el-button>
<el-button type="primary" :icon="Edit" class="item"/>
<el-button type="primary" :icon="Share" class="item"/>
<el-button type="primary" :icon="Delete" class="item"/>
</div>
</template>
<div>
<el-button type="primary" :icon="ArrowLeft" class="item">上一页</el-button>
<el-button type="primary" class="item">
下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon>
</el-button>
<el-button type="primary" :icon="Edit" class="item"/>
<el-button type="primary" :icon="Share" class="item"/>
<el-button type="primary" :icon="Delete" class="item"/>
</div>
</el-card>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>加载中
</span>
</div>
</template>
<div>
<el-button type="primary" loading class="item">Loading</el-button>
<el-button type="primary" :loading-icon="Eleme" loading class="item">Loading</el-button>
<el-button type="primary" loading class="item">
<template #loading>
<div class="custom-loading">
<svg class="circular" viewBox="-10, -10, 50, 50">
<path
class="path"
d="
</div>
</template>
<div>
<el-button type="primary" loading class="item">Loading</el-button>
<el-button type="primary" loading-icon="Eleme" loading class="item">Loading</el-button>
<el-button type="primary" loading class="item">
<template #loading>
<div class="custom-loading">
<svg class="circular" viewBox="-10, -10, 50, 50">
<path
class="path"
d="
M 30 15
L 28 17
M 25.61 25.61
@ -131,34 +132,35 @@
A 15 15, 0, 1, 1, 27.99 7.5
L 15 15
"
style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
/>
</svg>
</div>
</template>
Loading
</el-button>
</div>
</el-card>
style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
/>
</svg>
</div>
</template>
Loading
</el-button>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>自定义颜色
</span>
</div>
</template>
<div>
<el-button color="#626aef" :dark="isDark" class="item">Default</el-button>
<el-button color="#626aef" :dark="isDark" plain class="item">Plain</el-button>
</div>
</template>
<div>
<el-button color="#626aef" class="item">Default</el-button>
<el-button color="#626aef" plain class="item">Plain</el-button>
<el-button color="#626aef" :dark="isDark" disabled class="item">Disabled</el-button>
<el-button color="#626aef" :dark="isDark" disabled plain class="item"
>Disabled Plain</el-button
>
</div>
</el-card>
<el-button color="#626aef" disabled class="item">Disabled</el-button>
<el-button color="#626aef" disabled plain class="item"
>Disabled Plain</el-button
>
</div>
</el-card>
</div>
</template>
<script lang="ts" setup>
import {

26
src/views/other/print.vue
View File

@ -1,17 +1,19 @@
<template>
<div>
<el-button type="primary" @click="print(1)">打印图片</el-button>
<el-button type="primary" @click="print(2)">打印表格</el-button>
</div>
<div style="margin-top: 20px">
<img :src="im1" style="width: 50%;"/>
</div>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="名字" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
<div>
<el-button type="primary" @click="print(1)">打印图片</el-button>
<el-button type="primary" @click="print(2)">打印表格</el-button>
</div>
<div style="margin-top: 20px">
<img :src="im1" style="width: 50%;"/>
</div>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="名字" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
</div>
</div>
</template>

24
src/views/other/splitpane.vue
View File

@ -1,15 +1,17 @@
<template>
<splitpanes style="height: 800px">
<pane min-size="20" class="left">1</pane>
<pane>
<splitpanes horizontal>
<pane class="item1">2</pane>
<pane class="item2">3</pane>
<pane class="item3">4</pane>
</splitpanes>
</pane>
<pane class="item4">5</pane>
</splitpanes>
<div>
<splitpanes style="height: 800px">
<pane min-size="20" class="left">1</pane>
<pane>
<splitpanes horizontal>
<pane class="item1">2</pane>
<pane class="item2">3</pane>
<pane class="item3">4</pane>
</splitpanes>
</pane>
<pane class="item4">5</pane>
</splitpanes>
</div>
</template>
<script lang="ts" setup>

28
src/views/table/complex.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<comprehensive :columns="column">
<comprehensive :columns="column" :data="data" @reset="reset" @onSubmit="onSubmit">
<template v-slot:btn>
<div style="display: flex;justify-content: flex-end">
<el-button type="primary"><el-icon><plus /></el-icon> 添加</el-button>
@ -32,7 +32,23 @@
import {ref} from "vue";
import { ElMessage } from 'element-plus'
import Comprehensive from './components/comprehensive.vue'
const data = []
for(let i=0;i<100;i++){
data.push({
date: '2016-05-02',
name: '王五'+i,
price: 1+i,
province: '上海',
admin:"admin",
sex:i%2?1:0,
checked:true,
id:i+1,
age:0,
city: '普陀区',
address: '上海市普上海',
zip: 200333
})
}
const column = [
{ type:'selection', width:60 },
{ name: 'id', label: 'id',width:80, },
@ -77,6 +93,14 @@
{ name: 'operation',slot:true,fixed:'right',width:200 }
]
const reset = ()=>{
ElMessage.success('触发重置方法')
}
const onSubmit = (val)=>{
console.log('val===',val)
ElMessage.success('触发查询方法')
}
</script>
<style scoped>
.edit-input {

43
src/views/table/components/comprehensive.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="inline-edit-table">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form :inline="true" :model="formInline" class="demo-form-inline" 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'">
@ -20,7 +20,8 @@
</el-form-item>
</template>
<el-form-item>
<el-button type="primary" @click="onSubmit">搜索</el-button>
<el-button @click="reset(ruleFormRef)">重置</el-button>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button type="text" @click="isExpand=!isExpand">{{ isExpand?'合并':'展开' }}<el-icon>
<arrow-down v-if="!isExpand"/>
<arrow-up v-else/>
@ -63,28 +64,17 @@
<script lang="ts" setup>
import {computed, ref} from "vue";
import { ElMessage,ElMessageBox } from 'element-plus'
const data = []
for(let i=0;i<100;i++){
data.push({
date: '2016-05-02',
name: '王五'+i,
price: 1+i,
province: '上海',
admin:"admin",
sex:i%2?1:0,
checked:true,
id:i+1,
age:0,
city: '普陀区',
address: '上海市普上海',
zip: 200333
})
}
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const emit = defineEmits(['reset','onSubmit'])
let props = defineProps({
columns:{
type:Array,
default:()=>[]
},
data:{
type:Array,
default:()=>[]
}
})
@ -101,10 +91,11 @@ const handleCurrentChange = (val: number) => {
}
const list = computed(()=>{
let arr = JSON.parse(JSON.stringify(data))
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
@ -130,8 +121,15 @@ 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(
'你确定要删除当前项吗?',
@ -153,9 +151,6 @@ const deleteAction = (row)=>{
}
const expand = (type)=>{
}
</script>
<style scoped>

153
src/views/table/components/edit.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<div class="m-edit-table">
<el-table :data="list" style="width: 100%" >
<template v-for="item in columns" >
<el-table-column v-if="item.type" :type="item.type" :width="item.width" :align="item.align" :fixed="item.fixed" :label="item.label"/>
<el-table-column
v-else
:prop="item.name" :width="item.width" :align="item.align" :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-column prop="operator" label="操作" width="180px" fixed="right">
<template #default="scope">
<el-button
v-if="scope.row.edit"
type="success"
size="small"
icon="CircleCheckFilled"
@click="confirmEdit(scope.row)"
>
保存
</el-button>
<el-button
v-else
type="primary"
size="small"
icon="Edit"
@click="scope.row.edit=!scope.row.edit"
>
编辑
</el-button>
<el-button
type="danger"
size="small"
icon="Delete"
@click="deleteAction(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script lang="ts" setup>
import {computed, ref} from "vue";
import { ElMessage,ElMessageBox } from 'element-plus'
const props = defineProps({
columns:{
type:Array,
default:()=>[]
}
})
const data = [
]
for(let i=0;i<100;i++){
data.push({
date: '2016-05-02',
name: '王五'+i,
price: 1+i,
province: '上海',
admin:"admin",
sex:i%2?1:0,
checked:true,
id:i+1,
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
age:0,
city: '普陀区',
address: '上海市普上海',
zip: 200333
})
}
const currentPage1 = ref(1)
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(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'
const formInline = reactive({
user: '',
region: '',
})
const onSubmit = () => {
console.log('submit!')
}
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>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
.inline-edit-table{
width: 100%;
}
</style>

50
src/views/table/edit.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<edit-table :columns="column"/>
</template>
<script lang="ts" setup>
import EditTable from './components/edit.vue'
const column = [
{ name: 'id', label: 'id',width:80, },
{ name: 'name',
label: '活动名称',
width:80
},
{ name: 'status',
label: '状态',
},
{
name: 'decs',
label: '描述',
slot:true,
inSearch:true,
options:[
{
value:-1,
label:'全部'
},
{
value:1,
label:'未解决'
},{
value:0,
label:'已解决'
}],
valueType:'select',
},
{
name: 'created_at',
label: '活动时间',
inSearch:true,
valueType:'input',
},
{ name: 'operation',slot:true,fixed:'right',width:200 }
]
</script>
<style>
</style>