parent
531cb14eb2
commit
ac1563c168
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,98 @@
|
|||||||
|
// 路由数据
|
||||||
|
export const routerData = [
|
||||||
|
{
|
||||||
|
path: 'home',
|
||||||
|
name: 'home',
|
||||||
|
meta: {
|
||||||
|
// 路由组件的路径
|
||||||
|
url: '../views/HomeView.vue',
|
||||||
|
id: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//
|
||||||
|
{
|
||||||
|
path: 'user-manage',
|
||||||
|
name: 'user-manage',
|
||||||
|
meta: {
|
||||||
|
// 路由组件的路径
|
||||||
|
url: '../views/UserManageView.vue',
|
||||||
|
id: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'employee-manage',
|
||||||
|
name: 'employee-manage',
|
||||||
|
meta: {
|
||||||
|
// 路由组件的路径
|
||||||
|
url: '../views/EmployeeManageView.vue',
|
||||||
|
id: 3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'reward-manage',
|
||||||
|
name: 'reward-manage',
|
||||||
|
meta: {
|
||||||
|
// 路由组件的路径
|
||||||
|
url: '../views/RewardManageView.vue',
|
||||||
|
id: 4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 二级
|
||||||
|
{
|
||||||
|
path: 'feedback/manage',
|
||||||
|
name: 'feedback-manage',
|
||||||
|
meta: {
|
||||||
|
// 路由组件的路径
|
||||||
|
url: '../views/feedback/FeedbackManageView.vue',
|
||||||
|
id: 6
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'feedback/view',
|
||||||
|
name: 'feedback-view',
|
||||||
|
meta: {
|
||||||
|
// 路由组件的路径
|
||||||
|
url: '../views/feedback/FeedbackView.vue',
|
||||||
|
id: 7
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'request/manage',
|
||||||
|
name: 'request-manage',
|
||||||
|
meta: {
|
||||||
|
// 路由组件的路径
|
||||||
|
url: '../views/request/RequestManageView.vue',
|
||||||
|
id: 9
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'request/view',
|
||||||
|
name: 'request-view',
|
||||||
|
meta: {
|
||||||
|
// 路由组件的路径
|
||||||
|
url: '../views/request/RequestView.vue',
|
||||||
|
id: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'person/password',
|
||||||
|
name: 'person-password',
|
||||||
|
meta: {
|
||||||
|
// 路由组件的路径
|
||||||
|
url: '../views/PersonInfo/ChangePasswordView.vue',
|
||||||
|
id: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'person/avatar',
|
||||||
|
name: 'person-avatar',
|
||||||
|
meta: {
|
||||||
|
// 路由组件的路径
|
||||||
|
url: '../views/PersonInfo/ChangeAvatarView.vue',
|
||||||
|
id: 13
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export const getRouterDataByIds = (idArray) => {
|
||||||
|
return routerData.filter((route) => idArray.includes(route.meta.id))
|
||||||
|
}
|
||||||
@ -1,88 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="excel">
|
|
||||||
<h3>导出</h3>
|
|
||||||
<ExportExcelCom @handleExportData="handleExportData"></ExportExcelCom>
|
|
||||||
<h3>导入</h3>
|
|
||||||
<ImportExcelCom @importData="importData"></ImportExcelCom>
|
|
||||||
<h3>表格</h3>
|
|
||||||
<BaseTableCom
|
|
||||||
:columnData="columnData"
|
|
||||||
:showSelect="true"
|
|
||||||
:tableData="tableData"
|
|
||||||
ref="baseTableComRef"
|
|
||||||
></BaseTableCom>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import ExportExcelCom from '@/components/excel/ExportExcelCom.vue'
|
|
||||||
import ImportExcelCom from '@/components/excel/ImportExcelCom.vue'
|
|
||||||
import BaseTableCom from '@/components/table/BaseTableCom.vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
const baseTableComRef = ref(null)
|
|
||||||
// 点击确认后获取到已被导入的文件的数据
|
|
||||||
const importData = (excelFilesData) => {
|
|
||||||
console.log('已被导入的文件的数据', excelFilesData)
|
|
||||||
ElMessage({
|
|
||||||
showClose: true,
|
|
||||||
message: '处理导入的数据',
|
|
||||||
type: 'success'
|
|
||||||
})
|
|
||||||
tableData.value = tableData.value.concat(excelFilesData)
|
|
||||||
}
|
|
||||||
// 要导出的数据
|
|
||||||
let exportData = []
|
|
||||||
// 表格属性
|
|
||||||
const columnData = [
|
|
||||||
{
|
|
||||||
prop: 'age',
|
|
||||||
label: '年龄'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'name',
|
|
||||||
label: '性别'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'hobby',
|
|
||||||
label: '爱好'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'project',
|
|
||||||
label: '专业'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const tableData = ref([
|
|
||||||
{
|
|
||||||
age: 18,
|
|
||||||
name: '永远18岁',
|
|
||||||
hobby: '夹声音',
|
|
||||||
project: '唱歌'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
age: 19,
|
|
||||||
name: '永远18岁',
|
|
||||||
hobby: '夹声音',
|
|
||||||
project: '唱歌'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
age: 20,
|
|
||||||
name: '永远18岁',
|
|
||||||
hobby: '夹声音',
|
|
||||||
project: '唱歌'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
age: 21,
|
|
||||||
name: '永远18岁',
|
|
||||||
hobby: '夹声音',
|
|
||||||
project: '唱歌'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
// 导出的处理函数
|
|
||||||
const handleExportData = (exportFile, fileName, fileExtension) => {
|
|
||||||
// exportData 为要导出的数据
|
|
||||||
exportData = baseTableComRef.value.getSelectRows()
|
|
||||||
exportFile(exportData, fileName, fileExtension)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: BINGWU
|
|
||||||
* @Date: 2024-02-01 00:31:58
|
|
||||||
* @LastEditors: BINGWU HuJiaCheng2003@163.com
|
|
||||||
* @LastEditTime: 2024-02-10 21:21:20
|
|
||||||
* @FilePath: \bingwu-admin\src\views\FatherMenu\ChiladMenu\ChildMenuView.vue
|
|
||||||
* @Describe:
|
|
||||||
* @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
ChildMenu
|
|
||||||
<!-- <RouterView /> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: BINGWU
|
|
||||||
* @Date: 2024-02-01 00:31:24
|
|
||||||
* @LastEditors: BINGWU HuJiaCheng2003@163.com
|
|
||||||
* @LastEditTime: 2024-02-01 00:32:18
|
|
||||||
* @FilePath: \bingwu-admin\src\views\FatherMenu\FatherMenu.vue
|
|
||||||
* @Describe:
|
|
||||||
* @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div>FatherMenu</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup></script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="file">
|
|
||||||
<UploadFileCom
|
|
||||||
ref="uploadFileComRef"
|
|
||||||
accept=".jpg,.jpeg,.png"
|
|
||||||
@handleConfirm="handleConfirm"
|
|
||||||
>
|
|
||||||
<template #tip>选择文件的提示</template>
|
|
||||||
</UploadFileCom>
|
|
||||||
<div style="margin: 50px 0">
|
|
||||||
<el-button
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
const files = uploadFileComRef.getSelectFiles()
|
|
||||||
console.log('files:', files)
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>获取已被选择的文件</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<ProgressLiteCom ref="progressLiteComRef"></ProgressLiteCom>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import UploadFileCom from '@/components/file/UploadFileCom.vue'
|
|
||||||
import ProgressLiteCom from '@/components/progress/ProgressLiteCom.vue'
|
|
||||||
import { ref, toRaw } from 'vue'
|
|
||||||
const uploadFileComRef = ref([])
|
|
||||||
const progressLiteComRef = ref(null)
|
|
||||||
// 点击确认按钮后的处理逻辑
|
|
||||||
const handleConfirm = (selectFiles) => {
|
|
||||||
// toRaw转换proxy代理的数据
|
|
||||||
console.log('confirm', toRaw(selectFiles))
|
|
||||||
uploadFileComRef.value.offDialog()
|
|
||||||
ElMessage({
|
|
||||||
showClose: true,
|
|
||||||
message: '点击了确认按钮',
|
|
||||||
type: 'success'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 模拟异步请求
|
|
||||||
const startWork = progressLiteComRef.value.start()
|
|
||||||
setTimeout(() => {
|
|
||||||
progressLiteComRef.value.end(startWork)
|
|
||||||
}, 3000)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.file {
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: BINGWU
|
|
||||||
* @Date: 2024-02-15 14:28:56
|
|
||||||
* @LastEditors: BINGWU HuJiaCheng2003@163.com
|
|
||||||
* @LastEditTime: 2024-02-16 21:12:52
|
|
||||||
* @FilePath: \bingwu-admin\src\views\PermissionView.vue
|
|
||||||
* @Describe:
|
|
||||||
* @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="permission">
|
|
||||||
<h1>按钮的权限管理</h1>
|
|
||||||
<!-- 四个按钮有a,b,c,d权限 -->
|
|
||||||
<el-button v-permission="'a'">a按钮</el-button>
|
|
||||||
<el-button v-permission="'b'">b按钮</el-button>
|
|
||||||
<el-button v-permission="'c'">c按钮</el-button>
|
|
||||||
<el-button v-permission="'d'">d按钮</el-button>
|
|
||||||
<hr />
|
|
||||||
<h4>用户切换</h4>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
swictUser('cxk')
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>切换为用户cxk</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
swictUser('admin')
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>切换为用户admin</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { getUserStore } from '@/stores'
|
|
||||||
const userStore = getUserStore()
|
|
||||||
const swictUser = (usename) => {
|
|
||||||
userStore.switchUser(usename)
|
|
||||||
// 刷新页面
|
|
||||||
location.reload()
|
|
||||||
ElMessage({
|
|
||||||
message: `切换为用户${usename}`,
|
|
||||||
type: 'success'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: BINGWU
|
|
||||||
* @Date: 2024-02-17 16:32:46
|
|
||||||
* @LastEditors: BINGWU HuJiaCheng2003@163.com
|
|
||||||
* @LastEditTime: 2024-02-17 18:01:52
|
|
||||||
* @FilePath: \bingwu-admin\src\views\PreviewPictureView.vue
|
|
||||||
* @Describe:
|
|
||||||
* @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="preview-picture">
|
|
||||||
<PreviewPictureCom ref="previewPictureComRef"> </PreviewPictureCom>
|
|
||||||
<div style="margin-top: 60px">
|
|
||||||
<el-button @click="getFileData" type="primary">获取图片文件</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PreviewPictureCom from '@/components/PreviewPictureCom.vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
const previewPictureComRef = ref(null)
|
|
||||||
const getFileData = () => {
|
|
||||||
const fileData = previewPictureComRef.value.fileFn().getFile()
|
|
||||||
const url = previewPictureComRef.value.imageUrlFn().getImageUrl()
|
|
||||||
console.log('file-data: ', fileData)
|
|
||||||
console.log('url: ', url.value)
|
|
||||||
previewPictureComRef.value
|
|
||||||
.imageUrlFn()
|
|
||||||
.setImageUrl(
|
|
||||||
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: BINGWU
|
|
||||||
* @Date: 2024-02-17 19:59:25
|
|
||||||
* @LastEditors: BINGWU HuJiaCheng2003@163.com
|
|
||||||
* @LastEditTime: 2024-02-22 21:25:38
|
|
||||||
* @FilePath: \bingwu-admin\src\views\ProgressView.vue
|
|
||||||
* @Describe:
|
|
||||||
* @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="progress">
|
|
||||||
<h5>进度条</h5>
|
|
||||||
<ProgressLiteCom
|
|
||||||
ref="progressLiteComRef"
|
|
||||||
:time="data.time"
|
|
||||||
:increment="data.increment"
|
|
||||||
:progress-type="data.progressType"
|
|
||||||
></ProgressLiteCom>
|
|
||||||
<div style="margin-top: 60px">
|
|
||||||
<el-button @click="test" type="primary">测试</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import ProgressLiteCom from '@/components/progress/ProgressLiteCom.vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
const progressLiteComRef = ref(null)
|
|
||||||
const data = {
|
|
||||||
// 最开始的累加时间间隔
|
|
||||||
time: 500,
|
|
||||||
// 每次累加量(最好是能被100整除)
|
|
||||||
increment: 8,
|
|
||||||
// 进度条类型
|
|
||||||
progressType: {
|
|
||||||
type1: true,
|
|
||||||
type2: true,
|
|
||||||
type3: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const test = () => {
|
|
||||||
// 模拟异步请求
|
|
||||||
const startWork = progressLiteComRef.value.start()
|
|
||||||
setTimeout(() => {
|
|
||||||
progressLiteComRef.value.end(startWork, 'error', '上传失败')
|
|
||||||
}, 4000)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.progress {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h1>腾讯储存桶测试</h1>
|
|
||||||
<el-upload
|
|
||||||
class="avatar-uploader"
|
|
||||||
:show-file-list="false"
|
|
||||||
:auto-upload="false"
|
|
||||||
:on-change="uploaderFile"
|
|
||||||
>
|
|
||||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
|
||||||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
||||||
</el-upload>
|
|
||||||
<div style="margin-top: 60px">
|
|
||||||
<el-button @click="submit" type="primary">提交</el-button>
|
|
||||||
</div>
|
|
||||||
<h5>进度条</h5>
|
|
||||||
<ProgressCom ref="progressComRef"></ProgressCom>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import ProgressCom from '@/components/progress/ProgressCom.vue'
|
|
||||||
import { smallFileUpload, largeFileUpload } from '@/utils/tencentCloud'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
// 进度条
|
|
||||||
const progressComRef = ref(null)
|
|
||||||
const uploadFile = ref(null)
|
|
||||||
const imageUrl = ref('')
|
|
||||||
|
|
||||||
const uploaderFile = (file) => {
|
|
||||||
console.log('file', file)
|
|
||||||
uploadFile.value = file
|
|
||||||
}
|
|
||||||
const update = (data) => {
|
|
||||||
progressComRef.value.changePercentage(data)
|
|
||||||
}
|
|
||||||
const submit = () => {
|
|
||||||
// 打开进度条
|
|
||||||
progressComRef.value.openProgress()
|
|
||||||
smallFileUpload(uploadFile.value, '', update).then((res) => {
|
|
||||||
progressComRef.value.offProgress()
|
|
||||||
imageUrl.value = res
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
:deep(.avatar-uploader .avatar) {
|
|
||||||
width: 178px;
|
|
||||||
height: 178px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.avatar-uploader .el-upload) {
|
|
||||||
border: 1px dashed var(--el-border-color);
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: var(--el-transition-duration-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.avatar-uploader .el-upload:hover) {
|
|
||||||
border-color: var(--el-color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-icon.avatar-uploader-icon) {
|
|
||||||
font-size: 28px;
|
|
||||||
color: #8c939d;
|
|
||||||
width: 178px;
|
|
||||||
height: 178px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,195 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="main-table">
|
|
||||||
<BaseTableCom
|
|
||||||
:tableData="tableData"
|
|
||||||
:columnData="columnData"
|
|
||||||
:dropdownData="dropdownData"
|
|
||||||
:showSelect="true"
|
|
||||||
:pageSizes="[10, 15, 20]"
|
|
||||||
:total="100"
|
|
||||||
:showPagination="true"
|
|
||||||
messageBoxContent="确认要切换状态吗?"
|
|
||||||
messageBoxTitle="警告"
|
|
||||||
@updateSwitchState="updateSwitchState"
|
|
||||||
@updateTableData="updateTableData"
|
|
||||||
ref="baseTableComRef"
|
|
||||||
></BaseTableCom>
|
|
||||||
<div style="margin-top: 40px">
|
|
||||||
<el-button
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
// 打开/关闭表格加载动画
|
|
||||||
baseTableComRef.changeTableLoading()
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>表格加载动画</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
// 获取被勾选的行
|
|
||||||
const rows = baseTableComRef.getSelectRows()
|
|
||||||
console.log('被勾选的行', rows)
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>获取被勾选的行</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
// 获取分页数据
|
|
||||||
const paginationData = baseTableComRef.getPaginationData()
|
|
||||||
console.log('分页数据', paginationData)
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>获取分页数据</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import BaseTableCom from '@/components/table/BaseTableCom.vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
const baseTableComRef = ref(null)
|
|
||||||
|
|
||||||
const tableData = [
|
|
||||||
{
|
|
||||||
// tag列的数据
|
|
||||||
// tag 对应 列的prop
|
|
||||||
tag: {
|
|
||||||
// tagName和tagType不能变
|
|
||||||
tagName: '成功',
|
|
||||||
tagType: 'success'
|
|
||||||
},
|
|
||||||
// 图片列的数据
|
|
||||||
// picture 对应 列的prop
|
|
||||||
picture:
|
|
||||||
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
|
||||||
name: 'Tom1',
|
|
||||||
// 开关列对应的数据
|
|
||||||
switch: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: {
|
|
||||||
tagName: '信息',
|
|
||||||
tagType: 'info'
|
|
||||||
},
|
|
||||||
name: 'Tom2',
|
|
||||||
picture: 'https://placekitten.com/800/600',
|
|
||||||
switch: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: {
|
|
||||||
tagName: '警告',
|
|
||||||
tagType: 'warning'
|
|
||||||
},
|
|
||||||
name: 'Tom3',
|
|
||||||
picture: 'https://placebear.com/800/600',
|
|
||||||
switch: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: {
|
|
||||||
tagName: '默认',
|
|
||||||
tagType: 'default'
|
|
||||||
},
|
|
||||||
name: 'Tom4',
|
|
||||||
picture:
|
|
||||||
'https://loremflickr.com/cache/resized/65535_53040484749_6fd5663cd5_c_800_600_nofilter.jpg',
|
|
||||||
switch: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: {
|
|
||||||
tagName: '危险',
|
|
||||||
tagType: 'danger'
|
|
||||||
},
|
|
||||||
name: 'Tom5',
|
|
||||||
picture:
|
|
||||||
'https://fastly.picsum.photos/id/875/800/600.jpg?hmac=NXX-SwYycWXsbCWcJJnivoEGENe8Mp4fvuHqATxgOSY',
|
|
||||||
switch: false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
// 操作列
|
|
||||||
const dropdownData = [
|
|
||||||
{
|
|
||||||
command: 'command1',
|
|
||||||
handleAction: (row) => {
|
|
||||||
console.log('command1', row)
|
|
||||||
},
|
|
||||||
actionName: '删除',
|
|
||||||
// 图标类型 对应element图标库
|
|
||||||
icon: 'Delete',
|
|
||||||
// 权限名称
|
|
||||||
auth: 'delete'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
command: 'command2',
|
|
||||||
handleAction: (row) => {
|
|
||||||
console.log('command2', row)
|
|
||||||
},
|
|
||||||
actionName: '查看',
|
|
||||||
icon: 'View',
|
|
||||||
auth: 'view'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
command: 'conmmand3',
|
|
||||||
handleAction: (row) => {
|
|
||||||
console.log('command3', row)
|
|
||||||
},
|
|
||||||
actionName: '修改',
|
|
||||||
icon: 'Edit',
|
|
||||||
auth: 'edit'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
// 列属性
|
|
||||||
const columnData = [
|
|
||||||
// 图片列
|
|
||||||
{
|
|
||||||
prop: 'picture',
|
|
||||||
label: '图片列',
|
|
||||||
// 使用图片
|
|
||||||
pictureColumn: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'name',
|
|
||||||
label: '普通数据列',
|
|
||||||
// 列宽 单位为px
|
|
||||||
width: '200',
|
|
||||||
// 该列使用排序
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
// tag列
|
|
||||||
{
|
|
||||||
prop: 'tag',
|
|
||||||
label: 'tag列',
|
|
||||||
// 使用tag
|
|
||||||
tagColumn: true
|
|
||||||
},
|
|
||||||
// 开关列
|
|
||||||
{
|
|
||||||
prop: 'switch',
|
|
||||||
label: '开关列',
|
|
||||||
// 使用开关
|
|
||||||
switchColumn: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
// 开关状态变更时调用的函数
|
|
||||||
const updateSwitchState = (switchState) => {
|
|
||||||
console.log('改变后的switch状态', switchState)
|
|
||||||
// 开关切换时的动画
|
|
||||||
baseTableComRef.value.changeSwitchLoading()
|
|
||||||
// 模拟异步请求
|
|
||||||
setTimeout(() => {
|
|
||||||
baseTableComRef.value.changeSwitchLoading()
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 页面变化和页面数据容量被修改时触发的函数
|
|
||||||
const updateTableData = (pageSize, currentPage) => {
|
|
||||||
console.log('页码', currentPage)
|
|
||||||
console.log('页面数据容量', pageSize)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
Binary file not shown.
Loading…
Reference in new issue