提交数据
This commit is contained in:
zouzhibing
parent
03444338c9
commit
acbc11794a
77
README.md
77
README.md
|
|
@ -1,24 +1,75 @@
|
|||
# ad
|
||||
# 简介
|
||||
vue-element-perfect 是一个后台前端解决方案, 基于Vue3.0+TS+Element-plus实现。它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件。
|
||||
|
||||
## 效果预览
|
||||
|
||||
### 在线预览点击 —— [企业级、通用型中后台前端解决方案 ](http://182.61.5.190:8889/)
|
||||
|
||||
### 附上github地址点击跳转 [vue-admin-perfect](https://github.com/zouzhibin/vue-admin-perfect)
|
||||
|
||||
## 目录结构介绍
|
||||
|
||||
## Project setup
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
├─assets 放置一些静态文件
|
||||
├─components 放置组件
|
||||
├─layout 首页布局
|
||||
│ ├─components
|
||||
│ │ ├─Sidebar 侧边栏配置
|
||||
│ │ ├─TagsView 标签栏配置
|
||||
│ │ └─UHeader 头部内容配置
|
||||
│ └─hooks
|
||||
├─router 路由配置
|
||||
├─store 数据存储
|
||||
├─styles 样式文件
|
||||
├─utils 工具方法
|
||||
└─views 页面配置方法
|
||||
└─permission 路由拦截 权限配置
|
||||
```
|
||||
|
||||
## 技术栈
|
||||
vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
||||
|
||||
## 实现功能
|
||||
- 登录逻辑
|
||||
- 权限校验
|
||||
- 侧边栏导航显示
|
||||
- 打印
|
||||
- 地图
|
||||
- 头像裁剪
|
||||
- 无限滚动
|
||||
- 多标签显示
|
||||
- 退出
|
||||
- 其他各组件
|
||||
|
||||
|
||||
## 项目 master 分支 基于vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
||||
```
|
||||
# 克隆项目
|
||||
git clone https://github.com/zouzhibin/vue-admin-perfect.git
|
||||
|
||||
# 安装依赖
|
||||
yarn
|
||||
|
||||
# 本地开发 启动项目
|
||||
yarn serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
|
||||
## 项目 uniapp 分支 基于 uniapp +vuex +element scss
|
||||
|
||||
```
|
||||
yarn build
|
||||
# 克隆项目 切换 uniapp分支
|
||||
git clone https://github.com/zouzhibin/vue-admin-perfect.git
|
||||
|
||||
# 安装依赖
|
||||
yarn
|
||||
|
||||
# 本地开发 启动项目
|
||||
hbuilder运行浏览器启动
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
yarn lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
#强制推送
|
||||
#!/usr/bin/env bash
|
||||
set -e
|
||||
npm run build
|
||||
cd dist
|
||||
touch .nojekyll
|
||||
git init
|
||||
git add -A
|
||||
git commit -m 'deploy'
|
||||
git push -f "https://${access_token}@gitee.com/yuanzbz/vue-admin-perfect.git" master:gh-pages
|
||||
git push -f "https://${access_token}@github.com/zouzhibin/vue-admin-perfect.git" master:gh-pages
|
||||
|
||||
cd -
|
||||
exec /bin/bash
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -60,9 +60,6 @@
|
|||
"sass-loader": "^8.0.2",
|
||||
"typescript": "~4.1.5"
|
||||
},
|
||||
"gitHooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,vue,ts,tsx}": [
|
||||
"vue-cli-service lint",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
#强制推送
|
||||
#!/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
|
||||
git push -f "https://${access_token}@github.com/zouzhibin/vue-admin-perfect.git" master
|
||||
exec /bin/bash
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -20,22 +20,21 @@
|
|||
</div>
|
||||
</el-popover>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import { ref } from 'vue'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
|
||||
const activeName = ref('first')
|
||||
const toGitHub = ()=>{
|
||||
const activeName = ref('first')
|
||||
const toGitHub = () => {
|
||||
window.open('https://github.com/zouzhibin/vue-admin-perfect')
|
||||
}
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
}
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -13,18 +13,18 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import USetting from '@/components/u-setting/index.vue'
|
||||
import {useStore} from "vuex";
|
||||
import {computed, ref,} from 'vue'
|
||||
const store = useStore()
|
||||
import USetting from '@/components/u-setting/index.vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { computed, ref } from 'vue'
|
||||
const store = useStore()
|
||||
|
||||
const cachedViews = computed(()=>{
|
||||
const cachedViews = computed(() => {
|
||||
return store.state.tagsView.cachedViews
|
||||
})
|
||||
})
|
||||
|
||||
const isReload = computed(()=>{
|
||||
const isReload = computed(() => {
|
||||
return store.state.app.isReload
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -41,7 +41,6 @@
|
|||
// background: white;
|
||||
}
|
||||
|
||||
|
||||
//// 主内容区动画
|
||||
//.main-enter-active {
|
||||
// transition: 0.2s;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/** When your routing table is too long, you can split it into small modules**/
|
||||
|
||||
import Layout from "@/layout/index.vue";
|
||||
import Layout from '@/layout/index.vue'
|
||||
|
||||
const othersRouter = {
|
||||
path: '/other',
|
||||
|
|
@ -16,31 +16,31 @@ const othersRouter = {
|
|||
path: 'editor',
|
||||
component: () => import('@/views/other/editor.vue'),
|
||||
name: 'editor',
|
||||
meta: { title: '富文本编辑器', roles:['other'] }
|
||||
meta: { title: '富文本编辑器', roles: ['other'] }
|
||||
},
|
||||
{
|
||||
path: 'mark-down',
|
||||
component: () => import('@/views/other/mark-down.vue'),
|
||||
name: 'mark-down',
|
||||
meta: { title: 'markDown', roles:['other']}
|
||||
meta: { title: 'markDown', roles: ['other'] }
|
||||
},
|
||||
{
|
||||
path: 'print',
|
||||
component: () => import('@/views/other/print.vue'),
|
||||
name: 'print',
|
||||
meta: { title: '打印', }
|
||||
meta: { title: '打印' }
|
||||
},
|
||||
{
|
||||
path: 'cropper',
|
||||
component: () => import('@/views/other/cropper/index.vue'),
|
||||
name: 'cropper',
|
||||
meta: { title: '头像裁剪' , }
|
||||
meta: { title: '头像裁剪' }
|
||||
},
|
||||
{
|
||||
path: 'grid-sorter',
|
||||
component: () => import('@/views/other/grid-sorter.vue'),
|
||||
name: 'grid-sorter',
|
||||
meta: { title: '卡片拖拽', }
|
||||
meta: { title: '卡片拖拽' }
|
||||
},
|
||||
// {
|
||||
// path: 'splitpane',
|
||||
|
|
@ -52,20 +52,20 @@ const othersRouter = {
|
|||
path: 'qrcode',
|
||||
component: () => import('@/views/other/qrcode.vue'),
|
||||
name: 'qrcode',
|
||||
meta: { title: '生成二维码', }
|
||||
meta: { title: '生成二维码' }
|
||||
},
|
||||
{
|
||||
path: 'right-menu',
|
||||
component: () => import('@/views/other/right-menu.vue'),
|
||||
name: 'right-menu',
|
||||
meta: { title: '右键菜单',}
|
||||
meta: { title: '右键菜单' }
|
||||
},
|
||||
{
|
||||
path: 'count',
|
||||
component: () => import('@/views/other/count.vue'),
|
||||
name: 'count',
|
||||
meta: { title: '数字自增长',}
|
||||
},
|
||||
meta: { title: '数字自增长' }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@
|
|||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {geoJson} from './get.js'
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import { geoJson } from './get.js'
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
const props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
|
|
@ -29,113 +29,109 @@
|
|||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
var geoGpsMap = [109.1162, 34.2004]
|
||||
var geoCoordMap = {
|
||||
"江苏": [118.8062, 31.9208],
|
||||
'内蒙古': [110.3467, 41.4899],
|
||||
"辽宁": [123.1238, 42.1216],
|
||||
"陕西": [109.1162, 34.2004],
|
||||
"甘肃": [103.5901, 36.3043],
|
||||
"青海": [101.4038, 36.8207],
|
||||
"新疆": [87.9236, 43.5883],
|
||||
var geoGpsMap = [109.1162, 34.2004]
|
||||
var geoCoordMap = {
|
||||
江苏: [118.8062, 31.9208],
|
||||
内蒙古: [110.3467, 41.4899],
|
||||
辽宁: [123.1238, 42.1216],
|
||||
陕西: [109.1162, 34.2004],
|
||||
甘肃: [103.5901, 36.3043],
|
||||
青海: [101.4038, 36.8207],
|
||||
新疆: [87.9236, 43.5883],
|
||||
|
||||
"河南": [113.4668, 34.6234],
|
||||
"西藏": [116.3896, 39.91],
|
||||
"浙江": [119.5313, 29.8773],
|
||||
"福建": [119.4543, 25.9222],
|
||||
"湖南": [113.0823, 28.2568],
|
||||
"四川": [113.0823, 28.2568],
|
||||
"云南": [102.9199, 25.4663],
|
||||
"广东": [113.12244, 23.009505],
|
||||
"海南": [110.3893, 19.8516]
|
||||
};
|
||||
河南: [113.4668, 34.6234],
|
||||
西藏: [116.3896, 39.91],
|
||||
浙江: [119.5313, 29.8773],
|
||||
福建: [119.4543, 25.9222],
|
||||
湖南: [113.0823, 28.2568],
|
||||
四川: [113.0823, 28.2568],
|
||||
云南: [102.9199, 25.4663],
|
||||
广东: [113.12244, 23.009505],
|
||||
海南: [110.3893, 19.8516]
|
||||
}
|
||||
|
||||
var value = {
|
||||
'江苏': 10000,
|
||||
'内蒙古': 10000,
|
||||
'辽宁': 10000,
|
||||
'陕西': 10000,
|
||||
'福建': 10000,
|
||||
'甘肃': 10000,
|
||||
'青海': 10000,
|
||||
'新疆': 10000,
|
||||
'湖北': 10000,
|
||||
'浙江': 10000,
|
||||
'河南': 10000,
|
||||
'湖南': 10000,
|
||||
'云南': 10000,
|
||||
'广东': 10000,
|
||||
'海南': 10000,
|
||||
'西藏': 10000,
|
||||
var value = {
|
||||
江苏: 10000,
|
||||
内蒙古: 10000,
|
||||
辽宁: 10000,
|
||||
陕西: 10000,
|
||||
福建: 10000,
|
||||
甘肃: 10000,
|
||||
青海: 10000,
|
||||
新疆: 10000,
|
||||
湖北: 10000,
|
||||
浙江: 10000,
|
||||
河南: 10000,
|
||||
湖南: 10000,
|
||||
云南: 10000,
|
||||
广东: 10000,
|
||||
海南: 10000,
|
||||
西藏: 10000
|
||||
|
||||
}
|
||||
var colors = '#f9b207'
|
||||
|
||||
var year = ['长春', '长春', '青岛', '青岛', '成都', '成都']
|
||||
var mapData = []
|
||||
|
||||
};
|
||||
var colors = '#f9b207';
|
||||
/* 柱子Y名称 */
|
||||
var categoryData = []
|
||||
var barData = []
|
||||
|
||||
var year = ["长春", "长春", "青岛", "青岛", "成都", "成都"];
|
||||
var mapData = [];
|
||||
|
||||
/*柱子Y名称*/
|
||||
var categoryData = [];
|
||||
var barData = [];
|
||||
|
||||
for (var key in geoCoordMap) {
|
||||
for (var key in geoCoordMap) {
|
||||
mapData.push({
|
||||
"year": '陕西',
|
||||
"name": key,
|
||||
"value": value[key] / 100,
|
||||
"value1": value[key] / 100,
|
||||
});
|
||||
}
|
||||
year: '陕西',
|
||||
name: key,
|
||||
value: value[key] / 100,
|
||||
value1: value[key] / 100
|
||||
})
|
||||
}
|
||||
|
||||
mapData.sort(function sortNumber(a, b) {
|
||||
mapData.sort(function sortNumber (a, b) {
|
||||
return a.value - b.value
|
||||
});
|
||||
for (var j = 0; j < mapData.length; j++) {
|
||||
barData.push(mapData[j].value1);
|
||||
categoryData.push(mapData[j].name);
|
||||
}
|
||||
})
|
||||
for (var j = 0; j < mapData.length; j++) {
|
||||
barData.push(mapData[j].value1)
|
||||
categoryData.push(mapData[j].name)
|
||||
}
|
||||
|
||||
echarts.registerMap('china', geoJson);
|
||||
var convertData = function(data) {
|
||||
var res = [];
|
||||
echarts.registerMap('china', geoJson)
|
||||
var convertData = function (data) {
|
||||
var res = []
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
var geoCoord = geoCoordMap[data[i].name]
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
var convertToLineData = function(data, gps) {
|
||||
var res = [];
|
||||
return res
|
||||
}
|
||||
var convertToLineData = function (data, gps) {
|
||||
var res = []
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var dataItem = data[i];
|
||||
var toCoord = geoCoordMap[dataItem.name];
|
||||
var dataItem = data[i]
|
||||
var toCoord = geoCoordMap[dataItem.name]
|
||||
// debugger;
|
||||
var fromCoord = gps; //郑州
|
||||
var fromCoord = gps // 郑州
|
||||
// var toCoord = geoGps[Math.random()*3];
|
||||
if (fromCoord && toCoord) {
|
||||
res.push([{
|
||||
coord: fromCoord,
|
||||
value: dataItem.value
|
||||
}, {
|
||||
coord: toCoord,
|
||||
}]);
|
||||
coord: toCoord
|
||||
}])
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
|
||||
const options = {
|
||||
const options = {
|
||||
backgroundColor: '#001540',
|
||||
geo: {
|
||||
show: true,
|
||||
|
|
@ -180,12 +176,12 @@
|
|||
},
|
||||
series: [
|
||||
|
||||
//地图？
|
||||
// 地图？
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
geoIndex: 0,
|
||||
aspectScale: 0.75, //长宽比
|
||||
aspectScale: 0.75, // 长宽比
|
||||
showLegendSymbol: false, // 存在legend时显示
|
||||
label: {
|
||||
normal: {
|
||||
|
|
@ -202,7 +198,7 @@
|
|||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#031525',
|
||||
borderColor: '#FFFFFF',
|
||||
borderColor: '#FFFFFF'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2B91B7'
|
||||
|
|
@ -210,16 +206,16 @@
|
|||
},
|
||||
animation: false
|
||||
},
|
||||
//地图点的动画效果
|
||||
// 地图点的动画效果
|
||||
{
|
||||
// name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(mapData.sort(function(a, b) {
|
||||
return b.value - a.value;
|
||||
data: convertData(mapData.sort(function (a, b) {
|
||||
return b.value - a.value
|
||||
}).slice(0, 20)),
|
||||
symbolSize: function(val) {
|
||||
return val[2] / 10;
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 10
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
|
|
@ -242,40 +238,39 @@
|
|||
},
|
||||
zlevel: 1
|
||||
},
|
||||
//地图线的动画效果
|
||||
// 地图线的动画效果
|
||||
{
|
||||
type: 'lines',
|
||||
zlevel: 2,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 4, //箭头指向速度，值越小速度越快
|
||||
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
symbol: 'arrow', //箭头图标
|
||||
symbolSize: 3, //图标大小
|
||||
period: 4, // 箭头指向速度，值越小速度越快
|
||||
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
symbol: 'arrow', // 箭头图标
|
||||
symbolSize: 3 // 图标大小
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: colors,
|
||||
width: 0.1, //尾迹线条宽度
|
||||
opacity: 0.5, //尾迹线条透明度
|
||||
curveness: .3 //尾迹线条曲直度
|
||||
width: 0.1, // 尾迹线条宽度
|
||||
opacity: 0.5, // 尾迹线条透明度
|
||||
curveness: 0.3 // 尾迹线条曲直度
|
||||
}
|
||||
},
|
||||
data: convertToLineData(mapData, geoGpsMap)
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
}
|
||||
let chart:EChartsType
|
||||
const initChart = () => {
|
||||
const chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
}
|
||||
onMounted(() => {
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import MigrationCharts from './components/migration/index.vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -143,7 +143,6 @@
|
|||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
|
|
@ -173,7 +172,7 @@ import {
|
|||
Message,
|
||||
Search,
|
||||
Share,
|
||||
Star,
|
||||
Star
|
||||
} from '@element-plus/icons-vue'
|
||||
</script>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -37,61 +37,61 @@
|
|||
</u-container-layout>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// 参考文档 https://sortablejs.github.io/vue.draggable.next/#/transition-example-2
|
||||
// https://github.com/SortableJS/vue.draggable.next/blob/master/package.json
|
||||
import draggable from "vuedraggable";
|
||||
import {computed, ref,reactive} from "vue";
|
||||
import {getColor} from '@/utils/index'
|
||||
// 参考文档 https://sortablejs.github.io/vue.draggable.next/#/transition-example-2
|
||||
// https://github.com/SortableJS/vue.draggable.next/blob/master/package.json
|
||||
import draggable from 'vuedraggable'
|
||||
import { computed, ref, reactive } from 'vue'
|
||||
import { getColor } from '@/utils/index'
|
||||
|
||||
const message = ref([]);
|
||||
const tags = ref([]);
|
||||
const message = ref([])
|
||||
const tags = ref([])
|
||||
|
||||
let icon = ['management','baseball','Basketball','BellFilled','Bell',
|
||||
'AddLocation','Aim','AlarmClock','Apple','ArrowDownBold','Burger',
|
||||
'Brush','BrushFilled','RemoveFilled','QuestionFilled','Promotion','Printer',
|
||||
'School','Setting','WarningFilled','ZoomOut','WalletFilled','User',
|
||||
'ToiletPaper','Sunrise','Sunny','SwitchButton','TakeawayBox','Ticket',
|
||||
'StarFilled','Stamp','Stopwatch','SortDown','SemiSelect','Search',
|
||||
]
|
||||
const icon = ['management', 'baseball', 'Basketball', 'BellFilled', 'Bell',
|
||||
'AddLocation', 'Aim', 'AlarmClock', 'Apple', 'ArrowDownBold', 'Burger',
|
||||
'Brush', 'BrushFilled', 'RemoveFilled', 'QuestionFilled', 'Promotion', 'Printer',
|
||||
'School', 'Setting', 'WarningFilled', 'ZoomOut', 'WalletFilled', 'User',
|
||||
'ToiletPaper', 'Sunrise', 'Sunny', 'SwitchButton', 'TakeawayBox', 'Ticket',
|
||||
'StarFilled', 'Stamp', 'Stopwatch', 'SortDown', 'SemiSelect', 'Search'
|
||||
]
|
||||
|
||||
// 随机生成颜色
|
||||
for(let i=0;i<30;i++){
|
||||
// 随机生成颜色
|
||||
for (let i = 0; i < 30; i++) {
|
||||
message.value.push({
|
||||
name:i,
|
||||
order:i+1,
|
||||
icon:icon[i],
|
||||
color:getColor()
|
||||
name: i,
|
||||
order: i + 1,
|
||||
icon: icon[i],
|
||||
color: getColor()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const drag = ref(false)
|
||||
const drag = ref(false)
|
||||
|
||||
// 设置排序参数
|
||||
const dragOptions = computed(()=>{
|
||||
return{
|
||||
// 设置排序参数
|
||||
const dragOptions = computed(() => {
|
||||
return {
|
||||
animation: 200,
|
||||
group: "description",
|
||||
group: 'description',
|
||||
disabled: false,
|
||||
ghostClass: "ghost" // 滑动颜色
|
||||
};
|
||||
})
|
||||
|
||||
const sorter = ()=>{
|
||||
message.value = message.value.sort((a, b) => a.name - b.name);
|
||||
ghostClass: 'ghost' // 滑动颜色
|
||||
}
|
||||
})
|
||||
|
||||
const onMoveCallback = (val) => {
|
||||
console.log('拖动前的索引 :' + val.moved.newIndex);
|
||||
console.log('拖动后的索引 :' + val.moved.oldIndex);
|
||||
};
|
||||
// 查看最新的数据
|
||||
const getdata = () => {
|
||||
console.log(11111111);
|
||||
};
|
||||
// 查看最新的数据
|
||||
const getDataAction = () => {
|
||||
console.log(message.value);
|
||||
};
|
||||
const sorter = () => {
|
||||
message.value = message.value.sort((a, b) => a.name - b.name)
|
||||
}
|
||||
|
||||
const onMoveCallback = (val) => {
|
||||
console.log('拖动前的索引 :' + val.moved.newIndex)
|
||||
console.log('拖动后的索引 :' + val.moved.oldIndex)
|
||||
}
|
||||
// 查看最新的数据
|
||||
const getdata = () => {
|
||||
console.log(11111111)
|
||||
}
|
||||
// 查看最新的数据
|
||||
const getDataAction = () => {
|
||||
console.log(message.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -63,28 +63,27 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {computed, ref} from "vue";
|
||||
import { ElMessage,ElMessageBox } from 'element-plus'
|
||||
import { computed, ref, reactive } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const emit = defineEmits(['reset','onSubmit','selection-change'])
|
||||
let props = defineProps({
|
||||
columns:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
|
||||
const props = defineProps({
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
data:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
loading:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
const currentPage1 = ref(1)
|
||||
const isExpand = ref(true)
|
||||
const handleSizeChange = (val: number) => {
|
||||
|
|
@ -95,29 +94,26 @@ const handleCurrentChange = (val: number) => {
|
|||
currentPage1.value = val
|
||||
}
|
||||
|
||||
const list = computed(()=>{
|
||||
let arr = JSON.parse(JSON.stringify(props.data))
|
||||
return arr.splice((currentPage1.value-1)*10,10)
|
||||
const list = computed(() => {
|
||||
const arr = JSON.parse(JSON.stringify(props.data))
|
||||
return arr.splice((currentPage1.value - 1) * 10, 10)
|
||||
})
|
||||
|
||||
|
||||
const listLoading = ref(false)
|
||||
const confirmEdit = (row)=>{
|
||||
const confirmEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
const cancelEdit = (row)=>{
|
||||
const cancelEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
|
||||
import { reactive } from 'vue'
|
||||
|
||||
let obj = {}
|
||||
let search = []
|
||||
for(let item of props.columns){
|
||||
if(item.inSearch){
|
||||
const obj = {}
|
||||
const search = []
|
||||
for (const item of props.columns) {
|
||||
if (item.inSearch) {
|
||||
obj[item.name] = null
|
||||
}
|
||||
if(item.inSearch){
|
||||
if (item.inSearch) {
|
||||
search.push(item)
|
||||
}
|
||||
}
|
||||
|
|
@ -125,17 +121,17 @@ const formSearchData = ref(search)
|
|||
const formInline = reactive(obj)
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!',formInline)
|
||||
emit('onSubmit',formInline)
|
||||
console.log('submit!', formInline)
|
||||
emit('onSubmit', formInline)
|
||||
}
|
||||
|
||||
const reset = (formEl: FormInstance | undefined)=>{
|
||||
formSearchData.value.forEach(item=>{
|
||||
const reset = (formEl: FormInstance | undefined) => {
|
||||
formSearchData.value.forEach(item => {
|
||||
formInline[item.name] = null
|
||||
})
|
||||
emit('reset')
|
||||
}
|
||||
const deleteAction = (row)=>{
|
||||
const deleteAction = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
'你确定要删除当前项吗?',
|
||||
'温馨提示',
|
||||
|
|
@ -143,21 +139,18 @@ const deleteAction = (row)=>{
|
|||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
list.value = list.value.filter(item=>item.id!==row.id)
|
||||
list.value = list.value.filter(item => item.id !== row.id)
|
||||
ElMessage.success('删除成功')
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
|
|
|
|||
|
|
@ -73,148 +73,164 @@
|
|||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default { name: 'comprehensive' };
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import {ref, reactive, onMounted} from "vue";
|
||||
import * as dayjs from 'dayjs'
|
||||
import { ElMessage,ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
const loading = ref(true)
|
||||
import ComprehensiveTable from './components/comprehensive.vue'
|
||||
const data = []
|
||||
for(let i=0;i<100;i++){
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import * as dayjs from 'dayjs'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import ComprehensiveTable from './components/comprehensive.vue'
|
||||
export default { name: 'comprehensive' }
|
||||
const loading = ref(true)
|
||||
const data = []
|
||||
for (let i = 0; i < 100; i++) {
|
||||
data.push({
|
||||
date: '2016-05-02',
|
||||
name: '王五'+i,
|
||||
price: 1+i,
|
||||
name: '王五' + i,
|
||||
price: 1 + i,
|
||||
province: '上海',
|
||||
admin:"admin",
|
||||
sex:i%2?1:0,
|
||||
checked:true,
|
||||
id:i+1,
|
||||
age:0,
|
||||
admin: 'admin',
|
||||
sex: i % 2 ? 1 : 0,
|
||||
checked: true,
|
||||
id: i + 1,
|
||||
age: 0,
|
||||
city: '普陀区',
|
||||
address: '上海市普上海',
|
||||
zip: 200333
|
||||
})
|
||||
}
|
||||
const column = [
|
||||
{ type:'selection', width:60 },
|
||||
{ name: 'id', label: 'id',width:80, },
|
||||
{ name: 'name',
|
||||
}
|
||||
const column = [
|
||||
{ type: 'selection', width: 60 },
|
||||
{ name: 'id', label: 'id', width: 80 },
|
||||
{
|
||||
name: 'name',
|
||||
label: '姓名',
|
||||
inSearch:true,
|
||||
valueType:'input',
|
||||
width:80
|
||||
inSearch: true,
|
||||
valueType: 'input',
|
||||
width: 80
|
||||
},
|
||||
{ name: 'age',
|
||||
{
|
||||
name: 'age',
|
||||
label: '年龄',
|
||||
align:'right',
|
||||
align: 'right'
|
||||
},
|
||||
{ name: 'sex',
|
||||
{
|
||||
name: 'sex',
|
||||
label: '性别',
|
||||
slot:true,
|
||||
inSearch:true,
|
||||
options:[{
|
||||
value:1,
|
||||
label:'男'
|
||||
},{
|
||||
value:0,
|
||||
label:'女'
|
||||
slot: true,
|
||||
inSearch: true,
|
||||
options: [{
|
||||
value: 1,
|
||||
label: '男'
|
||||
}, {
|
||||
value: 0,
|
||||
label: '女'
|
||||
}],
|
||||
valueType:'select',
|
||||
valueType: 'select'
|
||||
},
|
||||
{
|
||||
name: 'price',
|
||||
label: '价格',
|
||||
inSearch:true,
|
||||
valueType:'input',
|
||||
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: '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 }
|
||||
]
|
||||
const list = ref(data)
|
||||
{ name: 'operation', slot: true, fixed: 'right', width: 200 }
|
||||
]
|
||||
const list = ref(data)
|
||||
|
||||
const formSize = ref('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleForm = reactive({
|
||||
const formSize = ref('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleForm = reactive({
|
||||
name: '',
|
||||
sex: null,
|
||||
price:null,
|
||||
})
|
||||
price: null
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
||||
],
|
||||
price:[
|
||||
{ required: true, message: '请输入价格', trigger: 'blur' },
|
||||
price: [
|
||||
{ required: true, message: '请输入价格', trigger: 'blur' }
|
||||
],
|
||||
sex: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择性别',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
})
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增')
|
||||
const rowObj = ref({})
|
||||
const selectObj = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增')
|
||||
const rowObj = ref({})
|
||||
const selectObj = ref([])
|
||||
|
||||
const handleClose = async (done: () => void) => {
|
||||
const handleClose = async (done: () => void) => {
|
||||
await ruleFormRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
let obj = {
|
||||
id:Date.now(),
|
||||
const obj = {
|
||||
id: Date.now(),
|
||||
...ruleForm,
|
||||
age:0,
|
||||
age: 0,
|
||||
city: '普陀区',
|
||||
address: '上海市普上海',
|
||||
zip: 200333,
|
||||
province: '上海',
|
||||
admin:"admin",
|
||||
admin: 'admin',
|
||||
date: dayjs().format('YYYY-MM-DD')
|
||||
}
|
||||
if(title.value==='新增'){
|
||||
list.value = [obj,...list.value]
|
||||
if (title.value === '新增') {
|
||||
list.value = [obj, ...list.value]
|
||||
ElMessage.success('添加成功')
|
||||
}else {
|
||||
list.value.forEach(item=>{
|
||||
if(item.id===rowObj.value.id){
|
||||
item.name=obj.name
|
||||
item.sex=obj.sex
|
||||
item.price=obj.price
|
||||
} else {
|
||||
list.value.forEach(item => {
|
||||
if (item.id === rowObj.value.id) {
|
||||
item.name = obj.name
|
||||
item.sex = obj.sex
|
||||
item.price = obj.price
|
||||
}
|
||||
})
|
||||
}
|
||||
dialogVisible.value = false
|
||||
console.log('submit!',obj)
|
||||
console.log('submit!', obj)
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const add = ()=>{
|
||||
title.value='新增'
|
||||
const add = () => {
|
||||
title.value = '新增'
|
||||
dialogVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const batchDelete = ()=>{
|
||||
if(!selectObj.value.length){
|
||||
const batchDelete = () => {
|
||||
if (!selectObj.value.length) {
|
||||
return ElMessage.error('未选中任何行')
|
||||
}
|
||||
ElMessageBox.confirm(
|
||||
|
|
@ -224,33 +240,32 @@ export default { name: 'comprehensive' };
|
|||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
|
||||
ElMessage.success('模拟删除成功')
|
||||
list.value = list.value.concat([])
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
})
|
||||
}
|
||||
const selectionChange = (val)=>{
|
||||
}
|
||||
const selectionChange = (val) => {
|
||||
selectObj.value = val
|
||||
}
|
||||
}
|
||||
|
||||
const edit = (row)=>{
|
||||
title.value='编辑'
|
||||
const edit = (row) => {
|
||||
title.value = '编辑'
|
||||
rowObj.value = row
|
||||
dialogVisible.value = true
|
||||
ruleForm.name = row.name
|
||||
ruleForm.sex = row.sex
|
||||
ruleForm.price = row.price
|
||||
}
|
||||
}
|
||||
|
||||
const del = (row)=>{
|
||||
console.log('row==',row)
|
||||
const del = (row) => {
|
||||
console.log('row==', row)
|
||||
ElMessageBox.confirm(
|
||||
'你确定要删除当前项吗?',
|
||||
'温馨提示',
|
||||
|
|
@ -258,44 +273,44 @@ export default { name: 'comprehensive' };
|
|||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
list.value = list.value.filter(item=>item.id!==row.id)
|
||||
list.value = list.value.filter(item => item.id !== row.id)
|
||||
ElMessage.success('删除成功')
|
||||
loading.value = true
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
},500)
|
||||
}, 500)
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const reset = ()=>{
|
||||
const reset = () => {
|
||||
loading.value = true
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
},500)
|
||||
}, 500)
|
||||
ElMessage.success('触发重置方法')
|
||||
}
|
||||
}
|
||||
|
||||
const onSubmit = (val)=>{
|
||||
console.log('val===',val)
|
||||
const onSubmit = (val) => {
|
||||
console.log('val===', val)
|
||||
ElMessage.success('触发查询方法')
|
||||
loading.value = true
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
},500)
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
setTimeout(()=>{
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
},500)
|
||||
})
|
||||
}, 500)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -90,74 +90,72 @@
|
|||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default { name: 'inline-table' };
|
||||
</script>
|
||||
<script lang="ts" setup >
|
||||
import {computed, ref} from "vue";
|
||||
import { ElMessage,ElMessageBox } from 'element-plus'
|
||||
const data = [
|
||||
]
|
||||
for(let i=0;i<100;i++){
|
||||
import { computed, ref, reactive } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
export default { name: 'inline-table' }
|
||||
const data = [
|
||||
]
|
||||
for (let i = 0; i < 100; i++) {
|
||||
data.push({
|
||||
date: '2016-05-02',
|
||||
name: '王五'+i,
|
||||
price: 1+i,
|
||||
name: '王五' + i,
|
||||
price: 1 + i,
|
||||
province: '上海',
|
||||
admin:"admin",
|
||||
sex:i%2?1:0,
|
||||
checked:true,
|
||||
id:i+1,
|
||||
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||
age:0,
|
||||
admin: 'admin',
|
||||
sex: i % 2 ? 1 : 0,
|
||||
checked: true,
|
||||
id: i + 1,
|
||||
img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
|
||||
age: 0,
|
||||
city: '普陀区',
|
||||
address: '上海市普上海',
|
||||
zip: 200333
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const currentPage1 = ref(1)
|
||||
const handleSizeChange = (val: number) => {
|
||||
const currentPage1 = ref(1)
|
||||
const handleSizeChange = (val: number) => {
|
||||
console.log(`${val} items per page`)
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
console.log(`current page: ${val}`)
|
||||
currentPage1.value = val
|
||||
}
|
||||
}
|
||||
|
||||
const transData = ref(data)
|
||||
const loading = ref(false)
|
||||
const transData = ref(data)
|
||||
const loading = ref(false)
|
||||
|
||||
const list = computed(()=>{
|
||||
let arr = JSON.parse(JSON.stringify(transData.value))
|
||||
return arr.splice((currentPage1.value-1)*10,10)
|
||||
})
|
||||
const list = computed(() => {
|
||||
const arr = JSON.parse(JSON.stringify(transData.value))
|
||||
return arr.splice((currentPage1.value - 1) * 10, 10)
|
||||
})
|
||||
|
||||
const listLoading = ref(false)
|
||||
|
||||
const listLoading = ref(false)
|
||||
|
||||
const confirmEdit = (row)=>{
|
||||
const confirmEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
}
|
||||
|
||||
const cancelEdit = (row)=>{
|
||||
const cancelEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
}
|
||||
|
||||
import { reactive } from 'vue'
|
||||
const formInline1 = reactive({
|
||||
username: ''
|
||||
})
|
||||
|
||||
const formInline1 = reactive({
|
||||
username: '',
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
loading.value = true
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
},500)
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const deleteAction = (row)=>{
|
||||
const deleteAction = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
'你确定要删除当前项吗?',
|
||||
'温馨提示',
|
||||
|
|
@ -165,18 +163,17 @@ export default { name: 'inline-table' };
|
|||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
transData.value = transData.value.filter(item=>item.id!==row.id)
|
||||
transData.value = transData.value.filter(item => item.id !== row.id)
|
||||
ElMessage.success('删除成功')
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue