init
This commit is contained in:
zzc
20
src/views/vab/backToTop/index.vue
Normal file
20
src/views/vab/backToTop/index.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="back-to-top-container">
|
||||
<div v-for="(item, index) in 100" :key="index" style="padding: 20px">测试滚轮显示返回顶部-{{ index }}</div>
|
||||
<!-- <el-tooltip placement="top" content="返回顶部"><vab-back-to-top transition-name="fade" /></el-tooltip> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BackToTop',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.placeholder-container div {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
176
src/views/vab/element/index.vue
Normal file
176
src/views/vab/element/index.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="element-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :lg="18" :md="18" :sm="24" :xl="16" :xs="24">
|
||||
<el-button type="primary" @click="dialogVisible = !dialogVisible">element全部文档点这里</el-button>
|
||||
<el-dialog :fullscreen="true" title="element文档" :visible.sync="dialogVisible">
|
||||
<iframe class="element-iframe" frameborder="0" src="https://element.eleme.cn/#/zh-CN/component/installation"></iframe>
|
||||
</el-dialog>
|
||||
<el-divider content-position="left">
|
||||
Tag 标签
|
||||
<a href="https://element.eleme.cn/#/zh-CN/component/tag" target="_blank">文档</a>
|
||||
</el-divider>
|
||||
<el-tag>标签一</el-tag>
|
||||
<el-tag type="success">标签二</el-tag>
|
||||
<el-tag type="info">标签三</el-tag>
|
||||
<el-tag type="warning">标签四</el-tag>
|
||||
<el-tag type="danger">标签五</el-tag>
|
||||
<el-tag effect="dark">标签一</el-tag>
|
||||
<el-tag effect="dark" type="success">标签二</el-tag>
|
||||
<el-tag effect="dark" type="info">标签三</el-tag>
|
||||
<el-tag effect="dark" type="warning">标签四</el-tag>
|
||||
<el-tag effect="dark" type="danger">标签五</el-tag>
|
||||
|
||||
<el-divider content-position="left">
|
||||
进度条
|
||||
<a href="https://element.eleme.cn/#/zh-CN/component/progress" target="_blank">文档</a>
|
||||
</el-divider>
|
||||
<el-progress :percentage="50" />
|
||||
<el-progress :percentage="100" status="success" />
|
||||
<el-progress :percentage="100" status="warning" />
|
||||
<el-progress :percentage="50" status="exception" />
|
||||
<el-progress :percentage="70" :stroke-width="26" :text-inside="true" />
|
||||
<el-progress :percentage="100" status="success" :stroke-width="24" :text-inside="true" />
|
||||
<el-progress :percentage="80" status="warning" :stroke-width="22" :text-inside="true" />
|
||||
<el-progress :percentage="50" status="exception" :stroke-width="20" :text-inside="true" />
|
||||
<el-progress :percentage="0" type="circle" />
|
||||
<el-progress :percentage="25" type="circle" />
|
||||
<el-progress :percentage="100" status="success" type="circle" />
|
||||
<el-progress :percentage="70" status="warning" type="circle" />
|
||||
<el-progress :percentage="50" status="exception" type="circle" />
|
||||
|
||||
<el-divider content-position="left">
|
||||
按钮
|
||||
<a href="https://element.eleme.cn/#/zh-CN/component/button" target="_blank">文档</a>
|
||||
</el-divider>
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button type="primary">主要按钮</el-button>
|
||||
<el-button type="success">成功按钮</el-button>
|
||||
<el-button type="info">信息按钮</el-button>
|
||||
<el-button type="warning">警告按钮</el-button>
|
||||
<el-button type="danger">危险按钮</el-button>
|
||||
<el-button plain>朴素按钮</el-button>
|
||||
<el-button plain type="primary">主要按钮</el-button>
|
||||
<el-button plain type="success">成功按钮</el-button>
|
||||
<el-button plain type="info">信息按钮</el-button>
|
||||
<el-button plain type="warning">警告按钮</el-button>
|
||||
<el-button plain type="danger">危险按钮</el-button>
|
||||
<el-button round>圆角按钮</el-button>
|
||||
<el-button round type="primary">主要按钮</el-button>
|
||||
<el-button round type="success">成功按钮</el-button>
|
||||
<el-button round type="info">信息按钮</el-button>
|
||||
<el-button round type="warning">警告按钮</el-button>
|
||||
<el-button round type="danger">危险按钮</el-button>
|
||||
<el-button circle icon="el-icon-search" />
|
||||
<el-button circle icon="el-icon-edit" type="primary" />
|
||||
<el-button circle icon="el-icon-check" type="success" />
|
||||
<el-button circle icon="el-icon-message" type="info" />
|
||||
<el-button circle icon="el-icon-star-off" type="warning" />
|
||||
<el-button circle icon="el-icon-delete" type="danger" />
|
||||
<el-button disabled>默认按钮</el-button>
|
||||
<el-button disabled type="primary">主要按钮</el-button>
|
||||
<el-button disabled type="success">成功按钮</el-button>
|
||||
<el-button disabled type="info">信息按钮</el-button>
|
||||
<el-button disabled type="warning">警告按钮</el-button>
|
||||
<el-button disabled type="danger">危险按钮</el-button>
|
||||
<el-button icon="el-icon-edit" type="primary" />
|
||||
<el-button icon="el-icon-share" type="primary" />
|
||||
<el-button icon="el-icon-delete" type="primary" />
|
||||
<el-button icon="el-icon-search" type="primary">搜索</el-button>
|
||||
<el-button type="primary">
|
||||
上传
|
||||
<i class="el-icon-upload el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-button :loading="true" type="primary">加载中</el-button>
|
||||
|
||||
<el-divider content-position="left">
|
||||
文字链接
|
||||
<a href="https://element.eleme.cn/#/zh-CN/component/link" target="_blank">文档</a>
|
||||
</el-divider>
|
||||
<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
|
||||
<el-link type="primary">主要链接</el-link>
|
||||
<el-link type="success">成功链接</el-link>
|
||||
<el-link type="warning">警告链接</el-link>
|
||||
<el-link type="danger">危险链接</el-link>
|
||||
<el-link type="info">信息链接</el-link>
|
||||
<el-link disabled>默认链接</el-link>
|
||||
<el-link disabled type="primary">主要链接</el-link>
|
||||
<el-link disabled type="success">成功链接</el-link>
|
||||
<el-link disabled type="warning">警告链接</el-link>
|
||||
<el-link disabled type="danger">危险链接</el-link>
|
||||
<el-link disabled type="info">信息链接</el-link>
|
||||
<el-link :underline="false">无下划线</el-link>
|
||||
<el-link>有下划线</el-link>
|
||||
<el-divider content-position="left">
|
||||
头像
|
||||
<a href="https://element.eleme.cn/#/zh-CN/component/avatar" target="_blank">文档</a>
|
||||
</el-divider>
|
||||
<el-avatar icon="el-icon-user-solid" />
|
||||
<el-divider content-position="left">
|
||||
页头
|
||||
<a href="https://element.eleme.cn/#/zh-CN/component/page-header" target="_blank">文档</a>
|
||||
</el-divider>
|
||||
<el-page-header content="详情页面" />
|
||||
<el-divider content-position="left">
|
||||
面包屑
|
||||
<a href="https://element.eleme.cn/#/zh-CN/component/breadcrumb" target="_blank">文档</a>
|
||||
</el-divider>
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
|
||||
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Element',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.element-container {
|
||||
::v-deep {
|
||||
.el-dialog__wrapper {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.el-tag,
|
||||
.el-button,
|
||||
.el-link {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.el-progress {
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.element-iframe {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 89vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
13
src/views/vab/errorLog/components/ErrorTest.vue
Normal file
13
src/views/vab/errorLog/components/ErrorTest.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<!-- js代码错误实时提醒测试 -->
|
||||
<div>{{ zxwk1998jiayou.zxwk1998jiayou }}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ErrorTest',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
24
src/views/vab/errorLog/index.vue
Normal file
24
src/views/vab/errorLog/index.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="errorLog-container">
|
||||
<el-divider content-position="left">这里会在顶部navbar上模拟一个控制台错误日志</el-divider>
|
||||
<el-button type="primary" @click="handleError">点击模拟一个zxwk1998jiayou的错误</el-button>
|
||||
<error-test v-if="show" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ErrorTest from './components/ErrorTest'
|
||||
|
||||
export default {
|
||||
name: 'ErrorLog',
|
||||
components: { ErrorTest },
|
||||
data() {
|
||||
return { show: false }
|
||||
},
|
||||
methods: {
|
||||
handleError() {
|
||||
this.show = true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
97
src/views/vab/form/index.vue
Normal file
97
src/views/vab/form/index.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
|
||||
<el-form ref="ruleForm" class="demo-ruleForm" label-width="100px" :model="ruleForm" :rules="rules">
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" prop="region">
|
||||
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai" />
|
||||
<el-option label="区域二" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送" prop="delivery">
|
||||
<el-switch v-model="ruleForm.delivery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type" />
|
||||
<el-checkbox label="地推活动" name="type" />
|
||||
<el-checkbox label="线下主题活动" name="type" />
|
||||
<el-checkbox label="单纯品牌曝光" name="type" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio label="线上品牌商赞助" />
|
||||
<el-radio label="线下场地免费" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式" prop="desc">
|
||||
<el-input v-model="ruleForm.desc" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Form',
|
||||
data() {
|
||||
return {
|
||||
ruleForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入活动名称', trigger: 'blur' },
|
||||
{
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '长度在 3 到 5 个字符',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
|
||||
type: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '请至少选择一个活动性质',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
|
||||
desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!')
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
139
src/views/vab/icon/colorfulIcon.vue
Normal file
139
src/views/vab/icon/colorfulIcon.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="colorful-icon-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-divider content-position="left">多彩图标在演示环境中使用的是cdn加速服务，开发时需存储到本地，点击图标即可复制源码</el-divider>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form :inline="true" label-width="80px" @submit.native.prevent>
|
||||
<el-form-item label="图标名称">
|
||||
<el-input v-model="queryForm.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<el-button native-type="submit" type="primary" @click="queryData">搜索</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label-width="0">
|
||||
<el-input :value="copyText" type="text"></el-input>
|
||||
</el-form-item>-->
|
||||
</el-form>
|
||||
</el-col>
|
||||
|
||||
<el-col v-for="(item, index) in queryIcon" :key="index" :lg="2" :md="3" :sm="8" :xl="2" :xs="6">
|
||||
<el-card shadow="hover" style="cursor: pointer" @click.native="handleCopyIcon(index, $event)">
|
||||
<vab-colorful-icon :icon-class="`https://gcore.jsdelivr.net/gh/zxwk1998/zx-colorful-icon@master/${item}.svg`" />
|
||||
</el-card>
|
||||
<div class="icon-text">
|
||||
{{ item }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page="queryForm.pageNo"
|
||||
:layout="layout"
|
||||
:page-size="queryForm.pageSize"
|
||||
:page-sizes="[72, 144, 216, 288]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getIconList } from '@/api/colorfulIcon'
|
||||
import clip from '@/utils/clipboard'
|
||||
|
||||
export default {
|
||||
name: 'ColorfulIcon',
|
||||
data() {
|
||||
return {
|
||||
copyText: '',
|
||||
layout: 'total, sizes, prev, pager, next, jumper',
|
||||
total: 0,
|
||||
background: true,
|
||||
height: 0,
|
||||
selectRows: '',
|
||||
elementLoadingText: '正在加载...',
|
||||
queryIcon: [],
|
||||
queryForm: {
|
||||
pageNo: 1,
|
||||
pageSize: 72,
|
||||
title: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
this.queryForm.pageSize = val
|
||||
this.fetchData()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.queryForm.pageNo = val
|
||||
this.fetchData()
|
||||
},
|
||||
queryData() {
|
||||
this.queryForm.pageNo = 1
|
||||
this.fetchData()
|
||||
},
|
||||
async fetchData() {
|
||||
const { data, totalCount } = await getIconList(this.queryForm)
|
||||
this.queryIcon = data
|
||||
this.allIcon = data
|
||||
this.total = totalCount
|
||||
},
|
||||
handleCopyIcon(index, event) {
|
||||
//const copyText = `<vab-colorful-icon icon-class="https://gcore.jsdelivr.net/gh/zxwk1998/zx-colorful-icon@master/${this.queryIcon[index]}.svg" />`;
|
||||
const copyText = `<vab-colorful-icon icon-class="${this.queryIcon[index]}" />`
|
||||
this.copyText = copyText
|
||||
clip(copyText, event)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.colorful-icon-container {
|
||||
::v-deep {
|
||||
.el-card__body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
|
||||
svg:not(:root) {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: $base-color-gray;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.svg-external-icon {
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
height: 30px;
|
||||
margin-top: -15px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
128
src/views/vab/icon/index.vue
Normal file
128
src/views/vab/icon/index.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="icon-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-divider content-position="left">点击图标即可复制源码</el-divider>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form :inline="true" label-width="80px" @submit.native.prevent>
|
||||
<el-form-item label="图标名称">
|
||||
<el-input v-model="queryForm.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<el-button native-type="submit" type="primary" @click="queryData">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
|
||||
<el-col v-for="(item, index) in queryIcon" :key="index" :lg="2" :md="3" :sm="8" :xl="2" :xs="6">
|
||||
<el-card shadow="hover" style="cursor: pointer" @click.native="handleCopyIcon(index, $event)">
|
||||
<vab-icon :icon="['fas', item]" />
|
||||
</el-card>
|
||||
<div class="icon-text">
|
||||
{{ item }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page="queryForm.pageNo"
|
||||
:layout="layout"
|
||||
:page-size="queryForm.pageSize"
|
||||
:page-sizes="[72, 144, 216, 288]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import clip from '@/utils/clipboard'
|
||||
import { getIconList } from '@/api/icon'
|
||||
|
||||
export default {
|
||||
name: 'AwesomeIcon',
|
||||
data() {
|
||||
return {
|
||||
copyText: '',
|
||||
layout: 'total, sizes, prev, pager, next, jumper',
|
||||
total: 0,
|
||||
background: true,
|
||||
height: 0,
|
||||
selectRows: '',
|
||||
elementLoadingText: '正在加载...',
|
||||
queryIcon: [],
|
||||
queryForm: {
|
||||
pageNo: 1,
|
||||
pageSize: 72,
|
||||
title: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
this.queryForm.pageSize = val
|
||||
this.fetchData()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.queryForm.pageNo = val
|
||||
this.fetchData()
|
||||
},
|
||||
queryData() {
|
||||
this.queryForm.pageNo = 1
|
||||
this.fetchData()
|
||||
},
|
||||
async fetchData() {
|
||||
const { data, totalCount } = await getIconList(this.queryForm)
|
||||
this.queryIcon = data
|
||||
this.allIcon = data
|
||||
this.total = totalCount
|
||||
},
|
||||
handleCopyIcon(index, event) {
|
||||
const copyText = `<vab-icon :icon="['fas', '${this.queryIcon[index]}']"></vab-icon>`
|
||||
this.copyText = copyText
|
||||
clip(copyText, event)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-container {
|
||||
::v-deep {
|
||||
.el-card__body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
|
||||
svg:not(:root).svg-inline--fa {
|
||||
font-size: 18px;
|
||||
color: $base-color-gray;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
height: 30px;
|
||||
margin-top: -15px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
src/views/vab/loading/index.vue
Normal file
63
src/views/vab/loading/index.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="loading-container">
|
||||
<el-divider content-position="left">传统loading</el-divider>
|
||||
<el-button type="primary" @click="handleLoading()">默认效果</el-button>
|
||||
<el-button type="primary" @click="handleLoading(1)">效果1</el-button>
|
||||
<el-button type="primary" @click="handleLoading(2)">效果2</el-button>
|
||||
<el-button type="primary" @click="handleLoading(3)">效果3</el-button>
|
||||
<el-button type="primary" @click="handleLoading(4)">效果4</el-button>
|
||||
<el-button type="primary" @click="handleLoading(5)">效果5</el-button>
|
||||
<el-button type="primary" @click="handleLoading(6)">效果6</el-button>
|
||||
<el-button type="primary" @click="handleLoading(7)">效果7</el-button>
|
||||
<el-button type="primary" @click="handleLoading(8)">效果8</el-button>
|
||||
<el-button type="primary" @click="handleLoading(9)">效果9</el-button>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<el-divider content-position="left">多彩loading</el-divider>
|
||||
<el-button type="primary" @click="handleColorfullLoading(1)">效果1</el-button>
|
||||
<el-button type="primary" @click="handleColorfullLoading(2)">效果2</el-button>
|
||||
<el-button type="primary" @click="handleColorfullLoading(3)">效果3</el-button>
|
||||
<el-button type="primary" @click="handleColorfullLoading(4)">效果4</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Loading',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
handleLoading(index) {
|
||||
const Loading = this.$baseLoading(index)
|
||||
setTimeout(() => {
|
||||
Loading.close()
|
||||
}, 3000)
|
||||
},
|
||||
handleColorfullLoading(index) {
|
||||
const Loading = this.$baseColorfullLoading(index)
|
||||
setTimeout(() => {
|
||||
Loading.close()
|
||||
}, 3000)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loading-container {
|
||||
::v-deep {
|
||||
.el-button {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
229
src/views/vab/lodash/index.vue
Normal file
229
src/views/vab/lodash/index.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="lodash-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover">
|
||||
<el-link href="https://www.lodashjs.com/" target="_blank" type="primary">lodashjs官网</el-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>去除数组array中的最后一个元素</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.initial([1, 2, 3])
|
||||
<br />
|
||||
// => [1, 2]
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>返回数组 array的第一个元素</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.head([1, 2, 3])
|
||||
<br />
|
||||
// => 1
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>合并数组</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.concat([1],[2])
|
||||
<br />
|
||||
// => [1,2]
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>左切片</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.drop([1, 2, 3],2切除的数量)
|
||||
<br />
|
||||
// => [3]
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>右切片</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.dropRight([1, 2, 3],2切除的数量)
|
||||
<br />
|
||||
// => [1]
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>修改拼接</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.join(['a', 'b', 'c'], '~');
|
||||
<br />
|
||||
// => 'a~b~c'
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>获取数组最后一个元素</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.last(['a', 'b', 'c']);
|
||||
<br />
|
||||
// => 'c'
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>数组去重</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.uniq(['a', 'b', 'a']);
|
||||
<br />
|
||||
// => ['a','b']
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>获取数组的最大值</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.max([4, 2, 8, 6])
|
||||
<br />
|
||||
// => 8
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>获取数组的最小值</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.min([4, 2, 8, 6])
|
||||
<br />
|
||||
// => 2
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>四舍五入(保留任意位小数)</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.round(4.006,2保持几位小数)
|
||||
<br />
|
||||
// => 4.01
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>数组内数据相加</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.sum([4, 2, 8, 6])
|
||||
<br />
|
||||
// => 20
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>返回随机数</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.random(0, 5)
|
||||
<br />
|
||||
// => 0到5任意数
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>返回数组内的随机数</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.sample([1, 2, 3, 4])
|
||||
<br />
|
||||
// => 数组1到4任意数
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>事件防抖动</span>
|
||||
</div>
|
||||
<div class="lodash-content">
|
||||
this.$baseLodash.debounce(@click的事件,延迟的毫秒数)
|
||||
<br />
|
||||
// => 点击后多久不可以点击
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Lodash',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.lodash-container {
|
||||
text-align: left;
|
||||
|
||||
::v-deep {
|
||||
.lodash-content {
|
||||
min-height: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
77
src/views/vab/more/index.vue
Normal file
77
src/views/vab/more/index.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="more-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
开源版本
|
||||
<el-button style="float: right; padding: 3px 0" type="text">永久免费 个人/商业使用</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li>永久开源免费，支持横纵布局切换</li>
|
||||
<li>
|
||||
保留浏览器控制台打印即可免费商用，页面中的作者信息可全部去除，无需保留，可快速入手框架，包含打包优化，公共外框布局layout本地化及自定义教程，如需自定义版权及作者信息￥299（自愿原则）
|
||||
</li>
|
||||
<li>
|
||||
开源地址
|
||||
<a href="https://github.com/zxwk1998/vue-admin-better" target="_blank">如果有幸帮到了你，麻烦给个star</a>
|
||||
</li>
|
||||
<li>提供讨论群专属文档，QQ群 972435319、1139183756</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
VIP群
|
||||
<el-button style="float: right; padding: 3px 0" type="text">￥100（2021年1月起不再提供此服务）</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li>为避免引起误解，不再针对开源用户提供付费vip群</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'More',
|
||||
components: {},
|
||||
data() {
|
||||
return { nodeEnv: process.env.NODE_ENV }
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.more-container {
|
||||
::v-deep {
|
||||
.el-card__body {
|
||||
> div {
|
||||
min-height: 220px;
|
||||
padding: 20px;
|
||||
|
||||
> ul {
|
||||
> li {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
src/views/vab/nested/menu1/index.vue
Normal file
7
src/views/vab/nested/menu1/index.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div class="menu1-container">
|
||||
<el-alert :closable="false" title="嵌套路由 1" type="success">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
13
src/views/vab/nested/menu1/menu1-1/index.vue
Normal file
13
src/views/vab/nested/menu1/menu1-1/index.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="menu1-1-container">
|
||||
<el-alert :closable="false" title="嵌套路由 1-1" type="success">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
[class*='-container'] {
|
||||
padding: 15px;
|
||||
background: $base-color-white;
|
||||
}
|
||||
</style>
|
||||
11
src/views/vab/nested/menu1/menu1-1/menu1-1-1/index.vue
Normal file
11
src/views/vab/nested/menu1/menu1-1/menu1-1-1/index.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="menu1-1-1-container">
|
||||
<el-alert :closable="false" title="嵌套路由 1-1-1" type="success" />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
[class*='-container'] {
|
||||
padding: 15px;
|
||||
background: $base-color-white;
|
||||
}
|
||||
</style>
|
||||
121
src/views/vab/permissions/index.vue
Normal file
121
src/views/vab/permissions/index.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="permissions-container">
|
||||
<el-divider content-position="left">intelligence模式,前端根据permissions拦截路由(演示环境,默认使用此方案)</el-divider>
|
||||
|
||||
<el-form ref="form" :inline="true" :model="form">
|
||||
<el-form-item label="切换账号">
|
||||
<el-radio-group v-model="form.account">
|
||||
<el-radio label="admin">admin</el-radio>
|
||||
<el-radio label="editor">editor</el-radio>
|
||||
<el-radio label="test">test</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleChangePermission">切换权限</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前账号拥有的权限">
|
||||
{{ JSON.stringify(permissions) }}
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-divider content-position="left">按钮级权限演示</el-divider>
|
||||
<el-button v-permissions="['admin']" type="primary">我是拥有["admin"]权限的按钮</el-button>
|
||||
<el-button v-permissions="['editor']" type="primary">我是拥有["editor"]权限的按钮</el-button>
|
||||
<el-button v-permissions="['test']" type="primary">我是拥有["test"]权限的按钮</el-button>
|
||||
<br />
|
||||
<br />
|
||||
<el-divider content-position="left">all模式,路由以及view文件引入全部交给后端(权限复杂,且随时变更,建议使用此方案)</el-divider>
|
||||
<p>
|
||||
settings.js配置authentication为all即可完全交由后端控制,mock中有后端接口示例,权限繁琐,有几十种权限的项目直接用这种,
|
||||
由于演示环境是mock数据模拟,可能无法展现此功能的配置,只做如下展示,便于您的理解
|
||||
</p>
|
||||
<br />
|
||||
<el-row :gutter="20">
|
||||
<el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
|
||||
<el-table
|
||||
border
|
||||
:data="tableData"
|
||||
default-expand-all
|
||||
row-key="path"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column label="name" prop="name" show-overflow-tooltip />
|
||||
<el-table-column label="path" prop="path" show-overflow-tooltip />
|
||||
<el-table-column label="component" prop="component" show-overflow-tooltip />
|
||||
<el-table-column label="redirect" prop="redirect" show-overflow-tooltip />
|
||||
<el-table-column label="标题" prop="meta.title" show-overflow-tooltip />
|
||||
<el-table-column label="图标" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.meta">
|
||||
<vab-icon v-if="row.meta.icon" :icon="['fas', row.meta.icon]" />
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否固定" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.meta">
|
||||
{{ row.meta.affix }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否无缓存" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.meta">
|
||||
{{ row.meta.noKeepAlive }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="badge" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.meta">
|
||||
{{ row.meta.badge }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { tokenTableName } from '@/config'
|
||||
import { getRouterList } from '@/api/router'
|
||||
|
||||
export default {
|
||||
name: 'Permissions',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
account: '',
|
||||
},
|
||||
tableData: [],
|
||||
res: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
username: 'user/username',
|
||||
permissions: 'user/permissions',
|
||||
}),
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
mounted() {
|
||||
this.form.account = this.username
|
||||
},
|
||||
methods: {
|
||||
handleChangePermission() {
|
||||
localStorage.setItem(tokenTableName, `${this.form.account}-accessToken`)
|
||||
location.reload()
|
||||
},
|
||||
async fetchData() {
|
||||
const res = await getRouterList()
|
||||
this.tableData = res.data
|
||||
this.res = res
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
70
src/views/vab/table/components/TableEdit.vue
Normal file
70
src/views/vab/table/components/TableEdit.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
|
||||
<el-form ref="form" label-width="80px" :model="form" :rules="rules">
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model.trim="form.title" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="作者" prop="author">
|
||||
<el-input v-model.trim="form.author" autocomplete="off" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
<el-button type="primary" @click="save">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { doEdit } from '@/api/table'
|
||||
|
||||
export default {
|
||||
name: 'TableEdit',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
title: '',
|
||||
author: '',
|
||||
},
|
||||
rules: {
|
||||
title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
|
||||
author: [{ required: true, trigger: 'blur', message: '请输入作者' }],
|
||||
},
|
||||
title: '',
|
||||
dialogFormVisible: false,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
showEdit(row) {
|
||||
if (!row) {
|
||||
this.title = '添加'
|
||||
} else {
|
||||
this.title = '编辑'
|
||||
this.form = Object.assign({}, row)
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
close() {
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = this.$options.data().form
|
||||
this.dialogFormVisible = false
|
||||
this.$emit('fetch-data')
|
||||
},
|
||||
save() {
|
||||
this.$refs['form'].validate(async (valid) => {
|
||||
if (valid) {
|
||||
const { msg } = await doEdit(this.form)
|
||||
this.$baseMessage(msg, 'success')
|
||||
this.$refs['form'].resetFields()
|
||||
this.dialogFormVisible = false
|
||||
this.$emit('fetch-data')
|
||||
this.form = this.$options.data().form
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
220
src/views/vab/table/index.vue
Normal file
220
src/views/vab/table/index.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="table-container">
|
||||
<vab-query-form>
|
||||
<vab-query-form-left-panel>
|
||||
<el-button icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
|
||||
<el-button icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button>
|
||||
<el-button type="primary" @click="testMessage">baseMessage</el-button>
|
||||
<el-button type="primary" @click="testALert">baseAlert</el-button>
|
||||
<el-button type="primary" @click="testConfirm">baseConfirm</el-button>
|
||||
<el-button type="primary" @click="testNotify">baseNotify</el-button>
|
||||
</vab-query-form-left-panel>
|
||||
<vab-query-form-right-panel>
|
||||
<el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
|
||||
<el-form-item>
|
||||
<el-input v-model="queryForm.title" placeholder="标题" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</vab-query-form-right-panel>
|
||||
</vab-query-form>
|
||||
|
||||
<el-table
|
||||
ref="tableSort"
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
:element-loading-text="elementLoadingText"
|
||||
:height="height"
|
||||
@selection-change="setSelectRows"
|
||||
@sort-change="tableSortChange"
|
||||
>
|
||||
<el-table-column show-overflow-tooltip type="selection" width="55" />
|
||||
<el-table-column label="序号" show-overflow-tooltip width="95">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标题" prop="title" show-overflow-tooltip />
|
||||
<el-table-column label="作者" prop="author" show-overflow-tooltip />
|
||||
<el-table-column label="头像" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="点击量" prop="pageViews" show-overflow-tooltip sortable />
|
||||
<el-table-column label="状态" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
|
||||
<el-tag :type="row.status | statusFilter">
|
||||
{{ row.status }}
|
||||
</el-tag>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时间" prop="datetime" show-overflow-tooltip width="200" />
|
||||
<el-table-column label="操作" show-overflow-tooltip width="180px">
|
||||
<template #default="{ row }">
|
||||
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button type="text" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page="queryForm.pageNo"
|
||||
:layout="layout"
|
||||
:page-size="queryForm.pageSize"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
<table-edit ref="edit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { doDelete, getList } from '@/api/table'
|
||||
import TableEdit from './components/TableEdit'
|
||||
|
||||
export default {
|
||||
name: 'ComprehensiveTable',
|
||||
components: {
|
||||
TableEdit,
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'gray',
|
||||
deleted: 'danger',
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgShow: true,
|
||||
list: [],
|
||||
imageList: [],
|
||||
listLoading: true,
|
||||
layout: 'total, sizes, prev, pager, next, jumper',
|
||||
total: 0,
|
||||
background: true,
|
||||
selectRows: '',
|
||||
elementLoadingText: '正在加载...',
|
||||
queryForm: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
title: '',
|
||||
},
|
||||
timeOutID: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
height() {
|
||||
return this.$baseTableHeight()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearTimeout(this.timeOutID)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
tableSortChange() {
|
||||
const imageList = []
|
||||
this.$refs.tableSort.tableData.forEach((item, index) => {
|
||||
imageList.push(item.img)
|
||||
})
|
||||
this.imageList = imageList
|
||||
},
|
||||
setSelectRows(val) {
|
||||
this.selectRows = val
|
||||
},
|
||||
handleAdd() {
|
||||
this.$refs['edit'].showEdit()
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.$refs['edit'].showEdit(row)
|
||||
},
|
||||
handleDelete(row) {
|
||||
if (row.id) {
|
||||
this.$baseConfirm('你确定要删除当前项吗', null, async () => {
|
||||
const { msg } = await doDelete({ ids: row.id })
|
||||
this.$baseMessage(msg, 'success')
|
||||
this.fetchData()
|
||||
})
|
||||
} else {
|
||||
if (this.selectRows.length > 0) {
|
||||
const ids = this.selectRows.map((item) => item.id).join()
|
||||
this.$baseConfirm('你确定要删除选中项吗', null, async () => {
|
||||
const { msg } = await doDelete({ ids: ids })
|
||||
this.$baseMessage(msg, 'success')
|
||||
this.fetchData()
|
||||
})
|
||||
} else {
|
||||
this.$baseMessage('未选中任何行', 'error')
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.queryForm.pageSize = val
|
||||
this.fetchData()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.queryForm.pageNo = val
|
||||
this.fetchData()
|
||||
},
|
||||
handleQuery() {
|
||||
this.queryForm.pageNo = 1
|
||||
this.fetchData()
|
||||
},
|
||||
async fetchData() {
|
||||
this.listLoading = true
|
||||
const { data, totalCount } = await getList(this.queryForm)
|
||||
this.list = data
|
||||
const imageList = []
|
||||
data.forEach((item, index) => {
|
||||
imageList.push(item.img)
|
||||
})
|
||||
this.imageList = imageList
|
||||
this.total = totalCount
|
||||
this.timeOutID = setTimeout(() => {
|
||||
this.listLoading = false
|
||||
}, 500)
|
||||
},
|
||||
testMessage() {
|
||||
this.$baseMessage('test1', 'success')
|
||||
},
|
||||
testALert() {
|
||||
this.$baseAlert('11')
|
||||
this.$baseAlert('11', '自定义标题', () => {
|
||||
/* 可以写回调; */
|
||||
})
|
||||
this.$baseAlert('11', null, () => {
|
||||
/* 可以写回调; */
|
||||
})
|
||||
},
|
||||
testConfirm() {
|
||||
this.$baseConfirm(
|
||||
'你确定要执行该操作?',
|
||||
null,
|
||||
() => {
|
||||
/* 可以写回调; */
|
||||
},
|
||||
() => {
|
||||
/* 可以写回调; */
|
||||
}
|
||||
)
|
||||
},
|
||||
testNotify() {
|
||||
this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
440
src/views/vab/tree/index.vue
Normal file
440
src/views/vab/tree/index.vue
Normal file
@@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<div class="tree-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
|
||||
<el-divider content-position="left">常规树</el-divider>
|
||||
<el-input v-model="filterText" placeholder="输入关键字过滤" />
|
||||
<el-tree
|
||||
ref="demoTree"
|
||||
class="vab-filter-tree"
|
||||
:data="data2"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
:default-expanded-keys="defaultExpendedKeys"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
:highlight-current="true"
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
@check="checkNode"
|
||||
@node-click="nodeClick"
|
||||
@node-collapse="nodeCollapse"
|
||||
@node-expand="nodeExpand"
|
||||
>
|
||||
<template #defalut="{ node, data }" class="vab-custom-tree-node">
|
||||
<span class="vab-tree-item">
|
||||
<i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
|
||||
{{ node.label }}
|
||||
</span>
|
||||
<span class="vab-tree-options">
|
||||
<a v-if="node.data.rank !== 4" class="vab-tree-btn" title="添加" @click="() => append(node, data, 0)">
|
||||
<i class="el-icon-plus"></i>
|
||||
</a>
|
||||
<a class="vab-tree-btn" title="编辑" @click="() => edit(node, data, 1)">
|
||||
<i class="el-icon-edit"></i>
|
||||
</a>
|
||||
<a v-if="node.data.rank !== 1" class="vab-tree-btn" title="刪除" @click="() => remove(node, data)">
|
||||
<i class="el-icon-delete"></i>
|
||||
</a>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-col>
|
||||
<el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
|
||||
<el-divider content-position="left">懒加载树</el-divider>
|
||||
<el-input v-model.lazy="keyW" class="input-with-select" placeholder="请输入内容" :value="keyW" @keyup.enter.native="showTreeList" />
|
||||
<div v-show="isShow" class="blur-tree">
|
||||
<el-tree
|
||||
ref="treeFilter"
|
||||
class="vab-filter-tree"
|
||||
:data="filterDevLlist"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
node-key="indexCode"
|
||||
:props="defaultProps"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<template #defalut="{ node }" class="vab-custom-tree-node">
|
||||
<span class="vab-tree-item">
|
||||
<i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
|
||||
{{ node.label }}
|
||||
</span>
|
||||
<span class="vab-tree-options">
|
||||
<a v-if="node.data.rank !== 4" class="vab-tree-btn" title="添加">
|
||||
<i class="el-icon-plus"></i>
|
||||
</a>
|
||||
<a class="vab-tree-btn" title="编辑">
|
||||
<i class="el-icon-edit"></i>
|
||||
</a>
|
||||
<a v-if="node.data.rank !== 1" class="vab-tree-btn" title="刪除">
|
||||
<i class="el-icon-delete"></i>
|
||||
</a>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<div v-show="!isShow" class="el-tree-wrap">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
v-loading="loading"
|
||||
class="vab-filter-tree"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
lazy
|
||||
:load="loadNode"
|
||||
node-key="indexCode"
|
||||
:props="defaultProps"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<template #defalut="{ node }" class="vab-custom-tree-node">
|
||||
<span class="vab-tree-item">
|
||||
<i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
|
||||
{{ node.label }}
|
||||
</span>
|
||||
<span class="vab-tree-options">
|
||||
<!-- <a v-if="node.data.rank !== 4" class="vab-tree-btn" title="添加""><i class="el-icon-plus"></i></a> -->
|
||||
<a class="vab-tree-btn" title="编辑">
|
||||
<i class="el-icon-edit"></i>
|
||||
</a>
|
||||
<a v-if="node.data.rank !== 1" class="vab-tree-btn" title="刪除">
|
||||
<i class="el-icon-delete"></i>
|
||||
</a>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
|
||||
<el-divider content-position="left">单选树</el-divider>
|
||||
<el-select
|
||||
ref="singleTree"
|
||||
v-model="singleSelectTreeVal"
|
||||
class="vab-tree-select"
|
||||
clearable
|
||||
popper-class="select-tree-popper"
|
||||
value-key="id"
|
||||
@clear="selectTreeClearHandle('single')"
|
||||
>
|
||||
<el-option :value="singleSelectTreeKey">
|
||||
<el-tree
|
||||
id="singleSelectTree"
|
||||
ref="singleSelectTree"
|
||||
:current-node-key="singleSelectTreeKey"
|
||||
:data="selectTreeData"
|
||||
:default-expanded-keys="selectTreeDefaultSelectedKeys"
|
||||
:highlight-current="true"
|
||||
node-key="id"
|
||||
:props="selectTreeDefaultProps"
|
||||
@node-click="selectTreeNodeClick"
|
||||
>
|
||||
<template #defalut="{ node }" class="vab-custom-tree-node">
|
||||
<span class="vab-tree-item">{{ node.label }}</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
|
||||
<el-divider content-position="left">多选树</el-divider>
|
||||
<el-select
|
||||
v-model="multipleSelectTreeVal"
|
||||
class="vab-tree-select"
|
||||
clearable
|
||||
collapse-tags
|
||||
multiple
|
||||
popper-class="select-tree-popper"
|
||||
@change="changeMultipleSelectTreeHandle"
|
||||
@clear="selectTreeClearHandle('multiple')"
|
||||
@remove-tag="removeSelectTreeTag"
|
||||
>
|
||||
<el-option :value="multipleSelectTreeKey">
|
||||
<el-tree
|
||||
id="multipleSelectTree"
|
||||
ref="multipleSelectTree"
|
||||
:current-node-key="multipleSelectTreeKey"
|
||||
:data="selectTreeData"
|
||||
:default-checked-keys="selectTreeDefaultSelectedKeys"
|
||||
:default-expanded-keys="selectTreeDefaultSelectedKeys"
|
||||
:highlight-current="true"
|
||||
node-key="id"
|
||||
:props="selectTreeDefaultProps"
|
||||
show-checkbox
|
||||
@check="multipleSelectTreeCheckNode"
|
||||
/>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--添加/编辑节点弹框-------------------start-->
|
||||
<el-dialog
|
||||
class="tree-operate-dialog"
|
||||
:title="dialogTitle"
|
||||
:visible.sync="treeDialogVisible"
|
||||
width="400px"
|
||||
@close="treeDialogVisible = false"
|
||||
>
|
||||
<el-form ref="treeForm" :model="treeForm">
|
||||
<el-form-item label="节点名称" required>
|
||||
<el-input v-model="treeForm.name" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="treeDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveTree">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--添加/编辑节点弹框-------------------end-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTreeList } from '@/api/tree'
|
||||
|
||||
export default {
|
||||
name: 'Tree',
|
||||
data() {
|
||||
return {
|
||||
dialogTitle: '添加节点',
|
||||
treeFlag: 0,
|
||||
treeDialogVisible: false,
|
||||
treeForm: {
|
||||
id: '',
|
||||
name: '',
|
||||
},
|
||||
checkNodeKeys: [],
|
||||
filterText: '',
|
||||
data2: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
},
|
||||
defaultExpendedKeys: [],
|
||||
defaultCheckedKeys: [],
|
||||
loading: true,
|
||||
keyW: '',
|
||||
filterDevLlist: [],
|
||||
isShow: false,
|
||||
updateTree: true,
|
||||
/* 单选树-多选树---------开始 */
|
||||
selectLevel: 4, // 树可选叶子level等级
|
||||
singleSelectTreeVal: '', //单选树默认label值
|
||||
singleSelectTreeKey: '', //单选树默认key值
|
||||
selectTreeData: [], //单选树的值
|
||||
selectTreeDefaultSelectedKeys: [], //单选树默认展开的key值数组
|
||||
selectTreeDefaultProps: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
},
|
||||
multipleSelectTreeVal: [], //多选树默认label值
|
||||
multipleSelectTreeKey: '', //多选树默认key值
|
||||
/* 单选树-多选树---------结束 */
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.demoTree.filter(val)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getTreeListFuc(1)
|
||||
this.setCheckedKeys()
|
||||
// 初始化单选树
|
||||
this.initSingleTree('single')
|
||||
// 初始化多选树
|
||||
this.initSingleTree('multiple')
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 树level小于n级展开方法
|
||||
openTree(treeData, n) {
|
||||
const each = (data) => {
|
||||
data.forEach((e) => {
|
||||
if (e.rank <= n) {
|
||||
this.defaultExpendedKeys.push(e.id)
|
||||
}
|
||||
if (e.children.length > 0) {
|
||||
each(e.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
each(treeData)
|
||||
},
|
||||
// 获取tree数据
|
||||
async getTreeListFuc(flag) {
|
||||
const { data } = await getTreeList()
|
||||
this.data2 = data
|
||||
if (flag) {
|
||||
this.openTree(this.data2, 2)
|
||||
}
|
||||
},
|
||||
// 节点过滤操作
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.name.indexOf(value) !== -1
|
||||
},
|
||||
// 添加节点操作
|
||||
append(node, data, flag) {
|
||||
this.treeFlag = flag
|
||||
this.dialogTitle = '添加节点'
|
||||
this.treeForm = {
|
||||
id: '',
|
||||
name: '',
|
||||
}
|
||||
this.treeDialogVisible = true
|
||||
},
|
||||
// 编辑节点操作
|
||||
edit(node, data, flag) {
|
||||
this.treeFlag = flag
|
||||
this.dialogTitle = '编辑节点'
|
||||
this.treeForm = {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
}
|
||||
this.treeDialogVisible = true
|
||||
},
|
||||
// 删除节点操作
|
||||
remove(node, data) {
|
||||
this.$baseConfirm('你确定要删除该节点?', null, async () => {
|
||||
const { msg } = getTreeList()
|
||||
this.$baseMessage(msg, 'success')
|
||||
this.getTreeListFuc(0)
|
||||
})
|
||||
},
|
||||
// 保存添加和编辑
|
||||
saveTree() {
|
||||
this.$refs.treeForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
const { msg } = await getTreeList()
|
||||
this.$baseMessage(msg, 'success')
|
||||
this.treeDialogVisible = false
|
||||
this.getTreeListFuc(0)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 设置节点选中
|
||||
setCheckedKeys() {
|
||||
this.$refs.demoTree.setCheckedKeys([1])
|
||||
},
|
||||
// 点击叶子节点
|
||||
nodeClick(data, node, el) {},
|
||||
// 节点选中操作
|
||||
checkNode(data, node, el) {
|
||||
this.checkNodeKeys = node.checkedKeys
|
||||
},
|
||||
// 节点展开操作
|
||||
nodeExpand(data, node, el) {
|
||||
this.defaultExpendedKeys.push(data.id)
|
||||
},
|
||||
// 节点关闭操作
|
||||
nodeCollapse(data, node, el) {
|
||||
this.defaultExpendedKeys.splice(
|
||||
this.defaultExpendedKeys.findIndex((item) => item.id === data.id),
|
||||
1
|
||||
)
|
||||
},
|
||||
async loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
const { data } = await getTreeList()
|
||||
this.loading = false
|
||||
return resolve(data)
|
||||
} else {
|
||||
const { data } = await getTreeList()
|
||||
return resolve(res.data)
|
||||
}
|
||||
},
|
||||
//懒加载树输入框筛选方法
|
||||
async showTreeList(value) {
|
||||
if (typeof value === 'string') {
|
||||
this.keyW = value.trim()
|
||||
}
|
||||
if (this.keyW.length !== 0) {
|
||||
// 请求后台返回查询结果
|
||||
let treeOption = {}
|
||||
treeOption = {
|
||||
keyWord: this.keyW,
|
||||
}
|
||||
const { data } = await getTreeList()
|
||||
this.filterDevLlist = data
|
||||
this.isShow = true
|
||||
} else {
|
||||
this.isShow = false
|
||||
}
|
||||
},
|
||||
/* 单选/多选树方法-------------------开始 */
|
||||
// 初始化单选树的值
|
||||
async initSingleTree(treeType) {
|
||||
const { data } = await getTreeList()
|
||||
this.selectTreeData = data
|
||||
this.$nextTick(() => {
|
||||
this.selectTreeDefaultSelectedKeys = this.singleSelectTreeKey.split(',') // 设置默认展开
|
||||
if (treeType == 'single') {
|
||||
//单选树
|
||||
this.$refs.singleSelectTree.setCurrentKey(this.singleSelectTreeKey) // 设置默认选中
|
||||
} else {
|
||||
// 多选树
|
||||
this.$refs.multipleSelectTree.setCheckedKeys(this.selectTreeDefaultSelectedKeys)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 清除单选树选中
|
||||
selectTreeClearHandle(type) {
|
||||
this.selectTreeDefaultSelectedKeys = []
|
||||
this.clearSelected()
|
||||
if (type == 'single') {
|
||||
this.singleSelectTreeVal = ''
|
||||
this.singleSelectTreeKey = ''
|
||||
this.$refs.singleSelectTree.setCurrentKey('') // 设置默认选中
|
||||
} else {
|
||||
this.multipleSelectTreeVal = []
|
||||
this.multipleSelectTreeKey = ''
|
||||
this.$refs.multipleSelectTree.setCheckedKeys([])
|
||||
}
|
||||
},
|
||||
/* 清空选中样式 */
|
||||
clearSelected() {
|
||||
const allNode = document.querySelectorAll('#singleSelectTree .el-tree-node')
|
||||
allNode.forEach((element) => element.classList.remove('is-current'))
|
||||
},
|
||||
// select多选时移除某项操作
|
||||
removeSelectTreeTag(val) {
|
||||
const stack = JSON.parse(JSON.stringify(this.selectTreeData))
|
||||
while (stack.length) {
|
||||
const curr = stack.shift()
|
||||
if (curr.name == val) {
|
||||
return this.$refs.multipleSelectTree.setChecked(curr.id, false)
|
||||
}
|
||||
if (curr.children && curr.children.length) {
|
||||
stack.unshift(...curr.children)
|
||||
}
|
||||
}
|
||||
},
|
||||
changeMultipleSelectTreeHandle(val) {},
|
||||
// 点击叶子节点
|
||||
selectTreeNodeClick(data, node, el) {
|
||||
if (data.rank >= this.selectLevel) {
|
||||
this.singleSelectTreeVal = data.name
|
||||
this.singleSelectTreeKey = data.id
|
||||
this.$refs.singleTree.blur()
|
||||
}
|
||||
},
|
||||
// 节点选中操作
|
||||
multipleSelectTreeCheckNode(data, node, el) {
|
||||
const checkedNodes = this.$refs.multipleSelectTree.getCheckedNodes()
|
||||
const keyArr = []
|
||||
const valueArr = []
|
||||
checkedNodes.forEach((item) => {
|
||||
if (item.rank >= this.selectLevel) {
|
||||
keyArr.push(item.id)
|
||||
valueArr.push(item.name)
|
||||
}
|
||||
})
|
||||
this.multipleSelectTreeVal = valueArr
|
||||
this.multipleSelectTreeKey = keyArr.join(',')
|
||||
},
|
||||
/* 单选/多选树方法-------------------结束 */
|
||||
},
|
||||
}
|
||||
</script>
|
||||
26
src/views/vab/upload/index.vue
Normal file
26
src/views/vab/upload/index.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<el-divider content-position="left">演示环境可能无法模拟上传</el-divider>
|
||||
<vab-upload ref="vabUpload" :limit="1" name="file" :size="2" url="/upload" />
|
||||
<el-button type="primary" @click="handleShow({ key: 'value' })">模拟上传</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VabUpload from '@/components/VabUpload'
|
||||
|
||||
export default {
|
||||
name: 'Upload',
|
||||
components: {
|
||||
VabUpload,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
handleShow(data) {
|
||||
this.$refs['vabUpload'].handleShow(data)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
85
src/views/vab/webSocket/index.vue
Normal file
85
src/views/vab/webSocket/index.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="webSocket-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
|
||||
<el-alert :closable="false" type="success">webSocket连接{{ status }}！</el-alert>
|
||||
<br />
|
||||
<el-form ref="form" label-width="100px" :model="form" :rules="rules">
|
||||
<el-form-item label="地址">
|
||||
<el-input v-model="url" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="消息" prop="message">
|
||||
<el-input v-model="form.message" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit">发送消息</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="返回信息汇总">
|
||||
{{ data }}
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WebSocket',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
url: 'ws://123.207.136.134:9010/ajaxchattest',
|
||||
webSocket: null,
|
||||
data: [],
|
||||
status: '',
|
||||
form: { message: null },
|
||||
rules: {
|
||||
message: [{ required: true, message: '请输入消息', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
destroyed() {
|
||||
this.webSocket.close()
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.send(this.form.message)
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
init() {
|
||||
const wsuri = this.url
|
||||
this.webSocket = new WebSocket(wsuri)
|
||||
this.webSocket.onmessage = this.onmessage
|
||||
this.webSocket.onopen = this.onopen
|
||||
this.webSocket.onerror = this.onerror
|
||||
this.webSocket.onclose = this.onclose
|
||||
},
|
||||
onopen() {
|
||||
this.status = '成功'
|
||||
},
|
||||
onerror() {
|
||||
this.status = '失败'
|
||||
this.initWebSocket()
|
||||
},
|
||||
onmessage({ data }) {
|
||||
//截掉测试webSocket地址广告
|
||||
this.data.push(data.substring(0, data.length - 66))
|
||||
},
|
||||
send(Data) {
|
||||
this.webSocket.send(Data)
|
||||
},
|
||||
onclose(e) {
|
||||
this.status = '断开'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user