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

🎉 feat: init project

This commit is contained in:
zouzhibing 2022-04-25 15:48:25 +08:00
parent 583c9679c4
commit 8e8d82f38a
16 changed files with 388 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
deploy.sh
View File

@ -7,11 +7,8 @@ touch .nojekyll
git init
git add -A
git commit -m 'deploy'
git push -f "https://${access_token}@gitee.com/chu1204505056/vue-admin-beautiful.git" master:gh-pages
git push -f "https://${access_token}@gitee.com/chu1204505056/vue-admin-beautiful-element.git" master:gh-pages
start "https://gitee.com/chu1204505056/vue-admin-beautiful/pages"
start "https://gitee.com/chu1204505056/vue-admin-beautiful-element/pages"
git push -f "https://${access_token}@github.com/chuzhixin/vue-admin-beautiful.git" master:gh-pages
git push -f "https://${access_token}@gitee.com/yuanzbz/vue-admin-perfect.git" master:gh-pages
cd -
exec /bin/bash

12
push.sh Normal file
View File

@ -0,0 +1,12 @@
#强制推送
#!/usr/bin/env bash
set -e
git init
git add -A
git commit -m '🎉 feat: init project'
git push -f "https://${access_token}@gitee.com/yuanzbz/vue-admin-perfect.git" master
exec /bin/bash

2
src/App.vue
View File

@ -6,6 +6,7 @@
<style lang="scss">
#app {
position: relative;
width: 100%;
height: 100%;
font-family: Avenir, Helvetica, Arial, sans-serif;
@ -14,7 +15,6 @@
color: #2c3e50;
}
html,body{
width: 100%;
height: 100%;
}
*{

BIN
src/assets/202203101032398ab1ec2b7f71bbb3017f71bbb3c30000.xlsx Normal file
View File

Binary file not shown.

BIN
src/assets/查库记录查询.xlsx Normal file
View File

Binary file not shown.

4
src/layout/components/AppMain.vue
View File

@ -3,9 +3,7 @@
<router-view v-slot="{ Component }">
<transition name="fade-transform" mode="out-in">
<div>
<component :is="Component" />
</div>
<component :is="Component" />
</transition>
</router-view>

2
src/layout/components/UHeader/index.vue
View File

@ -123,7 +123,7 @@
top: 0;
background: white;
left: 0;
z-index: 1;
z-index:99;
right: 0;
transition: left 0.28s;
flex-shrink: 0;

2
src/layout/index.vue
View File

@ -57,7 +57,7 @@
<style lang="scss" scoped>
.g-container-layout{
display: flex;
//display: flex;
height: 100%;
width: 100%;
.main-container{

6
src/main.ts
View File

@ -6,7 +6,7 @@ import store from './store'
import './permission'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App)
import * as ElIconsModules from '@element-plus/icons-vue'
@ -20,4 +20,6 @@ Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
});
import '@/styles/index.scss' // global css
app.use(store).use(router).use(ElementPlus).mount('#app')
app.use(store).use(router).use(ElementPlus,{
locale: zhCn,
}).mount('#app')

4
src/router/index.ts
View File

@ -42,11 +42,13 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
// 异步组件
export const asyncRoutes = [
tableRouter,
chartsRouter,
chatRouter,
componentsRouter,
othersRouter,
tableRouter,
externalLink,
permissionRouter,

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

@ -13,18 +13,24 @@ const tableRouter = {
icon: 'School'
},
children: [
{
path: 'complex',
component: () => import('@/views/table/complex.vue'),
name: 'complex',
meta: { title: '综合表格', noCache: true }
},
{
path: 'edit-table',
component: () => import('@/views/table/inline-edit-table.vue'),
name: 'edit-table',
meta: { title: '行内编辑', noCache: true }
},
{
path: 'multi-table',
component: () => import('@/views/table/multi-table.vue'),
name: 'multi-table',
meta: { title: '多级表头', noCache: true }
},
// {
// path: 'multi-table',
// component: () => import('@/views/table/multi-table.vue'),
// name: 'multi-table',
// meta: { title: '多级表头', noCache: true }
// },
]
}

4
src/views/login/index.vue
View File

@ -70,8 +70,8 @@
}
}
const ruleForm = reactive({
username: '',
password: '',
username: 'admin',
password: 'admin',
})
const rules = reactive({

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

@ -0,0 +1,90 @@
<template>
<div class="app-container">
<comprehensive :columns="column">
<template v-slot:btn>
<div style="display: flex;justify-content: flex-end">
<el-button type="primary"><el-icon><plus /></el-icon> 添加</el-button>
<el-button type="danger"><el-icon><delete /></el-icon>删除</el-button>
</div>
</template>
<template v-slot:sex="scope">{{scope.row.sex?'男':'女'}}</template>
<template v-slot:operation="scope">
<el-button
type="primary"
size="small"
icon="Edit"
>
编辑
</el-button>
<el-button
type="danger"
size="small"
icon="Delete"
>
删除
</el-button>
</template>
</comprehensive>
</div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import { ElMessage } from 'element-plus'
import Comprehensive from './components/comprehensive.vue'
const column = [
{ type:'selection', width:60 },
{ name: 'id', label: 'id',width:80, },
{ name: 'name',
label: '姓名',
inSearch:true,
valueType:'input',
width:80
},
{ name: 'age',
label: '年龄',
align:'right',
},
{ name: 'sex',
label: '性别',
slot:true,
inSearch:true,
options:[{
value:1,
label:'男'
},{
value:0,
label:'女'
}],
valueType:'select',
},
{
name: 'price',
label: '价格',
inSearch:true,
valueType:'input',
},
{ name: 'admin', label: '账号', inSearch:true,
valueType:'input',},
{ name: 'address', label: '地址', inSearch:true,
valueType:'input', },
{ name: 'date', label: '日期',sorter:true, inSearch:true,
valueType:'input', },
{ name: 'province', label: '省份' },
{ name: 'city', label: '城市' },
{ name: 'zip', label: '邮编' },
{ name: 'operation',slot:true,fixed:'right',width:200 }
]
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>

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

@ -0,0 +1,173 @@
<template>
<div class="inline-edit-table">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<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 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-item>
<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/>
</el-icon></el-button>
</el-form-item>
</el-form>
<div style="margin-bottom: 15px">
<slot name="btn"></slot>
</div>
<el-table
@selection-change="(val)=>$emit('selection-change',val)"
:data="list"
style="width: 100%"
:border="true">
<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>
<div style="width: 100%;display: flex;justify-content: center;padding-top: 20px">
<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>
</template>
<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
})
}
let props = defineProps({
columns:{
type:Array,
default:()=>[]
}
})
const currentPage1 = ref(1)
const isExpand = ref(true)
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'
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)
}
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(() => {
})
}
const expand = (type)=>{
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
.inline-edit-table{
width: 100%;
}
</style>

1
src/views/table/dynamic.vue
View File

@ -0,0 +1 @@

225
src/views/table/inline-edit-table.vue
View File

@ -1,14 +1,21 @@
<template>
<div class="app-container">
<div class="inline-edit-table">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="formInline.user" placeholder="请输入姓名" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">搜索</el-button>
</el-form-item>
</el-form>
<el-table :data="list" style="width: 100%" :border="true">
<el-table-column type="index" width="60" label="序号"/>
<el-table-column prop="id" width="60" label="id"/>
<el-table-column prop="name" label="姓名" min-width="200px">
<template #default="scope">
<template v-if="scope.row.edit">
<div style="display: flex;align-items: center;">
<el-input v-model="scope.row.name" size="small" />
<el-button
size="small"
icon="Refresh"
type="warning"
@ -22,14 +29,18 @@
</template>
</el-table-column>
<el-table-column prop="age" label="年龄" />
<el-table-column prop="sex" label="性别" />
<el-table-column prop="sex" label="性别" >
<template #default="scope">
{{scope.row.sex?'男':'女'}}
</template>
</el-table-column>
<el-table-column prop="price" label="价格" />
<el-table-column prop="admin" label="账号" />
<el-table-column prop="address" label="地址" />
<el-table-column prop="date" label="日期" />
<el-table-column prop="province" label="省份" />
<el-table-column prop="city" label="城市" />
<el-table-column prop="operator" label="操作" width="180px" >
<el-table-column prop="operator" label="操作" width="180px" fixed="right">
<template #default="scope">
<el-button
v-if="scope.row.edit"
@ -62,152 +73,57 @@
</template>
</el-table-column>
</el-table>
<div style="width: 100%;display: flex;justify-content: center;padding-top: 20px">
<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>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import { ElMessage } from 'element-plus'
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: '',
price: 0,
name: '王五'+i,
price: 1+i,
province: '上海',
admin:"admin",
sex:'1',
sex:i%2?1:0,
checked:true,
id:"20",
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
},
{
date: '2016-05-01',
name: '王小虎2',
province: '上海',
sex:'0',
price: 0,
id:"2",
age:12,
city: '普陀区',
img:"https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
address: '上海市普',
zip: 200333
},
{
date: '2022-03-25T09:27:42',
name: '王小虎3',
province: '上海',
sex:1,
price: 33,
id:"3",
age:'15',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
city: '普陀区',
address: '上海市普',
zip: 200333555
},
{
date: '2016-04-02',
name: '王小虎4',
province: '上海',
sex:1,
age:'11',
price: 33,
id:"4",
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
city: '普陀区',
address: '上海市普',
zip: 200333
},
{
date: '2016-03-02',
name: '王小虎5',
province: '上海',
price: 0,
sex:1,
age:'14',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
id:"5",
city: '普陀区',
address: '上海市普',
zip: 200333
},{
date: '2014-05-02',
name: '王小虎6',
province: '上海',
price: 33,
sex:1,
id:"6",
age:'12',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
city: '普陀区',
address: '上海市普',
zip: 0
},{
date: '2019-05-02',
name: '王小虎7',
price: 33,
province: '上海',
sex:1,
age:0,
id:"7",
city: '普陀区',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
address: '上海市普',
zip: 200333
},{
date: '2012-05-02',
name: '王小虎8',
province: '上海',
price: 0,
sex:1,
age:'29',
id:"8",
city: '普陀区',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
address: '上海市普',
zip: 200333
},{
date: '2011-05-02',
name: '王小虎91',
price: 33,
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
province: '上海',
sex:1,
id:"9",
age:'30',
city: '普陀区',
address: '上海市普',
zip: 200333
},{
date: '2011-05-02',
name: '王小虎10',
province: '上海',
sex:1,
id:"10",
age:'30',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
city: '普陀区',
address: '上海市普',
zip: 200333
},{
date: '2011-05-02',
name: '王小虎20',
province: '上海',
sex:1,
price: 33,
id:"11",
age:'30',
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 list = ref(data)
const listLoading = ref(false)
const confirmEdit = (row)=>{
@ -218,10 +134,36 @@ const cancelEdit = (row)=>{
row.edit = false
}
const deleteAction = (row)=>{
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(() => {
})
list.value = list.value.filter(item=>item.id!==row.id)
ElMessage.success('删除成功')
}
</script>
@ -234,4 +176,7 @@ const deleteAction = (row)=>{
right: 15px;
top: 10px;
}
.inline-edit-table{
width: 100%;
}
</style>