init
This commit is contained in:
weicw
602
src/views/dashboard/analysis.vue
Normal file
602
src/views/dashboard/analysis.vue
Normal file
@@ -0,0 +1,602 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<!-- 顶部统计快 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">总销售额</div>
|
||||
<a-tooltip title="指标说明">
|
||||
<question-circle-outlined/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">¥ 126,560</h1>
|
||||
<div class="analysis-chart-card-content" style="padding-top: 16px;">
|
||||
<a-space size="middle">
|
||||
<span>周同比12% <caret-up-outlined class="ele-text-danger"/></span>
|
||||
<span>日同比11% <caret-down-outlined class="ele-text-success"/></span>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<div>日销售额 ￥12,423</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">访问量</div>
|
||||
<ele-tag color="red">日</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">8,846</h1>
|
||||
<ele-chart
|
||||
ref="visitChart"
|
||||
:options="visitChartOption"
|
||||
class="analysis-chart-card-content"/>
|
||||
<a-divider/>
|
||||
<div>日访问量 1,234</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">支付笔数</div>
|
||||
<ele-tag color="blue">月</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">6,560</h1>
|
||||
<ele-chart
|
||||
ref="payNumChart"
|
||||
:options="payNumChartOption"
|
||||
class="analysis-chart-card-content"/>
|
||||
<a-divider/>
|
||||
<div>转化率 60%</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">活动运营效果</div>
|
||||
<ele-tag color="green">周</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">78%</h1>
|
||||
<div class="analysis-chart-card-content" style="padding-top: 16px;">
|
||||
<a-progress
|
||||
:percent="78"
|
||||
:show-info="false"
|
||||
stroke-color="#13c2c2"/>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<a-space size="middle">
|
||||
<span>周同比12% <caret-up-outlined class="ele-text-danger"/></span>
|
||||
<span>日同比11% <caret-down-outlined class="ele-text-success"/></span>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 销售额、访问量 -->
|
||||
<a-card :bordered="false" :body-style="{padding: 0}">
|
||||
<a-tabs size="large" class="monitor-card-tabs">
|
||||
<a-tab-pane tab="销售额" key="saleroom">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="17" :md="16" :sm="24" :xs="24">
|
||||
<div class="demo-monitor-title">销售量趋势</div>
|
||||
<ele-chart
|
||||
ref="saleChart"
|
||||
style="height: 320px;"
|
||||
:options="saleChartOption"/>
|
||||
</a-col>
|
||||
<a-col :lg="7" :md="8" :sm="24" :xs="24">
|
||||
<div class="demo-monitor-title">门店销售额排名</div>
|
||||
<div
|
||||
v-for="(item,index) in saleroomRankData"
|
||||
:key="index"
|
||||
class="demo-monitor-rank-item ele-cell">
|
||||
<ele-tag
|
||||
shape="circle"
|
||||
:color="index<3?'#314659':''"
|
||||
style="border: none;">{{ index + 1 }}
|
||||
</ele-tag>
|
||||
<div class="ele-cell-content">{{ item.name }}</div>
|
||||
<div class="ele-text-secondary">{{ item.value }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="访问量" key="visits" force-render>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="17" :md="16" :sm="24" :xs="24">
|
||||
<div class="demo-monitor-title">访问量趋势</div>
|
||||
<ele-chart
|
||||
ref="visitsChart"
|
||||
style="height: 320px;"
|
||||
:options="visitsChartOption"/>
|
||||
</a-col>
|
||||
<a-col :lg="7" :md="8" :sm="24" :xs="24">
|
||||
<div class="demo-monitor-title">门店访问量排名</div>
|
||||
<div
|
||||
v-for="(item,index) in visitsRankData"
|
||||
:key="index"
|
||||
class="demo-monitor-rank-item ele-cell">
|
||||
<ele-tag
|
||||
shape="circle"
|
||||
:color="index<3?'#314659':''"
|
||||
style="border: none;">{{ index + 1 }}
|
||||
</ele-tag>
|
||||
<div class="ele-cell-content">{{ item.name }}</div>
|
||||
<div class="ele-text-secondary">{{ item.value }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
<template #tabBarExtraContent>
|
||||
<a-space size="middle" class="analysis-tabs-extra">
|
||||
<a-radio-group v-model:value="saleSearch.dateType">
|
||||
<a-radio-button value="1">今天</a-radio-button>
|
||||
<a-radio-button value="2">本周</a-radio-button>
|
||||
<a-radio-button value="3">本月</a-radio-button>
|
||||
<a-radio-button value="4">本年</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-range-picker v-model:value="saleSearch.datetime">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
<!-- 折线图、词云 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="16" :md="14" :sm="24" :xs="24">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
title="最近1小时访问情况"
|
||||
:body-style="{padding: '16px 6px 0 0'}">
|
||||
<ele-chart
|
||||
ref="visitHourChart"
|
||||
style="height: 362px;"
|
||||
:options="visitHourChartOption"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="10" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="热门搜索">
|
||||
<ele-word-cloud
|
||||
ref="hotSearchChart"
|
||||
:data="hotSearchData"
|
||||
style="height: 330px;"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleChart from 'ele-admin-pro/packages/ele-chart';
|
||||
import EleWordCloud from 'ele-admin-pro/packages/ele-word-cloud';
|
||||
import {
|
||||
QuestionCircleOutlined,
|
||||
CaretUpOutlined,
|
||||
CaretDownOutlined,
|
||||
CalendarOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'DashboardAnalysis',
|
||||
components: {
|
||||
EleChart,
|
||||
EleWordCloud,
|
||||
QuestionCircleOutlined,
|
||||
CaretUpOutlined,
|
||||
CaretDownOutlined,
|
||||
CalendarOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 支付笔数数据
|
||||
payNumData: [],
|
||||
// 销售量搜索参数
|
||||
saleSearch: {
|
||||
dateType: '4',
|
||||
datetime: []
|
||||
},
|
||||
// 销售量数据
|
||||
saleroomData: [],
|
||||
// 销售量排名数据
|
||||
saleroomRankData: [],
|
||||
// 访问量数据
|
||||
visitsData: [],
|
||||
// 访问量排名数据
|
||||
visitsRankData: [],
|
||||
// 最近1小时访问情况数据
|
||||
visitHourData: [],
|
||||
// 词云数据
|
||||
hotSearchData: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 访问量折线图配置
|
||||
visitChartOption() {
|
||||
/*if (!this.payNumData.length) {
|
||||
return null;
|
||||
}*/
|
||||
return {
|
||||
color: '#975fe5',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '<i class="ele-chart-dot" style="background: #975fe5;"></i>{b0}: {c0}'
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.payNumData.map(d => d.date)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.5
|
||||
},
|
||||
data: this.payNumData.map(d => d.value)
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
// 支付笔数柱状图配置
|
||||
payNumChartOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '<i class="ele-chart-dot" style="background: #3aa1ff;"></i>{b0}: {c0}'
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'category',
|
||||
data: this.payNumData.map(d => d.date)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: this.payNumData.map(d => d.value)
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 销售额柱状图配置
|
||||
saleChartOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.saleroomData.map(d => d.month)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: this.saleroomData.map(d => d.value)
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
// 访问量柱状图配置
|
||||
visitsChartOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.visitsData.map(d => d.month)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: this.visitsData.map(d => d.value)
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
// 最近1小时访问情况折线图配置
|
||||
visitHourChartOption() {
|
||||
/*if (!this.visitHourData.length) {
|
||||
return null;
|
||||
}*/
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['浏览量', '访问量'],
|
||||
right: 20
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.visitHourData.map(d => d.time)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '浏览量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.5
|
||||
},
|
||||
data: this.visitHourData.map(d => d.views)
|
||||
},
|
||||
{
|
||||
name: '访问量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.5
|
||||
},
|
||||
data: this.visitHourData.map(d => d.visits)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPayNumData();
|
||||
this.getSaleroomData();
|
||||
this.getVisitHourData();
|
||||
this.getWordCloudData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取支付笔数数据 */
|
||||
getPayNumData() {
|
||||
this.payNumData = [
|
||||
{date: '2020-06-12', value: 7},
|
||||
{date: '2020-06-13', value: 5},
|
||||
{date: '2020-06-14', value: 4},
|
||||
{date: '2020-06-15', value: 2},
|
||||
{date: '2020-06-16', value: 4},
|
||||
{date: '2020-06-17', value: 7},
|
||||
{date: '2020-06-18', value: 5},
|
||||
{date: '2020-06-19', value: 6},
|
||||
{date: '2020-06-20', value: 5},
|
||||
{date: '2020-06-21', value: 9},
|
||||
{date: '2020-06-22', value: 6},
|
||||
{date: '2020-06-23', value: 3},
|
||||
{date: '2020-06-24', value: 1},
|
||||
{date: '2020-06-25', value: 5},
|
||||
{date: '2020-06-26', value: 3},
|
||||
{date: '2020-06-27', value: 6},
|
||||
{date: '2020-06-18', value: 5}
|
||||
];
|
||||
},
|
||||
/* 获取销售量数据 */
|
||||
getSaleroomData() {
|
||||
// 销售量
|
||||
this.saleroomData = [
|
||||
{month: '1月', value: 816},
|
||||
{month: '2月', value: 542},
|
||||
{month: '3月', value: 914},
|
||||
{month: '4月', value: 781},
|
||||
{month: '5月', value: 355},
|
||||
{month: '6月', value: 796},
|
||||
{month: '7月', value: 714},
|
||||
{month: '8月', value: 1195},
|
||||
{month: '9月', value: 1055},
|
||||
{month: '10月', value: 271},
|
||||
{month: '11月', value: 384},
|
||||
{month: '12月', value: 1098}
|
||||
];
|
||||
this.saleroomRankData = [
|
||||
{name: '工专路 1 号店', value: '323,234'},
|
||||
{name: '工专路 2 号店', value: '323,234'},
|
||||
{name: '工专路 3 号店', value: '323,234'},
|
||||
{name: '工专路 4 号店', value: '323,234'},
|
||||
{name: '工专路 5 号店', value: '323,234'},
|
||||
{name: '工专路 6 号店', value: '323,234'},
|
||||
{name: '工专路 7 号店', value: '323,234'}
|
||||
];
|
||||
// 访问量
|
||||
this.visitsData = [
|
||||
{month: '1月', value: 1098},
|
||||
{month: '2月', value: 384},
|
||||
{month: '3月', value: 271},
|
||||
{month: '4月', value: 1055},
|
||||
{month: '5月', value: 1195},
|
||||
{month: '6月', value: 714},
|
||||
{month: '7月', value: 796},
|
||||
{month: '8月', value: 355},
|
||||
{month: '9月', value: 781},
|
||||
{month: '10月', value: 914},
|
||||
{month: '11月', value: 542},
|
||||
{month: '12月', value: 816}
|
||||
];
|
||||
this.visitsRankData = [
|
||||
{name: '工专路 1 号店', value: '323,234'},
|
||||
{name: '工专路 2 号店', value: '323,234'},
|
||||
{name: '工专路 3 号店', value: '323,234'},
|
||||
{name: '工专路 4 号店', value: '323,234'},
|
||||
{name: '工专路 5 号店', value: '323,234'},
|
||||
{name: '工专路 6 号店', value: '323,234'},
|
||||
{name: '工专路 7 号店', value: '323,234'}
|
||||
];
|
||||
},
|
||||
/* 获取最近1小时访问情况数据 */
|
||||
getVisitHourData() {
|
||||
this.visitHourData = [
|
||||
{time: '16:00', visits: 15, views: 45},
|
||||
{time: '16:05', visits: 39, views: 169},
|
||||
{time: '16:10', visits: 152, views: 400},
|
||||
{time: '16:15', visits: 94, views: 285},
|
||||
{time: '16:20', visits: 102, views: 316},
|
||||
{time: '16:25', visits: 86, views: 148},
|
||||
{time: '16:30', visits: 39, views: 150},
|
||||
{time: '16:35', visits: 38, views: 234},
|
||||
{time: '16:40', visits: 95, views: 158},
|
||||
{time: '16:45', visits: 30, views: 100},
|
||||
{time: '16:50', visits: 86, views: 266}
|
||||
];
|
||||
},
|
||||
/* 获取词云数据 */
|
||||
getWordCloudData() {
|
||||
this.hotSearchData = [
|
||||
{name: "软妹子", value: 23},
|
||||
{name: "汪星人", value: 23},
|
||||
{name: "长腿欧巴", value: 23},
|
||||
{name: "萝莉", value: 22},
|
||||
{name: "辣~", value: 22},
|
||||
{name: "K歌", value: 22},
|
||||
{name: "大长腿", value: 21},
|
||||
{name: "川妹子", value: 21},
|
||||
{name: "女神", value: 21},
|
||||
{name: "米粉", value: 20},
|
||||
{name: "专注设计", value: 20},
|
||||
{name: "逛街", value: 20},
|
||||
{name: "黑长直", value: 20},
|
||||
{name: "海纳百川", value: 19},
|
||||
{name: "萌萌哒", value: 19},
|
||||
{name: "坚持", value: 19},
|
||||
{name: "话唠", value: 19},
|
||||
{name: "果粉", value: 18},
|
||||
{name: "喵星人", value: 18},
|
||||
{name: "花粉", value: 18},
|
||||
{name: "衬衫控", value: 18},
|
||||
{name: "宅男", value: 17},
|
||||
{name: "小清新", value: 17},
|
||||
{name: "眼镜男", value: 17},
|
||||
{name: "琼瑶", value: 17},
|
||||
{name: "穷游党", value: 16},
|
||||
{name: "铲屎官", value: 16},
|
||||
{name: "正太", value: 16},
|
||||
{name: "中二病", value: 16},
|
||||
{name: "夜猫子", value: 15},
|
||||
{name: "逗比", value: 15},
|
||||
{name: "腹黑", value: 15},
|
||||
{name: "吃鸡", value: 15},
|
||||
{name: "为了联盟", value: 14},
|
||||
{name: "背包客", value: 14},
|
||||
{name: "民谣", value: 14},
|
||||
{name: "为了部落", value: 14},
|
||||
{name: "懒癌患者", value: 13},
|
||||
{name: "追剧", value: 13},
|
||||
{name: "IT民工", value: 13},
|
||||
{name: "CNB成员", value: 13},
|
||||
{name: "选择困难", value: 12},
|
||||
{name: "锤粉", value: 12},
|
||||
{name: "欧皇", value: 12},
|
||||
{name: "仙气十足", value: 12}
|
||||
];
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
['visitChart', 'payNumChart', 'saleChart', 'visitsChart', 'visitHourChart', 'hotSearchChart'].forEach((name) => {
|
||||
this.$refs[name].resize();
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 统计卡片 */
|
||||
.analysis-chart-card :deep(.ant-card-body) {
|
||||
padding: 16px 22px 12px 22px;
|
||||
}
|
||||
|
||||
.analysis-chart-card-num {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.analysis-chart-card-content {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.analysis-chart-card :deep(.ant-divider) {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
/* 销售额、访问量 */
|
||||
.monitor-card-tabs :deep(.ant-tabs-bar) {
|
||||
padding: 0 16px 0 4px;
|
||||
}
|
||||
|
||||
.monitor-card-tabs :deep(.ant-tabs-tab) {
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
margin: 0 12px !important;
|
||||
}
|
||||
|
||||
.monitor-card-tabs :deep(.ant-tabs-tabpane) {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.demo-monitor-title {
|
||||
padding: 6px 20px;
|
||||
}
|
||||
|
||||
.demo-monitor-rank-item {
|
||||
padding: 0 20px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 880px) {
|
||||
.analysis-tabs-extra {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
668
src/views/dashboard/monitor.vue
Normal file
668
src/views/dashboard/monitor.vue
Normal file
@@ -0,0 +1,668 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<!-- 顶部统计卡片 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="6" :sm="12" :xs="12">
|
||||
<a-card :bordered="false" class="monitor-count-card">
|
||||
<ele-tag
|
||||
color="blue"
|
||||
shape="circle"
|
||||
size="large">
|
||||
<eye-filled/>
|
||||
</ele-tag>
|
||||
<h1 class="monitor-count-card-num">21.2 k</h1>
|
||||
<div class="monitor-count-card-text">总访问人数</div>
|
||||
<ele-avatar-list
|
||||
:data="visitUsers"
|
||||
size="small"
|
||||
:max="4"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="12" :xs="12">
|
||||
<a-card :bordered="false" class="monitor-count-card">
|
||||
<ele-tag
|
||||
color="orange"
|
||||
shape="circle"
|
||||
size="large">
|
||||
<fire-filled/>
|
||||
</ele-tag>
|
||||
<h1 class="monitor-count-card-num">1.6 k</h1>
|
||||
<div class="monitor-count-card-text">点击量（近30天）</div>
|
||||
<div class="monitor-count-card-trend ele-text-success">
|
||||
<up-outlined/>
|
||||
<span>110.5%</span>
|
||||
</div>
|
||||
<a-tooltip title="指标说明">
|
||||
<question-circle-outlined class="monitor-count-card-tips"/>
|
||||
</a-tooltip>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="12" :xs="12">
|
||||
<a-card :bordered="false" class="monitor-count-card">
|
||||
<ele-tag
|
||||
color="red"
|
||||
shape="circle"
|
||||
size="large">
|
||||
<flag-filled/>
|
||||
</ele-tag>
|
||||
<h1 class="monitor-count-card-num">826.0</h1>
|
||||
<div class="monitor-count-card-text">到达量（近30天）</div>
|
||||
<div class="monitor-count-card-trend ele-text-danger">
|
||||
<down-outlined/>
|
||||
<span>15.5%</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="12" :xs="12">
|
||||
<a-card :bordered="false" class="monitor-count-card">
|
||||
<ele-tag
|
||||
color="green"
|
||||
shape="circle"
|
||||
size="large">
|
||||
<thunderbolt-filled/>
|
||||
</ele-tag>
|
||||
<h1 class="monitor-count-card-num">28.8 %</h1>
|
||||
<div class="monitor-count-card-text">转化率（近30天）</div>
|
||||
<div class="monitor-count-card-trend ele-text-success">
|
||||
<up-outlined/>
|
||||
<span>65.8%</span>
|
||||
</div>
|
||||
<a-tooltip title="指标说明">
|
||||
<question-circle-outlined class="monitor-count-card-tips"/>
|
||||
</a-tooltip>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<!-- 用户分布 -->
|
||||
<a-col :lg="18" :md="24" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="用户分布">
|
||||
<a-row>
|
||||
<a-col :sm="18" :xs="24">
|
||||
<ele-chart
|
||||
ref="userCountMapChart"
|
||||
:options="userCountMapOption"
|
||||
style="height: 485px;"/>
|
||||
</a-col>
|
||||
<a-col :sm="6" :xs="24">
|
||||
<ele-chart
|
||||
ref="userCountChart"
|
||||
style="height: 485px;"
|
||||
:options="userCountChartOption"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 在线人数 -->
|
||||
<a-col :lg="6" :md="24" :sm="24" :xs="24">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="24" :md="12" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="在线人数">
|
||||
<div class="monitor-online-num-card">
|
||||
<div>{{ currentTime }}</div>
|
||||
<div class="monitor-online-num-title">
|
||||
<ele-count-up
|
||||
:end-val="228"
|
||||
@ready="(ins) => { onlineNumAnimIns = ins; }"/>
|
||||
</div>
|
||||
<div class="monitor-online-num-text">在线总人数</div>
|
||||
<a-badge status="processing" :text="updateTimeText"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="24" :md="12" :sm="24" :xs="24">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
title="浏览器分布"
|
||||
:body-style="{padding: '6px 0'}">
|
||||
<ele-chart
|
||||
ref="browserChart"
|
||||
style="height: 240px;"
|
||||
:options="browserChartOption"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<!-- 用户评价 -->
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="用户评价">
|
||||
<div class="ele-cell ele-cell-align-bottom">
|
||||
<div style="font-size: 51px;line-height: 1;">4.5</div>
|
||||
<div class="ele-cell-content">
|
||||
<a-rate :value="userRate" disabled/>
|
||||
<span style="color: #fadb14;margin-left: 8px;">很棒</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell" style="margin: 18px 0;">
|
||||
<div style="font-size: 28px;line-height: 1;" class="ele-text-placeholder">-0%</div>
|
||||
<div class="ele-cell-content ele-text-small ele-text-secondary">当前没有评价波动</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress
|
||||
:percent="60"
|
||||
stroke-color="#52c41a"
|
||||
:show-info="false"/>
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled/>
|
||||
<span>5 : 368 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress
|
||||
:percent="40"
|
||||
stroke-color="#1890ff"
|
||||
:show-info="false"/>
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled/>
|
||||
<span>4 : 256 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress
|
||||
:percent="20"
|
||||
stroke-color="#faad14"
|
||||
:show-info="false"/>
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled/>
|
||||
<span>3 : 49 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress
|
||||
:percent="10"
|
||||
stroke-color="#f5222d"
|
||||
:show-info="false"/>
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled/>
|
||||
<span>2 : 14 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress
|
||||
:percent="0"
|
||||
:show-info="false"/>
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled/>
|
||||
<span>1 : 0 人</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 用户满意度 -->
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="用户满意度">
|
||||
<div class="ele-cell ele-text-center">
|
||||
<div class="ele-cell-content" style="font-size: 24px;">856</div>
|
||||
<div class="ele-cell-content">
|
||||
<div class="monitor-face-smile"><i></i></div>
|
||||
<div class="ele-text-secondary" style="margin-top: 8px;">正面评论</div>
|
||||
</div>
|
||||
<h2 class="ele-cell-content ele-text-success">82%</h2>
|
||||
</div>
|
||||
<a-divider style="margin: 26px 0;"/>
|
||||
<div class="ele-cell ele-text-center">
|
||||
<div class="ele-cell-content" style="font-size: 24px;">60</div>
|
||||
<div class="ele-cell-content">
|
||||
<div class="monitor-face-cry"><i></i></div>
|
||||
<div class="ele-text-secondary" style="margin-top: 8px;">负面评论</div>
|
||||
</div>
|
||||
<h2 class="ele-cell-content ele-text-danger">9%</h2>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 用户活跃度 -->
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="用户活跃度">
|
||||
<div class="ele-cell" style="padding: 32px 0;">
|
||||
<div class="ele-cell-content ele-text-center">
|
||||
<div class="monitor-progress-group">
|
||||
<a-progress
|
||||
type="circle"
|
||||
:percent="70"
|
||||
stroke-color="#52c41a"
|
||||
:show-info="false"
|
||||
:width="161"/>
|
||||
<a-progress
|
||||
type="circle"
|
||||
:percent="60"
|
||||
stroke-color="#1890ff"
|
||||
:show-info="false"
|
||||
:width="121"
|
||||
:stroke-width="5"/>
|
||||
<a-progress
|
||||
type="circle"
|
||||
:percent="35"
|
||||
stroke-color="#f5222d"
|
||||
:show-info="false"
|
||||
:width="91"
|
||||
:stroke-width="4"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-progress-legends">
|
||||
<div class="ele-text-small">
|
||||
<a-badge color="green" text="活跃率: 70%"/>
|
||||
</div>
|
||||
<div class="ele-text-small">
|
||||
<a-badge color="blue" text="留存率: 60%"/>
|
||||
</div>
|
||||
<div class="ele-text-small">
|
||||
<a-badge color="red" text="跳出率: 35%"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleCountUp from 'ele-admin-pro/packages/ele-count-up';
|
||||
import EleChart from 'ele-admin-pro/packages/ele-chart';
|
||||
import {
|
||||
QuestionCircleOutlined,
|
||||
EyeFilled,
|
||||
FireFilled,
|
||||
FlagFilled,
|
||||
ThunderboltFilled,
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
StarFilled
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'DashboardMonitor',
|
||||
components: {
|
||||
EleCountUp,
|
||||
EleChart,
|
||||
QuestionCircleOutlined,
|
||||
EyeFilled,
|
||||
FireFilled,
|
||||
FlagFilled,
|
||||
ThunderboltFilled,
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
StarFilled
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 访问人数头像列表数据
|
||||
visitUsers: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '你的名字很好听',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
|
||||
},
|
||||
{
|
||||
name: '全村人的希望',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: '管理员',
|
||||
avatar: 'https://cdn.eleadmin.com/20200610/avatar.jpg'
|
||||
}
|
||||
],
|
||||
// 在线总人数倒计时
|
||||
updateTime: 5,
|
||||
// 中国地图轮廓数据
|
||||
chinaMapData: null,
|
||||
// 用户分布数据
|
||||
userCountData: [],
|
||||
// 当前时间
|
||||
currentTime: '20:58:22',
|
||||
// 在线人数动画数字组件实例
|
||||
onlineNumAnimIns: null,
|
||||
// 在线人数更新定时器
|
||||
onlineNumTimer: null,
|
||||
// 浏览器分布环形图数据
|
||||
browserCountData: [],
|
||||
// 用户评分
|
||||
userRate: 4.5
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 在线人数倒计时文字
|
||||
updateTimeText() {
|
||||
return this.updateTime + ' 秒后更新';
|
||||
},
|
||||
// 用户分布地图配置
|
||||
userCountMapOption() {
|
||||
if (!this.chinaMapData) {
|
||||
return null;
|
||||
}
|
||||
let data = this.userCountData.map(d => d.value).sort((a, b) => (a - b));
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
visualMap: {
|
||||
min: data[data.length - 1] || 0,
|
||||
max: data[0] || 0,
|
||||
text: ['高', '低'],
|
||||
calculable: true,
|
||||
color: ['#1890FF', '#EBF3FF']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '用户数',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
data: this.userCountData
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
// 用户分布柱状图配置
|
||||
userCountChartOption() {
|
||||
let data = this.userCountData
|
||||
.filter(d => d.value > 0)
|
||||
.sort((a, b) => {
|
||||
return a.value - b.value;
|
||||
});
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '<i class="ele-chart-dot" style="background: #3aa1ff;"></i>{b0}: {c0}'
|
||||
},
|
||||
grid: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 50,
|
||||
right: 0
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: data.map(d => d.name)
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: data.map(d => d.value)
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
// 浏览器分布饼图配置
|
||||
browserChartOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
data: this.browserCountData.map(d => d.name),
|
||||
bottom: 5,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
icon: 'circle'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['45%', '70%'],
|
||||
center: ['50%', '43%'],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: this.browserCountData
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.doUpdateOnlineNum();
|
||||
this.getChinaMapData();
|
||||
this.getUserCountData();
|
||||
this.getBrowserCountData();
|
||||
},
|
||||
methods: {
|
||||
/* 在线人数更新倒计时 */
|
||||
doUpdateOnlineNum() {
|
||||
this.currentTime = this.$util.toDateString(new Date(), 'HH:mm:ss');
|
||||
this.onlineNumTimer = setInterval(() => {
|
||||
this.currentTime = this.$util.toDateString(new Date(), 'HH:mm:ss');
|
||||
if (this.updateTime === 1) {
|
||||
this.updateTime = 5;
|
||||
if (this.onlineNumAnimIns) {
|
||||
this.onlineNumAnimIns.update(100 + Math.round(Math.random() * 900));
|
||||
}
|
||||
} else {
|
||||
this.updateTime--;
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
/* 获取中国地图数据并注册地图 */
|
||||
getChinaMapData() {
|
||||
this.$http.get('https://cdn.eleadmin.com/20200610/china-provinces.geo.json').then(res => {
|
||||
EleChart.registerMap('china', res.data);
|
||||
this.chinaMapData = res.data;
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 获取用户分布数据 */
|
||||
getUserCountData() {
|
||||
this.userCountData = [
|
||||
{name: "贵州", value: 570},
|
||||
{name: "云南", value: 8890},
|
||||
{name: "重庆", value: 10010},
|
||||
{name: "吉林", value: 5056},
|
||||
{name: "山西", value: 2123},
|
||||
{name: "天津", value: 9130},
|
||||
{name: "江西", value: 10170},
|
||||
{name: "广西", value: 6172},
|
||||
{name: "陕西", value: 9251},
|
||||
{name: "黑龙江", value: 5125},
|
||||
{name: "安徽", value: 9530},
|
||||
{name: "北京", value: 51919},
|
||||
{name: "福建", value: 3756},
|
||||
{name: "上海", value: 59190},
|
||||
{name: "湖北", value: 37109},
|
||||
{name: "湖南", value: 8966},
|
||||
{name: "四川", value: 31020},
|
||||
{name: "辽宁", value: 7222},
|
||||
{name: "河北", value: 3451},
|
||||
{name: "河南", value: 9693},
|
||||
{name: "浙江", value: 62310},
|
||||
{name: "山东", value: 39231},
|
||||
{name: "江苏", value: 35911},
|
||||
{name: "广东", value: 55891}
|
||||
];
|
||||
},
|
||||
/* 获取用户浏览器分布数据 */
|
||||
getBrowserCountData() {
|
||||
this.browserCountData = [
|
||||
{name: 'Chrome', value: 9052},
|
||||
{name: 'Safari', value: 535},
|
||||
{name: 'Firefox', value: 1610},
|
||||
{name: 'Edge', value: 2800},
|
||||
{name: 'IE', value: 3200},
|
||||
{name: 'Other', value: 1700}
|
||||
];
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
['userCountMapChart', 'userCountChart', 'browserChart'].forEach((name) => {
|
||||
this.$refs[name].resize();
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
// 销毁定时器
|
||||
if (this.onlineNumTimer) {
|
||||
clearInterval(this.onlineNumTimer);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 统计卡片 */
|
||||
.monitor-count-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.monitor-count-card .monitor-count-card-num {
|
||||
margin-top: 6px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.monitor-count-card .monitor-count-card-text {
|
||||
font-size: 12px;
|
||||
margin: 8px 0;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.monitor-count-card .monitor-count-card-trend {
|
||||
font-weight: bold;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.monitor-count-card .monitor-count-card-trend > .anticon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.monitor-count-card .monitor-count-card-tips {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
cursor: pointer;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
/* 当前在线人数卡片 */
|
||||
.monitor-online-num-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.monitor-online-num-text {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.monitor-online-num-title {
|
||||
font-size: 48px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.monitor-online-num-card {
|
||||
padding: 22px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户评价 */
|
||||
.monitor-evaluate-text {
|
||||
width: 90px;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.monitor-evaluate-text > .anticon {
|
||||
font-size: 12px;
|
||||
margin: 0 6px 0 8px;
|
||||
}
|
||||
|
||||
/* 笑脸、哭脸 */
|
||||
.monitor-face-smile, .monitor-face-cry {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
background: #FBD971;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.monitor-face-smile > i, .monitor-face-smile:before, .monitor-face-smile:after,
|
||||
.monitor-face-cry > i, .monitor-face-cry:before, .monitor-face-cry:after {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
transform: rotate(225deg);
|
||||
border: 3px solid #F0C419;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
.monitor-face-smile:before, .monitor-face-smile:after,
|
||||
.monitor-face-cry:before, .monitor-face-cry:after {
|
||||
content: "";
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: 8px;
|
||||
top: 14px;
|
||||
border-color: #F29C1F;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.monitor-face-smile:after, .monitor-face-cry:after {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.monitor-face-cry > i {
|
||||
transform: rotate(45deg);
|
||||
bottom: -6px;
|
||||
}
|
||||
|
||||
/** 圆形进度条组合 */
|
||||
.monitor-progress-group {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.monitor-progress-group .ant-progress:not(:first-child) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.monitor-progress-legends > div + div {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
708
src/views/dashboard/workplace.vue
Normal file
708
src/views/dashboard/workplace.vue
Normal file
@@ -0,0 +1,708 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<!-- 顶部卡片 -->
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{padding: '20px'}">
|
||||
<div class="ele-cell workplace-user-card">
|
||||
<div class="ele-cell-content ele-cell">
|
||||
<a-avatar :size="68" :src="loginUser.avatar"/>
|
||||
<div class="ele-cell-content">
|
||||
<h4 class="ele-elip">早安，{{ loginUser.nickname }}，开始您一天的工作吧！</h4>
|
||||
<div class="ele-elip ele-text-secondary">
|
||||
<cloud-outlined/>
|
||||
<em>今日多云转阴，18℃ - 22℃，出门记得穿外套哦~</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="workplace-count-group">
|
||||
<div class="workplace-count-item">
|
||||
<div class="workplace-count-header">
|
||||
<ele-tag
|
||||
color="blue"
|
||||
shape="circle"
|
||||
size="small">
|
||||
<appstore-filled/>
|
||||
</ele-tag>
|
||||
<span class="workplace-count-name">项目数</span>
|
||||
</div>
|
||||
<h2>3</h2>
|
||||
</div>
|
||||
<div class="workplace-count-item">
|
||||
<div class="workplace-count-header">
|
||||
<ele-tag
|
||||
color="orange"
|
||||
shape="circle"
|
||||
size="small">
|
||||
<check-square-outlined/>
|
||||
</ele-tag>
|
||||
<span class="workplace-count-name">待办项</span>
|
||||
</div>
|
||||
<h2>6 / 24</h2>
|
||||
</div>
|
||||
<div class="workplace-count-item">
|
||||
<div class="workplace-count-header">
|
||||
<ele-tag
|
||||
color="green"
|
||||
shape="circle"
|
||||
size="small">
|
||||
<bell-filled/>
|
||||
</ele-tag>
|
||||
<span class="workplace-count-name">消息</span>
|
||||
</div>
|
||||
<h2>1,689</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 快捷方式块 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/system/user"
|
||||
class="app-link-block">
|
||||
<user-outlined class="app-link-icon"/>
|
||||
<div class="app-link-title">用户</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/dashboard/analysis"
|
||||
class="app-link-block">
|
||||
<shopping-cart-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #95de64;"/>
|
||||
<div class="app-link-title">分析</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/list/card/project"
|
||||
class="app-link-block">
|
||||
<fund-projection-screen-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #ff9c6e;"/>
|
||||
<div class="app-link-title">商品</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/list/basic"
|
||||
class="app-link-block">
|
||||
<file-search-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #b37feb;"/>
|
||||
<div class="app-link-title">订单</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/list/advanced"
|
||||
class="app-link-block">
|
||||
<credit-card-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #ffd666;"/>
|
||||
<div class="app-link-title">票据</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/user/message"
|
||||
class="app-link-block">
|
||||
<mail-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #5cdbd3;"/>
|
||||
<div class="app-link-title">消息</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/extension/more"
|
||||
class="app-link-block">
|
||||
<tags-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #ff85c0;"/>
|
||||
<div class="app-link-title">标签</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/user/profile"
|
||||
class="app-link-block">
|
||||
<control-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #ffc069;"/>
|
||||
<div class="app-link-title">配置</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<!-- 最新动态 -->
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card
|
||||
title="最新动态"
|
||||
:bordered="false"
|
||||
:body-style="{padding: 0}">
|
||||
<div
|
||||
style="height: 347px;padding: 28px 20px 0 20px;"
|
||||
class="ele-scrollbar-hover">
|
||||
<a-timeline>
|
||||
<a-timeline-item
|
||||
v-for="(item, index) in activities"
|
||||
:key="index"
|
||||
:color="item.color">
|
||||
<em>{{ item.time }}</em>
|
||||
<em>{{ item.title }}</em>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 我的任务 -->
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card
|
||||
title="我的任务"
|
||||
:bordered="false"
|
||||
:body-style="{padding: '10px 8px 10px 8px'}">
|
||||
<div class="ant-table ant-table-middle">
|
||||
<div class="ant-table-content">
|
||||
<div class="ant-table-body" style="overflow-x: auto;">
|
||||
<table style="min-width: max-content;">
|
||||
<colgroup>
|
||||
<col width="48"/>
|
||||
<col width="60"/>
|
||||
<col/>
|
||||
<col width="80"/>
|
||||
</colgroup>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th style="text-align: center;">优先级</th>
|
||||
<th>任务名称</th>
|
||||
<th style="text-align: center;">状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<draggable
|
||||
tag="tbody"
|
||||
item-key="id"
|
||||
v-model="taskList"
|
||||
:component-data="{class: 'ant-table-tbody'}"
|
||||
handle=".anticon-menu"
|
||||
:animation="300">
|
||||
<template #item="{ element }">
|
||||
<tr>
|
||||
<td style="text-align: center;">
|
||||
<menu-outlined style="cursor: move;"/>
|
||||
</td>
|
||||
<td style="text-align: center;padding: 8px;">
|
||||
<ele-tag
|
||||
:color="['red', 'orange', 'blue'][element.priority - 1]"
|
||||
shape="circle">
|
||||
{{ element.priority }}
|
||||
</ele-tag>
|
||||
</td>
|
||||
<td>
|
||||
<a>{{ element.taskName }}</a>
|
||||
</td>
|
||||
<td style="text-align: center;">
|
||||
<span
|
||||
:class="['ele-text-warning', 'ele-text-success', 'ele-text-info'][element.state]">
|
||||
{{ ['未开始', '进行中', '已完成'][element.state] }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</draggable>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 本月目标 -->
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="本月目标" :bordered="false">
|
||||
<div class="workplace-goal-group">
|
||||
<a-progress
|
||||
type="dashboard"
|
||||
:percent="80"
|
||||
:show-info="false"
|
||||
:width="181"
|
||||
:stroke-width="4"/>
|
||||
<div class="workplace-goal-content">
|
||||
<ele-tag
|
||||
color="blue"
|
||||
size="large"
|
||||
shape="circle">
|
||||
<trophy-outlined/>
|
||||
</ele-tag>
|
||||
<div class="workplace-goal-num">285</div>
|
||||
</div>
|
||||
<div class="workplace-goal-text">恭喜，本月目标已达标！</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 项目进度 -->
|
||||
<a-col :lg="16" :md="24" :sm="24" :xs="24">
|
||||
<a-card
|
||||
title="项目进度"
|
||||
:bordered="false"
|
||||
:body-style="{padding: '12px 12px 1px 12px'}">
|
||||
<a-table
|
||||
:data-source="projectList"
|
||||
row-key="id"
|
||||
:pagination="false"
|
||||
size="middle"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<a-table-column
|
||||
key="index"
|
||||
align="center"
|
||||
:width="48">
|
||||
<template #default="{index}">{{ index + 1 }}</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="项目名称"
|
||||
data-index="projectName">
|
||||
<template #default="{text}">
|
||||
<a>{{ text }}</a>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="开始时间"
|
||||
data-index="startDate"/>
|
||||
<a-table-column
|
||||
title="结束时间"
|
||||
data-index="endDate"/>
|
||||
<a-table-column
|
||||
title="状态"
|
||||
data-index="state"
|
||||
align="center"
|
||||
:width="90">
|
||||
<template #default="{text}">
|
||||
<span
|
||||
:class="['ele-text-success', 'ele-text-danger', 'ele-text-warning', 'ele-text-info ele-text-delete'][text]">
|
||||
{{ ['进行中', '已延期', '未开始', '已结束'][text] }}
|
||||
</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="进度"
|
||||
data-index="progress"
|
||||
align="center"
|
||||
:width="180">
|
||||
<template #default="{text}">
|
||||
<a-progress
|
||||
:percent="text"
|
||||
size="small"/>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 小组成员 -->
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card
|
||||
title="小组成员"
|
||||
:bordered="false"
|
||||
:body-style="{padding: 0}">
|
||||
<div
|
||||
v-for="(item,index) in userList"
|
||||
:key="index"
|
||||
class="ele-cell user-list-item">
|
||||
<a-avatar
|
||||
:size="46"
|
||||
:src="item.avatar"/>
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-title">{{ item.name }}</div>
|
||||
<div class="ele-cell-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<a-tag
|
||||
:color="['green', 'red'][item.state]">
|
||||
{{ ['在线', '离线'][item.state] }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
CloudOutlined,
|
||||
AppstoreFilled,
|
||||
CheckSquareOutlined,
|
||||
BellFilled,
|
||||
UserOutlined,
|
||||
ShoppingCartOutlined,
|
||||
FundProjectionScreenOutlined,
|
||||
FileSearchOutlined,
|
||||
CreditCardOutlined,
|
||||
MailOutlined,
|
||||
TagsOutlined,
|
||||
ControlOutlined,
|
||||
MenuOutlined,
|
||||
TrophyOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import draggable from 'vuedraggable';
|
||||
|
||||
export default {
|
||||
name: 'DashboardWorkplace',
|
||||
components: {
|
||||
CloudOutlined,
|
||||
AppstoreFilled,
|
||||
CheckSquareOutlined,
|
||||
BellFilled,
|
||||
UserOutlined,
|
||||
ShoppingCartOutlined,
|
||||
FundProjectionScreenOutlined,
|
||||
FileSearchOutlined,
|
||||
CreditCardOutlined,
|
||||
MailOutlined,
|
||||
TagsOutlined,
|
||||
ControlOutlined,
|
||||
MenuOutlined,
|
||||
TrophyOutlined,
|
||||
draggable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 最新动态数据
|
||||
activities: [
|
||||
{
|
||||
title: 'SunSmile 解决了bug 登录提示操作失败',
|
||||
time: '20:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: 'Jasmine 解决了bug 按钮颜色与设计不符',
|
||||
time: '19:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目一的bug',
|
||||
time: '18:30'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目二的bug',
|
||||
time: '17:30'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目三的bug',
|
||||
time: '16:30'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目四的bug',
|
||||
time: '15:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目五的bug',
|
||||
time: '14:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目六的bug',
|
||||
time: '12:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目七的bug',
|
||||
time: '11:30'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目八的bug',
|
||||
time: '10:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目九的bug',
|
||||
time: '09:30',
|
||||
color: 'green'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目十的bug',
|
||||
time: '08:30',
|
||||
color: 'red'
|
||||
}
|
||||
],
|
||||
// 我的任务数据
|
||||
taskList: [
|
||||
{
|
||||
id: 1,
|
||||
priority: 1,
|
||||
taskName: '解决项目一的bug',
|
||||
state: 0
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
priority: 2,
|
||||
taskName: '解决项目二的bug',
|
||||
state: 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
priority: 2,
|
||||
taskName: '解决项目三的bug',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
priority: 3,
|
||||
taskName: '解决项目四的bug',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
priority: 3,
|
||||
taskName: '解决项目五的bug',
|
||||
state: 2
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
priority: 3,
|
||||
taskName: '解决项目六的bug',
|
||||
state: 2
|
||||
}
|
||||
],
|
||||
// 项目进度数据
|
||||
projectList: [
|
||||
{
|
||||
id: 1,
|
||||
projectName: '项目0000001',
|
||||
state: 0,
|
||||
startDate: '2020-03-01',
|
||||
endDate: '2020-06-01',
|
||||
progress: 30
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
projectName: '项目0000002',
|
||||
state: 0,
|
||||
startDate: '2020-03-01',
|
||||
endDate: '2020-08-01',
|
||||
progress: 10
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
projectName: '项目0000003',
|
||||
state: 1,
|
||||
startDate: '2020-01-01',
|
||||
endDate: '2020-05-01',
|
||||
progress: 60
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
projectName: '项目0000004',
|
||||
state: 1,
|
||||
startDate: '2020-06-01',
|
||||
endDate: '2020-10-01',
|
||||
progress: 0
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
projectName: '项目0000005',
|
||||
state: 2,
|
||||
startDate: '2020-01-01',
|
||||
endDate: '2020-03-01',
|
||||
progress: 100
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
projectName: '项目0000006',
|
||||
state: 3,
|
||||
startDate: '2020-01-01',
|
||||
endDate: '2020-03-01',
|
||||
progress: 100
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
projectName: '项目0000007',
|
||||
state: 3,
|
||||
startDate: '2020-01-01',
|
||||
endDate: '2020-03-01',
|
||||
progress: 100
|
||||
}
|
||||
],
|
||||
// 小组成员数据
|
||||
userList: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
desc: 'UI设计师、交互专家',
|
||||
state: 0,
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '你的名字很好听',
|
||||
desc: '前端工程师',
|
||||
state: 0,
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
|
||||
},
|
||||
{
|
||||
name: '全村人的希望',
|
||||
desc: '前端工程师',
|
||||
state: 0,
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
desc: '产品经理、项目经理',
|
||||
state: 1,
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
desc: '组长、后端工程师',
|
||||
state: 1,
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 当前登录用户信息
|
||||
loginUser() {
|
||||
return this.$store.state.user.user;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** 用户卡片 */
|
||||
.workplace-user-card .ele-cell-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workplace-user-card h4 {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.workplace-count-group {
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.workplace-count-item {
|
||||
display: inline-block;
|
||||
margin: 0 4px 0 24px;
|
||||
}
|
||||
|
||||
.workplace-count-name {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.workplace-count-item {
|
||||
margin: 0 2px 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.workplace-user-card {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.workplace-count-group {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/** 快捷方式 */
|
||||
.app-link-block {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.app-link-block .app-link-icon {
|
||||
color: #69c0ff;
|
||||
font-size: 30px;
|
||||
margin: 6px 0 10px 0;
|
||||
}
|
||||
|
||||
/** 时间轴 */
|
||||
.ele-scrollbar-hover :deep(.ant-timeline-item-last > .ant-timeline-item-content) {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/** 本月目标 */
|
||||
.workplace-goal-group {
|
||||
padding: 48px 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.workplace-goal-group .workplace-goal-content {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.workplace-goal-group .workplace-goal-num {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/** 小组成员 */
|
||||
.user-list-item {
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.user-list-item + .user-list-item {
|
||||
border-top: 1px solid hsla(0, 0%, 60%, .15);
|
||||
}
|
||||
|
||||
/** 表格拖拽 */
|
||||
.ant-table-tbody tr.sortable-chosen {
|
||||
background: hsla(0, 0%, 60%, .1) !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody tr.sortable-chosen td {
|
||||
background: none !important;
|
||||
}
|
||||
</style>
|
||||
245
src/views/example/choose/index.vue
Normal file
245
src/views/example/choose/index.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card" style="padding-bottom: 48px;">
|
||||
<a-card title="发布实训活动" :bordered="false">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{ md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<a-form-item label="实训名称:" name="title">
|
||||
<a-input
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入实训名称"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<a-form-item label="起止日期:" name="datetime">
|
||||
<a-range-picker
|
||||
v-model:value="form.datetime"
|
||||
class="ele-fluid">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<a-form-item label="实训地点:" name="address">
|
||||
<a-select
|
||||
v-model:value="form.address"
|
||||
placeholder="请选择地点"
|
||||
allow-clear>
|
||||
<a-select-option value="1">地点一</a-select-option>
|
||||
<a-select-option value="2">地点二</a-select-option>
|
||||
<a-select-option value="2">地点三</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item
|
||||
label="实训内容:"
|
||||
name="content"
|
||||
:label-col="{md: {span: 2}, sm: {span: 24}}"
|
||||
:wrapper-col="{ md: {span: 22}, sm: {span: 24}}">
|
||||
<a-textarea
|
||||
v-model:value="form.content"
|
||||
placeholder="请输入实训内容"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card title="选择实训班级:" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<!-- 未选择的班级数据表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
:toolkit="[]"
|
||||
:columns="columns"
|
||||
row-key="classesId"
|
||||
sub-title="未选班级:"
|
||||
empty-text="已全部选择"
|
||||
tools-theme="default"
|
||||
:show-size-changer="false"
|
||||
:datasource="unChooseClass"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="addAll">全部添加
|
||||
</a-button>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="add(record)">添加
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<!-- 已选择的班级数据表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
:toolkit="[]"
|
||||
:columns="columns"
|
||||
row-key="classesId"
|
||||
sub-title="已选班级:"
|
||||
emptyText="未选择班级"
|
||||
tools-theme="default"
|
||||
:show-size-changer="false"
|
||||
:datasource="chooseClasses"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
@click="removeAll">全部移除
|
||||
</a-button>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-button
|
||||
size="small"
|
||||
danger
|
||||
type="primary"
|
||||
@click="remove(record)">移除
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<!-- 底部工具栏 -->
|
||||
<div class="ele-bottom-tool">
|
||||
<div class="ele-bottom-tool-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit">提交
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CalendarOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExampleChoose',
|
||||
components: {CalendarOutlined},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单数据
|
||||
form: {},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, message: '请输入实训名称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
datetime: [
|
||||
{required: true, message: '请选择起止日期', type: 'array', trigger: 'blur'}
|
||||
],
|
||||
address: [
|
||||
{required: true, message: '请选择实训地点', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
content: [
|
||||
{required: true, message: '请输入实训内容', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 全部实训班级
|
||||
classes: [],
|
||||
// 已选择的班级数据
|
||||
chooseClasses: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
width: 90,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
},
|
||||
{
|
||||
title: '班级名称',
|
||||
dataIndex: 'classesName'
|
||||
},
|
||||
{
|
||||
title: '专业',
|
||||
dataIndex: 'major'
|
||||
},
|
||||
{
|
||||
title: '学院',
|
||||
dataIndex: 'college'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
/* 未选择的班级数据 */
|
||||
unChooseClass() {
|
||||
return this.classes.filter(d => this.chooseClasses.indexOf(d) === -1);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
/* 获取全部实训班级 */
|
||||
query() {
|
||||
this.$http.get('https://cdn.eleadmin.com/20200610/classes.json').then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.classes = res.data.data;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 提交 */
|
||||
submit() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
if (!this.chooseClasses.length) {
|
||||
this.$message.error('请选择实训班级');
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.$message.success('提交成功');
|
||||
}, 1500);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 添加 */
|
||||
add(row) {
|
||||
this.chooseClasses.push(row);
|
||||
},
|
||||
/* 移除 */
|
||||
remove(row) {
|
||||
this.chooseClasses.splice(this.chooseClasses.indexOf(row), 1);
|
||||
},
|
||||
/* 添加全部 */
|
||||
addAll() {
|
||||
this.unChooseClass.forEach(d => {
|
||||
this.chooseClasses.push(d);
|
||||
})
|
||||
},
|
||||
/* 移除所有 */
|
||||
removeAll() {
|
||||
this.chooseClasses.splice(0, this.chooseClasses.length);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
290
src/views/example/document/file-sort.vue
Normal file
290
src/views/example/document/file-sort.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
title="卷内文件调整"
|
||||
@update:visible="updateVisible"
|
||||
@cancel="close"
|
||||
@ok="save">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
ref="docTable"
|
||||
row-key="piece_no"
|
||||
sub-title="案卷列表"
|
||||
:columns="columns1"
|
||||
:datasource="documents"
|
||||
v-model:current="current"
|
||||
:scroll="{x: 'max-content'}"
|
||||
:row-selection="{columnWidth: 48}"
|
||||
:tool-style="{padding: '7px 14px'}"
|
||||
tools-theme="default"
|
||||
:need-page="false"
|
||||
:toolkit="[]">
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
ref="fileTable"
|
||||
:loading="loading"
|
||||
sub-title="卷内列表"
|
||||
:datasource="data1"
|
||||
:columns="columns2"
|
||||
row-key="archive_no"
|
||||
tools-theme="default"
|
||||
:scroll="{x: 'max-content'}"
|
||||
v-model:selection="selection1"
|
||||
:row-selection="{columnWidth: 48}"
|
||||
:need-page="false"
|
||||
:toolkit="[]">
|
||||
<template #toolkit>
|
||||
<a-space>
|
||||
<a-button
|
||||
@click="moveUp"
|
||||
type="primary"
|
||||
class="ele-btn-icon">
|
||||
<span><arrow-up-outlined/>上移</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="moveDown">
|
||||
<span><arrow-down-outlined/>下移</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="moveOut">
|
||||
<span>调出<arrow-right-outlined/></span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
:loading="loading"
|
||||
:datasource="data2"
|
||||
:columns="columns2"
|
||||
sub-title="未归档列表"
|
||||
row-key="archive_no"
|
||||
tools-theme="default"
|
||||
:scroll="{x: 'max-content'}"
|
||||
v-model:selection="selection2"
|
||||
:row-selection="{columnWidth: 48}"
|
||||
:need-page="false"
|
||||
:toolkit="[]">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="moveIn">
|
||||
<span><arrow-left-outlined/>调入</span>
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'FileSort',
|
||||
components: {
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined
|
||||
},
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 案卷列表
|
||||
documents: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['update:visible'],
|
||||
data() {
|
||||
return {
|
||||
// 案卷表格列配置
|
||||
columns1: [
|
||||
{
|
||||
title: '案卷题名',
|
||||
dataIndex: 'title'
|
||||
},
|
||||
{
|
||||
title: '案卷档号',
|
||||
dataIndex: 'piece_no'
|
||||
}
|
||||
],
|
||||
// 卷内表格列配置
|
||||
columns2: [
|
||||
{
|
||||
title: '文件题名',
|
||||
dataIndex: 'title'
|
||||
},
|
||||
{
|
||||
title: '文件档号',
|
||||
dataIndex: 'archive_no'
|
||||
}
|
||||
],
|
||||
// 案卷下的全部文件列表
|
||||
data: [],
|
||||
// 选中案卷
|
||||
current: null,
|
||||
// 加载loading
|
||||
loading: true,
|
||||
// 卷内列表选中数据
|
||||
selection1: [],
|
||||
// 未归档列表选中数据
|
||||
selection2: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 选中案卷的卷内文件
|
||||
data1() {
|
||||
if (!this.current) {
|
||||
return [];
|
||||
}
|
||||
return this.data.filter(d => d.piece_no === this.current.piece_no);
|
||||
},
|
||||
// 未归档的卷内文件
|
||||
data2() {
|
||||
return this.data.filter(d => !d.piece_no);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 查询所选案卷的卷内文件 */
|
||||
query() {
|
||||
this.loading = true;
|
||||
this.$http.get('https://cdn.eleadmin.com/20200610/archive.json').then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.data = res.data.data;
|
||||
this.current = this.documents[0];
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 上移 */
|
||||
moveUp() {
|
||||
if (!this.selection1.length) {
|
||||
this.$message.error('请选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.selection1.length > 1) {
|
||||
this.$message.error('只能选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.data1.indexOf(this.selection1[0]) === 0) {
|
||||
return;
|
||||
}
|
||||
let index = this.data.indexOf(this.selection1[0]);
|
||||
let old = this.data[index - 1];
|
||||
this.data[index - 1] = this.selection1[0];
|
||||
this.data[index] = old;
|
||||
this.selection1 = [this.data[index - 1]];
|
||||
},
|
||||
/* 下移 */
|
||||
moveDown() {
|
||||
if (!this.selection1.length) {
|
||||
this.$message.error('请选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.selection1.length > 1) {
|
||||
this.$message.error('只能选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.data1.indexOf(this.selection1[0]) === this.data1.length - 1) {
|
||||
return;
|
||||
}
|
||||
let index = this.data.indexOf(this.selection1[0]);
|
||||
let old = this.data[index + 1];
|
||||
this.data[index + 1] = this.selection1[0];
|
||||
this.data[index] = old;
|
||||
this.selection1 = [this.data[index + 1]];
|
||||
},
|
||||
/* 调出 */
|
||||
moveOut() {
|
||||
if (!this.selection1.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.selection1.forEach(d => {
|
||||
d.piece_no = '';
|
||||
});
|
||||
this.selection1 = [];
|
||||
},
|
||||
/* 调入 */
|
||||
moveIn() {
|
||||
if (!this.current) {
|
||||
return;
|
||||
}
|
||||
if (!this.selection2.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.selection2.forEach(d => {
|
||||
d.piece_no = this.current.piece_no;
|
||||
});
|
||||
this.selection2 = [];
|
||||
},
|
||||
/* 保存 */
|
||||
save() {
|
||||
let result = this.data.map(d => {
|
||||
return {
|
||||
archive_no: d.archive_no,
|
||||
piece_no: d.piece_no
|
||||
};
|
||||
});
|
||||
console.log(result);
|
||||
this.$message.success('调整成功');
|
||||
this.close();
|
||||
},
|
||||
/* 关闭弹窗 */
|
||||
close() {
|
||||
this.data = [];
|
||||
this.selection1 = [];
|
||||
this.selection2 = [];
|
||||
this.updateVisible(false);
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible() {
|
||||
if (this.visible) {
|
||||
this.query();
|
||||
}
|
||||
},
|
||||
current() {
|
||||
this.selection1 = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
108
src/views/example/document/index.vue
Normal file
108
src/views/example/document/index.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
title="案卷列表"
|
||||
row-key="piece_no"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
v-model:selection="selection"
|
||||
:scroll="{x:'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openFileSort">卷内文件调整
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 卷内文件调整弹窗 -->
|
||||
<file-sort
|
||||
v-model:visible="showFileSort"
|
||||
:documents="fileSortChoose"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileSort from './file-sort';
|
||||
|
||||
export default {
|
||||
name: 'ExampleDocument',
|
||||
components: {FileSort},
|
||||
data() {
|
||||
return {
|
||||
// 列表接口地址
|
||||
url: 'https://cdn.eleadmin.com/20200610/document.json',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
customRender: ({index}) => this.$refs.table.tableIndex + index
|
||||
},
|
||||
{
|
||||
title: '案卷档号',
|
||||
dataIndex: 'piece_no',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '案卷题名',
|
||||
dataIndex: 'title',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '年度',
|
||||
dataIndex: 'year',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '保管期限',
|
||||
dataIndex: 'retention',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '密级',
|
||||
dataIndex: 'secret',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '档案类别',
|
||||
dataIndex: 'type',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '载体规格',
|
||||
dataIndex: 'carrier',
|
||||
sorter: true
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 是否显示卷内文件调整弹窗
|
||||
showFileSort: false,
|
||||
// 选中的案卷
|
||||
fileSortChoose: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 打开卷内文件调整弹窗 */
|
||||
openFileSort() {
|
||||
if (this.selection.length < 2) {
|
||||
this.$message.error('请至少选择两条数据');
|
||||
return;
|
||||
}
|
||||
// 实际项目用这一行
|
||||
/*this.fileSortChoose = this.selection.map(d => {
|
||||
return Object.assign({}, d);
|
||||
});*/
|
||||
// 演示强制选前三个演示
|
||||
this.fileSortChoose = this.$refs.table.data.slice(0, 3);
|
||||
this.showFileSort = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
23
src/views/exception/403.vue
Normal file
23
src/views/exception/403.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div style="padding-top: 80px;">
|
||||
<a-result
|
||||
status="403"
|
||||
title="403"
|
||||
sub-title="抱歉, 你无权访问该页面.">
|
||||
<template #extra>
|
||||
<router-link to="/">
|
||||
<a-button type="primary">返回首页</a-button>
|
||||
</router-link>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Exception404'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
23
src/views/exception/404.vue
Normal file
23
src/views/exception/404.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div style="padding-top: 80px;">
|
||||
<a-result
|
||||
status="404"
|
||||
title="404"
|
||||
sub-title="抱歉, 你访问的页面不存在.">
|
||||
<template #extra>
|
||||
<router-link to="/">
|
||||
<a-button type="primary">返回首页</a-button>
|
||||
</router-link>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Exception404'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
23
src/views/exception/500.vue
Normal file
23
src/views/exception/500.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div style="padding-top: 80px;">
|
||||
<a-result
|
||||
status="500"
|
||||
title="500"
|
||||
sub-title="抱歉, 服务器出错了.">
|
||||
<template #extra>
|
||||
<router-link to="/">
|
||||
<a-button type="primary">返回首页</a-button>
|
||||
</router-link>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Exception500'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
214
src/views/extension/dragsort.vue
Normal file
214
src/views/extension/dragsort.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="列表拖拽排序" :bordered="false">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
v-model="list"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="16" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="列表相互拖拽" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
:list="list1"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle"
|
||||
group="demoDragList">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
:list="list2"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle"
|
||||
group="demoDragList">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="宫格拖拽排序" :bordered="false">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
v-model="grid"
|
||||
item-key="id"
|
||||
:animation="300">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="16" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="宫格相互拖拽" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
:list="grid1"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
group="demoDragGrid">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
:list="grid2"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
group="demoDragGrid">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable';
|
||||
import {MenuOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionDragSort',
|
||||
components: {
|
||||
draggable,
|
||||
MenuOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
list1: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
list2: [
|
||||
{id: 6, name: '项目0000006'},
|
||||
{id: 7, name: '项目0000007'},
|
||||
{id: 8, name: '项目0000008'},
|
||||
{id: 9, name: '项目0000009'},
|
||||
{id: 10, name: '项目0000010'}
|
||||
],
|
||||
grid: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
grid1: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
grid2: [
|
||||
{id: 6, name: '项目0000006'},
|
||||
{id: 7, name: '项目0000007'},
|
||||
{id: 8, name: '项目0000008'},
|
||||
{id: 9, name: '项目0000009'},
|
||||
{id: 10, name: '项目0000010'}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** 列表样式 */
|
||||
.demo-drag-list {
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
}
|
||||
|
||||
.demo-drag-list-item {
|
||||
line-height: 1;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.demo-drag-list-item + .demo-drag-list-item {
|
||||
border-top: 1px solid hsla(0, 0%, 60%, .2);
|
||||
}
|
||||
|
||||
.demo-drag-list-item.sortable-chosen {
|
||||
background: hsla(0, 0%, 60%, .1);
|
||||
}
|
||||
|
||||
.demo-drag-list-item .sort-handle {
|
||||
cursor: move;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/** 宫格样式 */
|
||||
.demo-drag-grid {
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
padding: 16px 0 0 16px;
|
||||
}
|
||||
|
||||
.demo-drag-grid-item {
|
||||
padding: 16px;
|
||||
margin: 0 16px 16px 0;
|
||||
display: inline-block;
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.demo-drag-grid-item.sortable-chosen {
|
||||
background: hsla(0, 0%, 60%, .1);
|
||||
}
|
||||
</style>
|
||||
68
src/views/extension/editor.vue
Normal file
68
src/views/extension/editor.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 按钮 -->
|
||||
<a-space class="ele-table-tool">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showHtml">获取html
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showText">获取文本
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="setContent">修改内容
|
||||
</a-button>
|
||||
</a-space>
|
||||
<!-- 编辑器 -->
|
||||
<tinymce-editor
|
||||
v-model:value="value"
|
||||
:init="{height: 525}"/>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TinymceEditor from '@/components/TinymceEditor';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionEditor',
|
||||
components: {TinymceEditor},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 获取编辑器内容 */
|
||||
showHtml() {
|
||||
Modal.info({
|
||||
maskClosable: true,
|
||||
content: this.value
|
||||
});
|
||||
},
|
||||
/* 获取编辑器纯文本内容 */
|
||||
showText() {
|
||||
Modal.info({
|
||||
maskClosable: true,
|
||||
content: this.$util.htmlToText(this.value)
|
||||
});
|
||||
},
|
||||
/* 修改编辑器内容 */
|
||||
setContent() {
|
||||
this.value = [
|
||||
'<div style="text-align:center;color:#fff;background-image:linear-gradient(-90deg,rgb(62,119,255),rgb(159,98,212),rgb(255,78,170));padding:32px 0;">',
|
||||
' <div style="font-size:28px;margin-bottom:16px;">EleAdminPro后台管理模板</div>',
|
||||
' <div style="font-size:18px">通用型后台管理模板，界面美观、开箱即用，拥有丰富的组件和模板</div>',
|
||||
'</div><br/>'
|
||||
].join('');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
418
src/views/extension/excel.vue
Normal file
418
src/views/extension/excel.vue
Normal file
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card title="导出excel" :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
row-key="key"
|
||||
:datasource="data"
|
||||
:columns="columns"
|
||||
:need-page="false"
|
||||
tools-theme="default"
|
||||
v-model:selection="selection"
|
||||
:toolkit="['size', 'columns', 'fullscreen']"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="exportBas">导出excel
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="exportAdv">导出带合并
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="exportSel">导出选中
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<a-card title="导入excel" :bordered="false">
|
||||
<!-- 操作按钮 -->
|
||||
<ele-toolbar :tools="[]">
|
||||
<a-space>
|
||||
<a-upload
|
||||
:before-upload="importFile"
|
||||
:show-upload-list="false"
|
||||
accept=".xls,.xlsx,.csv">
|
||||
<a-button type="primary">导入excel</a-button>
|
||||
</a-upload>
|
||||
<a-upload
|
||||
:before-upload="importFile2"
|
||||
:show-upload-list="false"
|
||||
accept=".xls,.xlsx,.csv">
|
||||
<a-button type="primary">导入拆分合并</a-button>
|
||||
</a-upload>
|
||||
<a-upload
|
||||
:before-upload="importFile3"
|
||||
:show-upload-list="false"
|
||||
accept=".xls,.xlsx,.csv">
|
||||
<a-button type="primary">导入保持合并</a-button>
|
||||
</a-upload>
|
||||
</a-space>
|
||||
</ele-toolbar>
|
||||
<div class="ant-table ant-table-middle ant-table-bordered">
|
||||
<div class="ant-table-content">
|
||||
<div class="ant-table-body">
|
||||
<table>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th
|
||||
v-for="item in importTitle"
|
||||
:key="item"
|
||||
style="text-align: center;">
|
||||
{{ item }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody">
|
||||
<tr v-for="(item,index) in importData" :key="index">
|
||||
<td style="text-align: center;">{{ index + 1 }}</td>
|
||||
<template v-for="key in importTitle">
|
||||
<td
|
||||
v-if="item['__colspan__'+key]!==0&&item['__rowspan__'+key]!==0"
|
||||
:key="key"
|
||||
:colspan="item['__colspan__'+key]"
|
||||
:rowspan="item['__rowspan__'+key]"
|
||||
style="text-align: center;">
|
||||
{{ item[key] }}
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-row :gutter="32">
|
||||
<a-col :md="12" :xs="24">
|
||||
<div style="margin:16px 0;">二维数组格式数据：</div>
|
||||
<pre
|
||||
style="max-height: 300px;padding: 16px;overflow: auto;"
|
||||
class="ele-bg-base">{{ JSON.stringify(importDataAoa, null, 4) }}
|
||||
</pre>
|
||||
</a-col>
|
||||
<a-col :md="12" :xs="24">
|
||||
<div style="margin: 16px 0;">JSON格式数据：</div>
|
||||
<pre
|
||||
style="max-height: 300px;padding: 16px;overflow: auto;"
|
||||
class="ele-bg-base">{{ JSON.stringify(importData, null, 4) }}
|
||||
</pre>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionExcel',
|
||||
data() {
|
||||
return {
|
||||
// 表格数据
|
||||
data: [
|
||||
{
|
||||
key: 1,
|
||||
username: '张小三',
|
||||
amount: 18,
|
||||
province: '浙江',
|
||||
city: '杭州',
|
||||
zone: '西湖区',
|
||||
street: '西溪街道',
|
||||
address: '西溪花园30栋1单元',
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
username: '李小四',
|
||||
amount: 39,
|
||||
province: '江苏',
|
||||
city: '苏州',
|
||||
zone: '姑苏区',
|
||||
street: '丝绸路',
|
||||
address: '天墅之城9幢2单元',
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
username: '王小五',
|
||||
amount: 8,
|
||||
province: '江西',
|
||||
city: '南昌',
|
||||
zone: '青山湖区',
|
||||
street: '艾溪湖办事处',
|
||||
address: '中兴和园1幢3单元',
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
username: '赵小六',
|
||||
amount: 16,
|
||||
province: '福建',
|
||||
city: '泉州',
|
||||
zone: '丰泽区',
|
||||
street: '南洋街道',
|
||||
address: '南洋村6幢1单元',
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
username: '孙小七',
|
||||
amount: 12,
|
||||
province: '湖北',
|
||||
city: '武汉',
|
||||
zone: '武昌区',
|
||||
street: '武昌大道',
|
||||
address: '两湖花园16幢2单元',
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
username: '周小八',
|
||||
amount: 11,
|
||||
province: '安徽',
|
||||
city: '黄山',
|
||||
zone: '黄山区',
|
||||
street: '汤口镇',
|
||||
address: '温泉村21号',
|
||||
}
|
||||
],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
customRender: ({index}) => `${index + 1}`,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'cityAddress',
|
||||
children: [
|
||||
{
|
||||
title: '省',
|
||||
dataIndex: 'province',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '市',
|
||||
dataIndex: 'city',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '区',
|
||||
dataIndex: 'zone',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '街道',
|
||||
dataIndex: 'street',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '详细地址',
|
||||
dataIndex: 'address',
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
dataIndex: 'amount',
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
// 选中数据
|
||||
selection: [],
|
||||
// 导入的数据
|
||||
importData: [],
|
||||
// 导入数据的列
|
||||
importTitle: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
|
||||
// 导入数据二维数组形式
|
||||
importDataAoa: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 导出excel */
|
||||
exportBas() {
|
||||
let array = [['用户名', '省', '市', '区', '街道', '详细地址', '金额']];
|
||||
this.data.forEach(d => {
|
||||
array.push([d.username, d.province, d.city, d.zone, d.street, d.address, d.amount]);
|
||||
});
|
||||
this.$util.exportSheet(XLSX, array, '用户数据');
|
||||
},
|
||||
/* 导出带单元格合并 */
|
||||
exportAdv() {
|
||||
let array = [
|
||||
['用户名', '地址', null, null, null, null, '金额'],
|
||||
[null, '省', '市', '区', '街道', '详细地址', null]
|
||||
];
|
||||
this.data.forEach(d => {
|
||||
array.push([d.username, d.province, d.city, d.zone, d.street, d.address, d.amount]);
|
||||
});
|
||||
let sheet = XLSX.utils.aoa_to_sheet(array);
|
||||
sheet['!merges'] = [
|
||||
{s: {r: 0, c: 1}, e: {r: 0, c: 5}}, // 合并第0行第1列到第0行第5列
|
||||
{s: {r: 0, c: 0}, e: {r: 1, c: 0}}, // 合并第0行第0列到第1行第0列
|
||||
{s: {r: 0, c: 6}, e: {r: 1, c: 6}} // 合并第0行第6列到第1行第6列
|
||||
];
|
||||
this.$util.exportSheet(XLSX, sheet, '用户数据');
|
||||
},
|
||||
/* 导出选中数据 */
|
||||
exportSel() {
|
||||
if (this.selection.length === 0) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
let array = [['用户名', '省', '市', '区', '街道', '详细地址', '金额']];
|
||||
this.selection.forEach(d => {
|
||||
array.push([d.username, d.province, d.city, d.zone, d.street, d.address, d.amount]);
|
||||
});
|
||||
this.$util.exportSheet(XLSX, array, '用户数据');
|
||||
},
|
||||
/* 导入本地excel文件 */
|
||||
importFile(file) {
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
let data = new Uint8Array(e.target.result);
|
||||
let workbook = XLSX.read(data, {type: 'array'});
|
||||
let sheetNames = workbook.SheetNames;
|
||||
let worksheet = workbook.Sheets[sheetNames[0]];
|
||||
// 解析成二维数组
|
||||
let aoa = XLSX.utils.sheet_to_json(worksheet, {header: 1});
|
||||
// 生成表格需要的数据
|
||||
let list = [], maxCols = 0, title = [];
|
||||
aoa.forEach(d => {
|
||||
if (d.length > maxCols) {
|
||||
maxCols = d.length;
|
||||
}
|
||||
let row = {};
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
let key = this.getCharByIndex(i);
|
||||
row[key] = d[i];
|
||||
row['__colspan__' + key] = 1;
|
||||
row['__rowspan__' + key] = 1;
|
||||
}
|
||||
list.push(row);
|
||||
});
|
||||
for (let i = 0; i < maxCols; i++) {
|
||||
title.push(this.getCharByIndex(i));
|
||||
}
|
||||
this.importTitle = title;
|
||||
this.importData = list;
|
||||
this.importDataAoa = aoa;
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
return false;
|
||||
},
|
||||
/* 导入excel拆分合并单元格 */
|
||||
importFile2(file) {
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
let data = new Uint8Array(e.target.result);
|
||||
let workbook = XLSX.read(data, {type: 'array'});
|
||||
let sheetNames = workbook.SheetNames;
|
||||
let worksheet = workbook.Sheets[sheetNames[0]];
|
||||
// 解析成二维数组
|
||||
let aoa = XLSX.utils.sheet_to_json(worksheet, {header: 1});
|
||||
// 拆分合并单元格
|
||||
if (worksheet['!merges']) {
|
||||
worksheet['!merges'].forEach(m => {
|
||||
for (let r = m.s.r; r <= m.e.r; r++) {
|
||||
for (let c = m.s.c; c <= m.e.c; c++) {
|
||||
aoa[r][c] = aoa[m.s.r][m.s.c];
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// 生成表格需要的数据
|
||||
let list = [], maxCols = 0, title = [];
|
||||
aoa.forEach(d => {
|
||||
if (d.length > maxCols) {
|
||||
maxCols = d.length;
|
||||
}
|
||||
let row = {};
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
row[this.getCharByIndex(i)] = d[i];
|
||||
}
|
||||
list.push(row);
|
||||
});
|
||||
for (let i = 0; i < maxCols; i++) {
|
||||
title.push(this.getCharByIndex(i));
|
||||
}
|
||||
this.importTitle = title;
|
||||
this.importData = list;
|
||||
this.importDataAoa = aoa;
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
return false;
|
||||
},
|
||||
/* 导入excel读取合并信息 */
|
||||
importFile3(file) {
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
let data = new Uint8Array(e.target.result);
|
||||
let workbook = XLSX.read(data, {type: 'array'});
|
||||
let sheetNames = workbook.SheetNames;
|
||||
let worksheet = workbook.Sheets[sheetNames[0]];
|
||||
// 解析成二维数组
|
||||
let aoa = XLSX.utils.sheet_to_json(worksheet, {header: 1});
|
||||
// 生成表格需要的数据
|
||||
let list = [], maxCols = 0, title = [];
|
||||
aoa.forEach(d => {
|
||||
if (d.length > maxCols) {
|
||||
maxCols = d.length;
|
||||
}
|
||||
let row = {};
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
row[this.getCharByIndex(i)] = d[i];
|
||||
}
|
||||
list.push(row);
|
||||
});
|
||||
for (let i = 0; i < maxCols; i++) {
|
||||
title.push(this.getCharByIndex(i));
|
||||
}
|
||||
// 记录合并单元格
|
||||
if (worksheet['!merges']) {
|
||||
worksheet['!merges'].forEach(m => {
|
||||
for (let r = m.s.r; r <= m.e.r; r++) {
|
||||
for (let c = m.s.c; c <= m.e.c; c++) {
|
||||
let cc = this.getCharByIndex(c);
|
||||
list[r]['__colspan__' + cc] = 0;
|
||||
list[r]['__rowspan__' + cc] = 0;
|
||||
}
|
||||
}
|
||||
let char = this.getCharByIndex(m.s.c);
|
||||
list[m.s.r]['__colspan__' + char] = m.e.c - m.s.c + 1;
|
||||
list[m.s.r]['__rowspan__' + char] = m.e.r - m.s.r + 1;
|
||||
});
|
||||
}
|
||||
this.importTitle = title;
|
||||
this.importData = list;
|
||||
this.importDataAoa = aoa;
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
return false;
|
||||
},
|
||||
/* 生成Excel列字母序号 */
|
||||
getCharByIndex(index) {
|
||||
let chars = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
|
||||
'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
|
||||
if (index < chars.length) {
|
||||
return chars[index];
|
||||
}
|
||||
let n = parseInt(index / chars.length),
|
||||
m = index % chars.length;
|
||||
return chars[n] + chars[m];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
289
src/views/extension/file.vue
Normal file
289
src/views/extension/file.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{padding: 0, minHeight: '520px'}">
|
||||
<div style="padding: 16px 16px 0 16px;">
|
||||
<!-- 工具栏 -->
|
||||
<div class="ele-table-tool">
|
||||
<div class="ele-table-tool-title">
|
||||
<a-space>
|
||||
<a-upload
|
||||
:showUploadList="false"
|
||||
:customRequest="doUpload">
|
||||
<a-button type="primary">上传</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary">新建文件夹</a-button>
|
||||
<a-button danger type="primary">删除</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 搜索框 -->
|
||||
<div style="max-width: 240px;">
|
||||
<a-input-search
|
||||
v-model:value="search"
|
||||
placeholder="搜索您的文件"/>
|
||||
</div>
|
||||
<!-- 显示方式切换 -->
|
||||
<menu-outlined
|
||||
v-if="grid"
|
||||
class="ele-file-tool-btn"
|
||||
@click="grid=!grid"/>
|
||||
<appstore-outlined
|
||||
v-else
|
||||
class="ele-file-tool-btn"
|
||||
@click="grid=!grid"/>
|
||||
</div>
|
||||
<!-- 文件目录面包屑 -->
|
||||
<div class="ele-file-breadcrumb-group ele-cell">
|
||||
<div class="ele-cell-content ele-cell">
|
||||
<div
|
||||
v-if="directory.length"
|
||||
class="ele-file-breadcrumb-back ele-text-primary"
|
||||
@click="back">返回上一级
|
||||
</div>
|
||||
<div class="ele-file-breadcrumb-list ele-cell-content ele-cell">
|
||||
<div
|
||||
:class="['ele-file-breadcrumb-item ele-cell', {'ele-text-primary': directory.length}]"
|
||||
@click="listAll">
|
||||
<div class="ele-file-breadcrumb-item-title">全部文件</div>
|
||||
<right-outlined v-if="directory.length"/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item,index) in directory"
|
||||
:key="index"
|
||||
@click="listDir(index)"
|
||||
:class="['ele-file-breadcrumb-item ele-cell', {'ele-text-primary': index!==directory.length-1}]">
|
||||
<div class="ele-file-breadcrumb-item-title">{{ item }}</div>
|
||||
<right-outlined v-if="index!==directory.length-1"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>已全部加载，共 {{ data.length }} 个</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-spin :spinning="loading">
|
||||
<!-- 文件展示列表 -->
|
||||
<ele-file-list
|
||||
:data="data"
|
||||
v-model:checked="checked"
|
||||
:grid="grid"
|
||||
:sort="sort"
|
||||
:order="order"
|
||||
@item-click="onItemClick"
|
||||
@sort-change="onSortChange">
|
||||
</ele-file-list>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleFileList from 'ele-admin-pro/packages/ele-file-list';
|
||||
import {
|
||||
MenuOutlined,
|
||||
AppstoreOutlined,
|
||||
RightOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionFile',
|
||||
components: {
|
||||
EleFileList,
|
||||
MenuOutlined,
|
||||
AppstoreOutlined,
|
||||
RightOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: true,
|
||||
// 是否网格展示
|
||||
grid: true,
|
||||
// 文件列表数据
|
||||
data: [],
|
||||
// 选中数据
|
||||
checked: [],
|
||||
// 文件目录面包屑数据
|
||||
directory: [],
|
||||
// 搜索
|
||||
search: '',
|
||||
// 排序字段
|
||||
sort: '',
|
||||
// 排序方式
|
||||
order: '',
|
||||
// 图片预览文件
|
||||
currentImage: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 图片预览列表
|
||||
previewList() {
|
||||
return this.data.filter(d => d.thumbnail).map(d => d.url);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
/* 查询文件列表 */
|
||||
query() {
|
||||
this.checked = [];
|
||||
this.loading = true;
|
||||
this.$http.get('/file/list', {
|
||||
params: {
|
||||
directory: this.directory.join('/'),
|
||||
sort: this.sort,
|
||||
order: this.order
|
||||
}
|
||||
}).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
res.data.data.forEach(d => {
|
||||
// 文件地址加baseURL
|
||||
if (d.url) {
|
||||
d.url = this.$http.defaults.baseURL + '/' + d.url;
|
||||
}
|
||||
if (d.thumbnail) {
|
||||
d.thumbnail = this.$http.defaults.baseURL + '/' + d.thumbnail;
|
||||
}
|
||||
// 文件大小格式化
|
||||
if (d.isDirectory) {
|
||||
d.length = '-';
|
||||
} else {
|
||||
d.length = this.getFileSize(d.length);
|
||||
}
|
||||
// 修改时间格式化
|
||||
if (d.updateTime) {
|
||||
d.updateTime = this.$util.toDateString(d.updateTime);
|
||||
}
|
||||
});
|
||||
this.data = res.data.data;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* item点击事件 */
|
||||
onItemClick(item) {
|
||||
if (item.isDirectory) { // 文件夹
|
||||
this.directory.push(item.name);
|
||||
this.query();
|
||||
} /*else if (item.thumbnail) {
|
||||
this.currentImage = item.url;
|
||||
}*/ else if (this.checked.indexOf(item) !== -1) {
|
||||
this.checked.splice(this.checked.indexOf(item), 1);
|
||||
} else {
|
||||
this.checked.push(item);
|
||||
}
|
||||
},
|
||||
/* 返回上级 */
|
||||
back() {
|
||||
this.directory.splice(this.directory.length - 1, 1);
|
||||
this.query();
|
||||
},
|
||||
/* 全部文件 */
|
||||
listAll() {
|
||||
if (!this.directory.length) {
|
||||
return;
|
||||
}
|
||||
this.directory = [];
|
||||
this.query();
|
||||
},
|
||||
/* 回到指定目录 */
|
||||
listDir(index) {
|
||||
if (index === this.directory.length - 1) {
|
||||
return;
|
||||
}
|
||||
this.directory.splice(index, this.directory.length - index);
|
||||
this.query();
|
||||
},
|
||||
/* 文件大小格式化 */
|
||||
getFileSize(value) {
|
||||
if (value < 1024) {
|
||||
return value + 'B';
|
||||
} else if (value < 1024 * 1024) {
|
||||
return (value / 1024).toFixed(1) + 'KB';
|
||||
} else if (value < 1024 * 1024 * 1024) {
|
||||
return (value / 1024 / 1024).toFixed(1) + 'M';
|
||||
} else {
|
||||
return (value / 1024 / 1024 / 1024).toFixed(1) + 'G';
|
||||
}
|
||||
},
|
||||
/* 文件列表排序方式改变 */
|
||||
onSortChange(obj) {
|
||||
this.order = obj.order;
|
||||
this.sort = obj.sort;
|
||||
this.query();
|
||||
},
|
||||
/* 查看文件 */
|
||||
view(item) {
|
||||
if (item.isDirectory) {
|
||||
this.onItemClick(item);
|
||||
} else if (item.url) {
|
||||
window.open(item.url);
|
||||
}
|
||||
},
|
||||
/* 上传 */
|
||||
doUpload({file}) {
|
||||
let formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const hide = this.$message.loading('上传中..', 0);
|
||||
this.$http.post('/file/upload', formData).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.directory = [res.data.dir.replace(/\//, '')];
|
||||
this.query();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 图标按钮 */
|
||||
.ele-file-tool-btn {
|
||||
font-size: 20px;
|
||||
margin-left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 文件目录面包屑 */
|
||||
.ele-file-breadcrumb-group {
|
||||
margin-bottom: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-back {
|
||||
padding-right: 12px;
|
||||
border-right: 1px solid hsla(0, 0%, 60%, .3);
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-back:hover,
|
||||
.ele-file-breadcrumb-item.ele-text-primary:hover > .ele-file-breadcrumb-item-title {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-item .anticon {
|
||||
margin: 0 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.ele-table-tool > .ele-table-tool-title + div,
|
||||
.ele-file-breadcrumb-group > .ele-cell-content + div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
261
src/views/extension/map.vue
Normal file
261
src/views/extension/map.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<!-- 地图位置选择弹窗 -->
|
||||
<ele-map-picker
|
||||
v-model:visible="showPicker"
|
||||
:need-city="true"
|
||||
@done="onChoose"/>
|
||||
<ele-map-picker
|
||||
v-model:visible="showPicker2"
|
||||
:need-city="true"
|
||||
:search-type="1"
|
||||
@done="onChoose"/>
|
||||
<!-- 弹窗选择位置 -->
|
||||
<a-card title="弹窗选择位置" :bordered="false">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showPicker=true">地图选择位置(POI)
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showPicker2=true">关键字检索模式
|
||||
</a-button>
|
||||
</a-space>
|
||||
<div v-if="form.location">
|
||||
<div style="margin-top: 12px;">选择位置: {{ form.location }}</div>
|
||||
<div style="margin-top: 12px;">详细地址: {{ form.address }}</div>
|
||||
<div style="margin-top: 12px;">经 纬 度 : {{ form.jinweidu }}</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 官网底部地图 -->
|
||||
<a-card title="官网底部地图" :bordered="false">
|
||||
<div ref="locationMap" style="height: 360px;max-width: 1000px;"></div>
|
||||
</a-card>
|
||||
<!-- 轨迹展示及轨迹回放 -->
|
||||
<a-card title="轨迹展示及轨迹回放" :bordered="false">
|
||||
<div ref="trackMap" style="height: 360px;margin-bottom: 16px;max-width: 1000px;"></div>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="startTrackAnim">开始动画
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="pauseTrackAnim">暂停动画
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="resumeTrackAnim">继续动画
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleMapPicker from 'ele-admin-pro/packages/ele-map-picker';
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionMap',
|
||||
components: {EleMapPicker},
|
||||
data() {
|
||||
return {
|
||||
// 是否显示地图选择弹窗
|
||||
showPicker: false,
|
||||
// 是否显示地图选择弹窗2
|
||||
showPicker2: false,
|
||||
// 表单
|
||||
form: {},
|
||||
// 小车的marker
|
||||
carMarker: null,
|
||||
// 轨迹路线
|
||||
lineData: [
|
||||
[116.478935, 39.997761],
|
||||
[116.478939, 39.997825],
|
||||
[116.478912, 39.998549],
|
||||
[116.478912, 39.998549],
|
||||
[116.478998, 39.998555],
|
||||
[116.478998, 39.998555],
|
||||
[116.479282, 39.99856],
|
||||
[116.479658, 39.998528],
|
||||
[116.480151, 39.998453],
|
||||
[116.480784, 39.998302],
|
||||
[116.480784, 39.998302],
|
||||
[116.481149, 39.998184],
|
||||
[116.481573, 39.997997],
|
||||
[116.481863, 39.997846],
|
||||
[116.482072, 39.997718],
|
||||
[116.482362, 39.997718],
|
||||
[116.483633, 39.998935],
|
||||
[116.48367, 39.998968],
|
||||
[116.484648, 39.999861]
|
||||
],
|
||||
// 官网底部地图的实例
|
||||
mapInsLocation: null,
|
||||
// 小车轨迹地图的实例
|
||||
mapInsTrack: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否是暗黑模式
|
||||
darkMode() {
|
||||
return this.$store.state.theme.darkMode;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderLocationMap();
|
||||
this.renderTrackMap();
|
||||
},
|
||||
methods: {
|
||||
/* 地图选择后回调 */
|
||||
onChoose(location) {
|
||||
console.log(location);
|
||||
this.form = {
|
||||
location: location.city.province + '/' + location.city.city + '/' + location.city.district,
|
||||
address: location.name + ' ' + location.address,
|
||||
jinweidu: location.lng + ',' + location.lat
|
||||
};
|
||||
this.showPicker = false;
|
||||
this.showPicker2 = false;
|
||||
},
|
||||
/* 渲染官网底部地图 */
|
||||
renderLocationMap() {
|
||||
AMapLoader.load({
|
||||
'key': '006d995d433058322319fa797f2876f5',
|
||||
'version': '2.0',
|
||||
'plugins': ['AMap.InfoWindow', 'AMap.Marker']
|
||||
}).then((AMap) => {
|
||||
// 渲染地图
|
||||
let option = {
|
||||
zoom: 13, // 初缩放级别
|
||||
center: [114.346084, 30.511215 + 0.005] // 初始中心点
|
||||
};
|
||||
if (this.darkMode) {
|
||||
option.mapStyle = 'amap://styles/dark';
|
||||
}
|
||||
this.mapInsLocation = new AMap.Map(this.$refs.locationMap, option);
|
||||
// 创建信息窗体
|
||||
let infoWindow = new AMap.InfoWindow({
|
||||
content: `
|
||||
<div style="color: #333;">
|
||||
<div style="padding: 5px;font-size: 16px;">武汉易云智科技有限公司</div>
|
||||
<div style="padding: 0 5px;">地址：湖北省武汉市洪山区雄楚大道222号</div>
|
||||
<div style="padding: 0 5px;">电话：020-123456789</div>
|
||||
</div>
|
||||
<a style="padding: 8px 5px 0;text-decoration: none;display: inline-block;" class="ele-text-primary"
|
||||
href="//uri.amap.com/marker?position=114.346084,30.511215&name=武汉易云智科技有限公司"
|
||||
target="_blank">到这里去→</a>
|
||||
`
|
||||
});
|
||||
infoWindow.open(this.mapInsLocation, [114.346084, 30.511215]);
|
||||
let icon = new AMap.Icon({
|
||||
size: new AMap.Size(25, 34),
|
||||
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
|
||||
imageSize: new AMap.Size(25, 34)
|
||||
});
|
||||
let marker = new AMap.Marker({
|
||||
icon: icon,
|
||||
position: [114.346084, 30.511215],
|
||||
offset: new AMap.Pixel(-12, -28)
|
||||
});
|
||||
marker.setMap(this.mapInsLocation);
|
||||
marker.on('click', () => {
|
||||
infoWindow.open(this.mapInsLocation);
|
||||
});
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
/* 渲染轨迹回放地图 */
|
||||
renderTrackMap() {
|
||||
AMapLoader.load({
|
||||
'key': '006d995d433058322319fa797f2876f5',
|
||||
'version': '2.0',
|
||||
'plugins': ['AMap.MoveAnimation', 'AMap.Marker', 'AMap.Polyline']
|
||||
}).then((AMap) => {
|
||||
// 渲染地图
|
||||
let option = {
|
||||
zoom: 17,
|
||||
center: [116.478935, 39.997761],
|
||||
};
|
||||
if (this.darkMode) {
|
||||
option.mapStyle = 'amap://styles/dark';
|
||||
}
|
||||
this.mapInsTrack = new AMap.Map(this.$refs.trackMap, option);
|
||||
// 创建小车marker
|
||||
this.carMarker = new AMap.Marker({
|
||||
map: this.mapInsTrack,
|
||||
position: [116.478935, 39.997761],
|
||||
icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
|
||||
offset: new AMap.Pixel(-13, -26),
|
||||
});
|
||||
// 绘制轨迹
|
||||
new AMap.Polyline({
|
||||
map: this.mapInsTrack,
|
||||
path: this.lineData,
|
||||
showDir: true,
|
||||
strokeColor: '#28F', // 线颜色
|
||||
strokeOpacity: 1, // 线透明度
|
||||
strokeWeight: 6, // 线宽
|
||||
//strokeStyle: 'solid' // 线样式
|
||||
});
|
||||
// 通过的轨迹
|
||||
let passedPolyline = new AMap.Polyline({
|
||||
map: this.mapInsTrack,
|
||||
showDir: true,
|
||||
strokeColor: '#4B5', // 线颜色
|
||||
strokeOpacity: 1, // 线透明度
|
||||
strokeWeight: 6, // 线宽
|
||||
});
|
||||
// 小车移动回调
|
||||
this.carMarker.on('moving', function (e) {
|
||||
passedPolyline.setPath(e.passedPath);
|
||||
});
|
||||
// 地图自适应
|
||||
this.mapInsTrack.setFitView();
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
/* 开始轨迹回放动画 */
|
||||
startTrackAnim() {
|
||||
this.carMarker.stopMove();
|
||||
this.carMarker.moveAlong(this.lineData, {
|
||||
duration: 200,
|
||||
autoRotation: true,
|
||||
});
|
||||
},
|
||||
/* 暂停轨迹回放动画 */
|
||||
pauseTrackAnim() {
|
||||
this.carMarker.pauseMove();
|
||||
},
|
||||
/* 继续开始轨迹回放动画 */
|
||||
resumeTrackAnim() {
|
||||
this.carMarker.resumeMove();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
darkMode() {
|
||||
if (this.mapInsLocation) {
|
||||
if (this.darkMode) {
|
||||
this.mapInsLocation.setMapStyle('amap://styles/dark');
|
||||
} else {
|
||||
this.mapInsLocation.setMapStyle('amap://styles/normal');
|
||||
}
|
||||
}
|
||||
if (this.mapInsTrack) {
|
||||
if (this.darkMode) {
|
||||
this.mapInsTrack.setMapStyle('amap://styles/dark');
|
||||
} else {
|
||||
this.mapInsTrack.setMapStyle('amap://styles/normal');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
34
src/views/extension/more/index.vue
Normal file
34
src/views/extension/more/index.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<more-tag/>
|
||||
<more-city-select/>
|
||||
<more-modal/>
|
||||
<more-color-picker/>
|
||||
<more-cropper/>
|
||||
<more-count-up/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MoreModal from './more-modal';
|
||||
import MoreTag from './more-tag';
|
||||
import MoreCitySelect from './more-city-select';
|
||||
import MoreColorPicker from './more-color-picker';
|
||||
import MoreCropper from './more-cropper';
|
||||
import MoreCountUp from './more-count-up';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionMore',
|
||||
components: {
|
||||
MoreTag,
|
||||
MoreCitySelect,
|
||||
MoreColorPicker,
|
||||
MoreCropper,
|
||||
MoreCountUp,
|
||||
MoreModal
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
44
src/views/extension/more/more-city-select.vue
Normal file
44
src/views/extension/more/more-city-select.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<a-card title="省市区级联选择" :bordered="false">
|
||||
<a-space>
|
||||
<a-cascader
|
||||
v-model:value="city"
|
||||
:options="cityData.cityData"
|
||||
placeholder="请选择省市区"
|
||||
popup-class-name="ele-pop-wrap-higher"/>
|
||||
<a-cascader
|
||||
v-model:value="provinceCity"
|
||||
:options="cityData.provinceCityData"
|
||||
placeholder="请选择省市"
|
||||
popup-class-name="ele-pop-wrap-higher"/>
|
||||
<a-cascader
|
||||
v-model:value="province"
|
||||
:options="cityData.provinceData"
|
||||
placeholder="请选择省"
|
||||
popup-class-name="ele-pop-wrap-higher"/>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import regions from 'ele-admin-pro/packages/regions.js';
|
||||
|
||||
export default {
|
||||
name: 'MoreCitySelect',
|
||||
data() {
|
||||
return {
|
||||
// 省市区数据
|
||||
cityData: regions,
|
||||
// 选中的省市区
|
||||
city: [],
|
||||
// 选中的省市
|
||||
provinceCity: [],
|
||||
// 选中的省
|
||||
province: [],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
53
src/views/extension/more/more-color-picker.vue
Normal file
53
src/views/extension/more/more-color-picker.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<a-card title="颜色选择器" :bordered="false">
|
||||
<a-space>
|
||||
<ele-color-picker
|
||||
size="large"
|
||||
:show-alpha="true"
|
||||
v-model:value="color"
|
||||
:predefine="predefineColors"/>
|
||||
<ele-color-picker
|
||||
:show-alpha="true"
|
||||
v-model:value="color"
|
||||
:predefine="predefineColors"/>
|
||||
<ele-color-picker
|
||||
size="small"
|
||||
:show-alpha="true"
|
||||
v-model:value="color"
|
||||
:predefine="predefineColors"/>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleColorPicker from 'ele-admin-pro/packages/ele-color-picker';
|
||||
|
||||
export default {
|
||||
name: 'MoreColorPicker',
|
||||
components: {EleColorPicker},
|
||||
data() {
|
||||
return {
|
||||
color: 'rgba(255, 69, 0, 0.68)',
|
||||
predefineColors: [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
71
src/views/extension/more/more-count-up.vue
Normal file
71
src/views/extension/more/more-count-up.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<a-card title="数字滚动" :bordered="false">
|
||||
<h1 style="margin-bottom: 12px;">
|
||||
<ele-count-up
|
||||
:delay="0"
|
||||
:end-val="countUpVal"
|
||||
:options="countUpOptions"
|
||||
@ready="onCountUpReady"/>
|
||||
</h1>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="startCountUp">重新开始
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="updateCountUp">更新数字
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleCountUp from 'ele-admin-pro/packages/ele-count-up';
|
||||
|
||||
export default {
|
||||
name: 'MoreCountUp',
|
||||
components: {EleCountUp},
|
||||
data() {
|
||||
return {
|
||||
// countUp值
|
||||
countUpVal: 6317,
|
||||
// countUp配置
|
||||
countUpOptions: {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: ',',
|
||||
decimal: '.',
|
||||
prefix: '',
|
||||
suffix: ''
|
||||
},
|
||||
// countUp实例
|
||||
countUpIns: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* countUp渲染完成 */
|
||||
onCountUpReady(instance) {
|
||||
this.countUpIns = instance;
|
||||
},
|
||||
/* countUp重新开始 */
|
||||
startCountUp() {
|
||||
if (!this.countUpIns) {
|
||||
return;
|
||||
}
|
||||
this.countUpIns.reset();
|
||||
this.countUpIns.start();
|
||||
},
|
||||
/* countUp更新 */
|
||||
updateCountUp() {
|
||||
if (!this.countUpIns) {
|
||||
return;
|
||||
}
|
||||
this.countUpIns.update(1000 + Math.round(Math.random() * 9000));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
54
src/views/extension/more/more-cropper.vue
Normal file
54
src/views/extension/more/more-cropper.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<a-card title="图片裁剪" :bordered="false">
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="visible1=true">1 : 1 裁剪
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="visible2=true">16 : 9 裁剪
|
||||
</a-button>
|
||||
</a-space>
|
||||
<div v-if="result" style="margin-top: 16px;">
|
||||
<img :src="result" style="height: 120px;width: auto;"/>
|
||||
</div>
|
||||
<!-- 图片裁剪 -->
|
||||
<ele-cropper-modal
|
||||
:src="src"
|
||||
v-model:visible="visible1"
|
||||
@done="onDone"/>
|
||||
<ele-cropper-modal
|
||||
:src="src"
|
||||
:aspect-ratio="16/9"
|
||||
v-model:visible="visible2"
|
||||
@done="onDone"/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleCropperModal from 'ele-admin-pro/packages/ele-cropper-modal';
|
||||
|
||||
export default {
|
||||
name: 'MoreCropper',
|
||||
components: {EleCropperModal},
|
||||
data() {
|
||||
return {
|
||||
visible1: false,
|
||||
visible2: false,
|
||||
src: 'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
|
||||
result: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onDone(result) {
|
||||
this.result = result;
|
||||
this.visible1 = false;
|
||||
this.visible2 = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
207
src/views/extension/more/more-modal.vue
Normal file
207
src/views/extension/more/more-modal.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<a-card title="可拖拽、拉伸、全屏弹窗" :bordered="false">
|
||||
<div>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="openDialog">可拖拽弹窗</a-button>
|
||||
<a-button type="primary" @click="openMoveOutDialog">允许拖出边界</a-button>
|
||||
<a-button type="primary" @click="openHideModalDialog">不要遮罩层</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div style="margin-top: 16px;">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="openFullDialog">默认全屏打开</a-button>
|
||||
<a-button type="primary" @click="openMoreDialog">默认左下角打开</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 弹窗1 -->
|
||||
<a-modal
|
||||
:mask="mask"
|
||||
:width="400"
|
||||
v-model:visible="visible"
|
||||
:wrap-class-name="wrapClassName"
|
||||
:body-style="{paddingBottom: '16px'}"
|
||||
@cancel="cancel"
|
||||
@ok="save">
|
||||
<template #title>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">拖拽弹窗</div>
|
||||
<compress-outlined class="ele-modal-icon-compress"/>
|
||||
<expand-outlined class="ele-modal-icon-expand"/>
|
||||
</div>
|
||||
</template>
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{flex: '70px'}"
|
||||
:wrapper-col="{flex: 'auto'}">
|
||||
<a-form-item label="用户名" name="nickname" style="flex-wrap: nowrap;">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户名"
|
||||
v-model:value="form.nickname"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别" name="sex">
|
||||
<a-select
|
||||
allow-clear
|
||||
placeholder="请选择性别"
|
||||
v-model:value="form.sex">
|
||||
<a-select-option value="男">男</a-select-option>
|
||||
<a-select-option value="女">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号" name="phone" style="flex-wrap: nowrap;">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入手机号"
|
||||
v-model:value="form.phone"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" name="email" style="flex-wrap: nowrap;">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入邮箱"
|
||||
v-model:value="form.email"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="个人简介" style="flex-wrap: nowrap;">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
placeholder="请输入个人简介"
|
||||
v-model:value="form.introduction"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<!-- 弹窗2 -->
|
||||
<a-modal
|
||||
:width="400"
|
||||
:mask="false"
|
||||
v-model:visible="visible2"
|
||||
wrap-class-name="ele-modal-movable ele-modal-resizable ele-modal-multiple ele-modal-wrap-fullscreen">
|
||||
<template #title>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">默认全屏打开</div>
|
||||
<compress-outlined class="ele-modal-icon-compress"/>
|
||||
<expand-outlined class="ele-modal-icon-expand"/>
|
||||
</div>
|
||||
</template>
|
||||
<div style="min-height: 66px;">我是弹窗2</div>
|
||||
</a-modal>
|
||||
<!-- 弹窗3 -->
|
||||
<a-modal
|
||||
:width="400"
|
||||
:mask="false"
|
||||
title="默认左下角打开"
|
||||
class="demo-modal-eg3"
|
||||
v-model:visible="visible3"
|
||||
wrap-class-name="ele-modal-movable ele-modal-resizable ele-modal-multiple">
|
||||
<div style="min-height: 66px;">我是弹窗3</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ExpandOutlined, CompressOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'MoreModal',
|
||||
components: {ExpandOutlined, CompressOutlined},
|
||||
data() {
|
||||
return {
|
||||
// 弹窗是否打开
|
||||
visible: false,
|
||||
visible2: false,
|
||||
visible3: false,
|
||||
// 表单数据
|
||||
form: {},
|
||||
// 是否显示遮罩层
|
||||
mask: true,
|
||||
// 是否允许拖出边界
|
||||
moveOut: false,
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
nickname: [
|
||||
{required: true, message: '请输入用户名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
sex: [
|
||||
{required: true, message: '请选择性别', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
phone: [
|
||||
{required: true, message: '请输入手机号', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
email: [
|
||||
{required: true, message: '请输入邮箱', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 弹窗一的wrap-class
|
||||
wrapClassName() {
|
||||
return [
|
||||
this.moveOut ? 'ele-modal-move-out' : 'ele-modal-movable',
|
||||
this.mask ? '' : 'ele-modal-multiple',
|
||||
'ele-modal-resizable'
|
||||
].join(' ');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 打开弹窗 */
|
||||
openDialog() {
|
||||
if (!this.visible) {
|
||||
this.mask = true;
|
||||
this.moveOut = false;
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
/* 打开允许拖出边界弹窗 */
|
||||
openMoveOutDialog() {
|
||||
this.moveOut = true;
|
||||
if (!this.visible) {
|
||||
this.mask = true;
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
/* 打开无遮罩层弹窗 */
|
||||
openHideModalDialog() {
|
||||
this.moveOut = false;
|
||||
if (!this.visible) {
|
||||
this.mask = false;
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
/* 弹窗关闭回调 */
|
||||
cancel() {
|
||||
this.$refs.form.clearValidate();
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.$message.success('保存成功');
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 打开默认全屏弹窗 */
|
||||
openFullDialog() {
|
||||
if (!this.visible2) {
|
||||
this.visible2 = true;
|
||||
}
|
||||
},
|
||||
/* 打开弹窗3 */
|
||||
openMoreDialog() {
|
||||
if (!this.visible3) {
|
||||
this.visible3 = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-modal-eg3 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
left: auto;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
161
src/views/extension/more/more-tag.vue
Normal file
161
src/views/extension/more/more-tag.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<a-card title="标签" :bordered="false">
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">预设颜色:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-tag
|
||||
:color="colors[type][0]"
|
||||
:size="size">标签一
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][1]"
|
||||
:size="size">标签二
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][2]"
|
||||
:size="size">标签三
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][3]"
|
||||
:size="size">标签四
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][4]"
|
||||
:size="size">标签五
|
||||
</ele-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">圆角样式:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-tag
|
||||
:color="colors[type][0]"
|
||||
:size="size"
|
||||
shape="round">标签一
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][1]"
|
||||
:size="size"
|
||||
shape="round">标签二
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][2]"
|
||||
:size="size"
|
||||
shape="round">标签三
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][3]"
|
||||
:size="size"
|
||||
shape="round">标签四
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][4]"
|
||||
:size="size"
|
||||
shape="round">标签五
|
||||
</ele-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">圆形样式:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-tag
|
||||
:color="colors[type][0]"
|
||||
:size="size"
|
||||
shape="circle">1
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][1]"
|
||||
:size="size"
|
||||
shape="circle">2
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][2]"
|
||||
:size="size"
|
||||
shape="circle">3
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][3]"
|
||||
:size="size"
|
||||
shape="circle">4
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][4]"
|
||||
:size="size"
|
||||
shape="circle">5
|
||||
</ele-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item" style="align-items: flex-start;">
|
||||
<div class="demo-tag-label">标签输入:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-edit-tag
|
||||
v-model:data="tags"
|
||||
:color="colors[type][0]"
|
||||
:size="size"/>
|
||||
<div>{{ JSON.stringify(tags) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">尺寸选择:</div>
|
||||
<div class="demo-tag-content">
|
||||
<a-radio-group
|
||||
:options="sizes"
|
||||
v-model:value="size"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">主题选择:</div>
|
||||
<div class="demo-tag-content">
|
||||
<a-radio-group
|
||||
:options="types"
|
||||
v-model:value="type"/>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MoreTag',
|
||||
data() {
|
||||
return {
|
||||
size: 'mini',
|
||||
sizes: [
|
||||
{label: 'mini', value: 'mini'},
|
||||
{label: 'small', value: 'small'},
|
||||
{label: 'middle', value: 'middle'},
|
||||
{label: 'large', value: 'large'}
|
||||
],
|
||||
colors: [
|
||||
['', 'blue', 'green', 'orange', 'red'],
|
||||
['#909399', '#1890ff', '#52c41a', '#fa8c16', '#f5222d']
|
||||
],
|
||||
types: [
|
||||
{label: 'presets', value: 0},
|
||||
{label: 'custom', value: 1},
|
||||
],
|
||||
type: 0,
|
||||
tags: ['标签一', '标签二', '标签三']
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-tag-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-tag-item .demo-tag-label {
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.demo-tag-item .demo-tag-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.demo-tag-item + .demo-tag-item {
|
||||
margin-top: 22px;
|
||||
}
|
||||
</style>
|
||||
334
src/views/extension/player.vue
Normal file
334
src/views/extension/player.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="基础演示" :bordered="false">
|
||||
<!-- 操作按钮 -->
|
||||
<a-space style="margin-bottom: 16px;">
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="play">播放
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="pause">暂停
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="replay">重新播放
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="changeSrc">切换视频源
|
||||
</a-button>
|
||||
</a-space>
|
||||
<!-- 播放器 -->
|
||||
<xgplayer
|
||||
:config="config1"
|
||||
@player="onPlayer1"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="显示弹幕" :bordered="false">
|
||||
<!-- 操作按钮 -->
|
||||
<a-space style="margin-bottom: 16px;">
|
||||
<a-input
|
||||
style="width: 160px;"
|
||||
v-model:value="dmText"
|
||||
placeholder="请输入弹幕内容"
|
||||
:disabled="!ready2"/>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready2"
|
||||
@click="shoot">发射
|
||||
</a-button>
|
||||
</a-space>
|
||||
<!-- 播放器 -->
|
||||
<xgplayer
|
||||
:config="config2"
|
||||
@player="onPlayer2"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Xgplayer from 'xgplayer-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionPlayer',
|
||||
components: {Xgplayer},
|
||||
data() {
|
||||
return {
|
||||
// 视频播放器一配置
|
||||
config1: {
|
||||
id: 'demoPlayer1',
|
||||
lang: 'zh-cn',
|
||||
fluid: true,
|
||||
// 视频地址
|
||||
url: 'https://s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
|
||||
// 封面
|
||||
poster: 'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png',
|
||||
// 开启倍速播放
|
||||
playbackRate: [0.5, 1, 1.5, 2],
|
||||
// 开启画中画
|
||||
pip: true
|
||||
},
|
||||
// 视频播放器一实例
|
||||
player1: null,
|
||||
// 视频播放器一是否实例化完成
|
||||
ready1: false,
|
||||
// 视频播放器二配置
|
||||
config2: {
|
||||
id: 'demoPlayer2',
|
||||
lang: 'zh-cn',
|
||||
fluid: true,
|
||||
url: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4',
|
||||
poster: 'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png',
|
||||
danmu: {
|
||||
comments: [
|
||||
{
|
||||
id: '1',
|
||||
start: 0,
|
||||
txt: '空降',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
start: 1500,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
start: 3500,
|
||||
txt: '弹幕护体',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
start: 4500,
|
||||
txt: '弹幕护体',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
start: 6000,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
start: 8500,
|
||||
txt: '弹幕护体',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
start: 10000,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
start: 12500,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
start: 15500,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
start: 16500,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
start: 18000,
|
||||
txt: '关弹幕，保智商',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
start: 20500,
|
||||
txt: '关弹幕，保智商',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
start: 22000,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
start: 25500,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '15',
|
||||
start: 26000,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 视频播放器二实例
|
||||
player2: null,
|
||||
// 视频播放器二是否实例化完成
|
||||
ready2: false,
|
||||
// 弹幕输入内容
|
||||
dmText: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 播放器一渲染完成 */
|
||||
onPlayer1(e) {
|
||||
this.player1 = e;
|
||||
this.player1.on('play', () => {
|
||||
this.ready1 = true;
|
||||
});
|
||||
},
|
||||
/* 播放 */
|
||||
play() {
|
||||
if (this.player1.paused) {
|
||||
this.player1.play();
|
||||
}
|
||||
},
|
||||
/* 暂停 */
|
||||
pause() {
|
||||
if (!this.player1.paused) {
|
||||
this.player1.pause();
|
||||
}
|
||||
},
|
||||
/* 重新播放 */
|
||||
replay() {
|
||||
this.player1.replay();
|
||||
},
|
||||
/* 切换视频源 */
|
||||
changeSrc() {
|
||||
this.player1.src = 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4';
|
||||
if (this.player1.paused) {
|
||||
this.player1.play();
|
||||
}
|
||||
},
|
||||
/* 播放器二渲染完成 */
|
||||
onPlayer2(e) {
|
||||
this.player2 = e;
|
||||
this.player2.on('play', () => {
|
||||
this.ready2 = true;
|
||||
});
|
||||
},
|
||||
/* 发射弹幕 */
|
||||
shoot() {
|
||||
if (!this.dmText) {
|
||||
this.$message.error('请输入弹幕内容');
|
||||
return;
|
||||
}
|
||||
this.player2.danmu.sendComment({
|
||||
id: new Date().getTime(),
|
||||
duration: 15000,
|
||||
color: true,
|
||||
start: this.player2.currentTime * 1000,
|
||||
txt: this.dmText,
|
||||
style: {
|
||||
color: '#fa1f41',
|
||||
fontSize: '20px',
|
||||
border: 'solid 1px #fa1f41'
|
||||
}
|
||||
});
|
||||
this.dmText = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
366
src/views/extension/printer.vue
Normal file
366
src/views/extension/printer.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card title="打印当前页面" :bordered="false">
|
||||
<div style="margin-bottom: 16px;">支持IE浏览器打印预览</div>
|
||||
<a-space>
|
||||
<a-button @click="print({})">打印当前页面</a-button>
|
||||
<a-button @click="print({horizontal:true})">横屏打印</a-button>
|
||||
<!--<a-button @click="print({blank:true})">新窗口打印</a-button>-->
|
||||
<a-button @click="print({hide:['.demo-hide-1']})">打印时隐藏指定内容</a-button>
|
||||
</a-space>
|
||||
<div style="margin-top: 16px;">
|
||||
<span class="ele-text-danger ele-printer-hide">此段内容会在所有打印时自动隐藏，打印完自动复原。</span>
|
||||
<span class="ele-text-primary demo-hide-1">此段内容在指定打印时才隐藏。</span>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card title="打印任意内容" :bordered="false">
|
||||
<a-space>
|
||||
<a-button @click="printHtml()">打印任意内容</a-button>
|
||||
<!--<a-button @click="printHtml(true)">新窗口打印</a-button>-->
|
||||
<a-button @click="printAddHeader">设置页眉页脚</a-button>
|
||||
<a-button @click="printImage">打印图片</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
<a-card title="分页打印" :bordered="false">
|
||||
<a-space>
|
||||
<a-button @click="printPage()">分页打印</a-button>
|
||||
<!--<a-button @click="printPage(true)">新窗口分页打印</a-button>-->
|
||||
<a-button @click="printPageAddHeader">分页打印设置页眉页脚</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
<a-card title="进阶示例" :bordered="false">
|
||||
<a-space>
|
||||
<a-button @click="printDataTable">打印数据表格</a-button>
|
||||
<a-tooltip title="对于复杂的打印需求，可以后端生成pdf给前端打印">
|
||||
<a-button @click="printPdf">打印pdf</a-button>
|
||||
</a-tooltip>
|
||||
<a-button @click="printQrCode">打印条码</a-button>
|
||||
<a-button @click="printTable">打印自定义表格</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import printer from 'ele-admin-pro/packages/printer.js';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionPrinter',
|
||||
data() {
|
||||
return {
|
||||
users: [
|
||||
{
|
||||
key: 1,
|
||||
username: '张小三',
|
||||
amount: 18,
|
||||
province: '浙江',
|
||||
city: '杭州',
|
||||
zone: '西湖区',
|
||||
street: '西溪街道',
|
||||
address: '西溪花园30栋1单元',
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
username: '李小四',
|
||||
amount: 39,
|
||||
province: '江苏',
|
||||
city: '苏州',
|
||||
zone: '姑苏区',
|
||||
street: '丝绸路',
|
||||
address: '天墅之城9幢2单元',
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
username: '王小五',
|
||||
amount: 8,
|
||||
province: '江西',
|
||||
city: '南昌',
|
||||
zone: '青山湖区',
|
||||
street: '艾溪湖办事处',
|
||||
address: '中兴和园1幢3单元',
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
username: '赵小六',
|
||||
amount: 16,
|
||||
province: '福建',
|
||||
city: '泉州',
|
||||
zone: '丰泽区',
|
||||
street: '南洋街道',
|
||||
address: '南洋村6幢1单元',
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
username: '孙小七',
|
||||
amount: 12,
|
||||
province: '湖北',
|
||||
city: '武汉',
|
||||
zone: '武昌区',
|
||||
street: '武昌大道',
|
||||
address: '两湖花园16幢2单元',
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
username: '周小八',
|
||||
amount: 11,
|
||||
province: '安徽',
|
||||
city: '黄山',
|
||||
zone: '黄山区',
|
||||
street: '汤口镇',
|
||||
address: '温泉村21号',
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 打印当前页面 */
|
||||
print(options) {
|
||||
printer.print(options);
|
||||
},
|
||||
/* 打印任意内容 */
|
||||
printHtml(blank) {
|
||||
printer.printHtml({
|
||||
html: '<h1>Hello! Welcome To EleAdminPro!</h1>',
|
||||
blank: blank
|
||||
});
|
||||
},
|
||||
/* 打印设置页眉页脚 */
|
||||
printAddHeader() {
|
||||
printer.printHtml({
|
||||
html: `
|
||||
<div style="padding: 0 60px;">
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
</div>
|
||||
`,
|
||||
margin: 0,
|
||||
header: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px 25px;">
|
||||
<span style="float: left;">我是页眉左侧</span>
|
||||
<span>我是页眉</span>
|
||||
<span style="float: right;">我是页眉右侧</span>
|
||||
</div>`,
|
||||
footer: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px 25px;">
|
||||
<span style="float: left;">我是页脚左侧</span>
|
||||
<span>我是页脚</span>
|
||||
<span style="float: right;">我是页脚右侧</span>
|
||||
</div>`
|
||||
});
|
||||
},
|
||||
/* 打印图片 */
|
||||
printImage() {
|
||||
printer.printHtml({
|
||||
html: '<img src="https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg" style="width: 100%;"/>'
|
||||
});
|
||||
},
|
||||
/* 分页打印 */
|
||||
printPage(blank) {
|
||||
printer.printPage({
|
||||
htmls: [
|
||||
'<div>我是第一页</div>',
|
||||
'<div>我是第二页</div>',
|
||||
'<div>我是第三页</div>',
|
||||
'<div>我是第四页</div>',
|
||||
'<div>我是第五页</div>'
|
||||
],
|
||||
style: '<style>div{color: red;}</style>',
|
||||
blank: blank
|
||||
});
|
||||
},
|
||||
/* 分页打印设置页眉页脚 */
|
||||
printPageAddHeader() {
|
||||
printer.printPage({
|
||||
htmls: [
|
||||
'<span class="ele-printer-num">1/5</span><div>我是第一页</div>',
|
||||
'<span class="ele-printer-num">2/5</span><div>我是第二页</div>',
|
||||
'<span class="ele-printer-num">3/5</span><div>我是第三页</div>',
|
||||
'<span class="ele-printer-num">4/5</span><div>我是第四页</div>',
|
||||
'<span class="ele-printer-num">5/5</span><div>我是第五页</div>'
|
||||
],
|
||||
margin: 0,
|
||||
padding: '30px 60px',
|
||||
header: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px;">
|
||||
<span style="float: left;">我是页眉左侧</span>
|
||||
<span>我是页眉</span>
|
||||
<span style="float: right;">我是页眉右侧</span>
|
||||
</div>`,
|
||||
footer: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px;">
|
||||
<span style="float: left;">我是页脚左侧</span>
|
||||
<span>我是页脚</span>
|
||||
<span style="float: right;">我是页脚右侧</span>
|
||||
</div>`,
|
||||
style: `
|
||||
<style>
|
||||
.ele-printer-page-item > div { color: red; }
|
||||
.ele-printer-num {
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>`
|
||||
});
|
||||
},
|
||||
/* 打印数据表格 */
|
||||
printDataTable() {
|
||||
let html = printer.makeTable(this.users, [
|
||||
[
|
||||
{field: 'username', width: 150, rowspan: 2, title: '联系人'},
|
||||
{align: 'center', colspan: 3, title: '地址'},
|
||||
{field: 'amount', width: 120, rowspan: 2, title: '金额', align: 'center'}
|
||||
],
|
||||
[
|
||||
{field: 'province', width: 120, title: '省'},
|
||||
{field: 'city', width: 120, title: '市'},
|
||||
{
|
||||
width: 200, title: '区', templet: (d) => {
|
||||
return `<span style="color:red;">${d.zone}</span>`;
|
||||
}
|
||||
}
|
||||
]
|
||||
]);
|
||||
printer.printHtml({html: '<p>提供数据和cols配置自动生成复杂表格，非常的方便</p>' + html});
|
||||
},
|
||||
/* 打印pdf */
|
||||
printPdf() {
|
||||
printer.printPdf({url: 'https://cdn.eleadmin.com/20200610/20200708224450.pdf'});
|
||||
},
|
||||
/* 打印条码 */
|
||||
printQrCode() {
|
||||
let html = `
|
||||
<div class="code-group">
|
||||
<div class="code-group-title">EasyWeb授权凭证</div>
|
||||
<div class="code-group-body">
|
||||
<p>手机扫描右侧二维码，或登录</p>
|
||||
<p>网站https://easyweb.vip</p>
|
||||
<p>查询产品真伪</p>
|
||||
<img src="https://cdn.eleadmin.com/20200610/20200708230820.png" width="70px" height="70px"/>
|
||||
<span>515AE3X1</span>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.code-group {
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.code-group-title {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.code-group-body {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 15px 115px 0 25px;
|
||||
min-height: 90px;
|
||||
}
|
||||
.code-group-body > p {
|
||||
margin: 0 0 13px 0;
|
||||
font-size: 15px;
|
||||
font-family: 幼圆;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
.code-group-body > img, .code-group-body > span {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 15px;
|
||||
}
|
||||
.code-group-body > span {
|
||||
top: 90px;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
printer.printHtml({html: html});
|
||||
},
|
||||
/* 打印自定义表格 */
|
||||
printTable() {
|
||||
let html = `
|
||||
<h2 style="text-align: center;color: #333;">软工xxxx班课程表</h2>
|
||||
<table class="ele-printer-table">
|
||||
<colgroup>
|
||||
<col width="130px"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th style="position: relative;">
|
||||
<span style="position: absolute;right: 20px;top: 10px;line-height: normal;">星期</span>
|
||||
<span style="position: absolute;left: 20px;bottom: 10px;line-height: normal;">时间</span>
|
||||
<div style="height: 1px; width:140px;background-color: #000;position: absolute;left: 0;top: 0;transform: rotate(21deg);transform-origin: 0 0;"></div>
|
||||
</th>
|
||||
<th>周一</th>
|
||||
<th>周二</th>
|
||||
<th>周三</th>
|
||||
<th>周四</th>
|
||||
<th>周五</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8:00-10:00</td>
|
||||
<td>HTML5网页设计<br/>曲丽丽 - 441教室</td>
|
||||
<td>数据库原理及应用<br/>严良 - 716机房</td>
|
||||
<td>JavaSE初级程序设计<br/>肖萧 - 715机房</td>
|
||||
<td></td>
|
||||
<td>JavaScript程序设计<br/>董娜 - 733机房</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10:30-12:30</td>
|
||||
<td></td>
|
||||
<td>JavaScript程序设计<br/>董娜 - 733机房</td>
|
||||
<td></td>
|
||||
<td>锋利的jQuery<br/>程咏 - 303教室</td>
|
||||
<td>JavaEE应用开发<br/>周星 - 303教室</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6" style="height: auto;">午休</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13:30-15:30</td>
|
||||
<td>JavaSE初级程序设计<br/>肖萧 - 715机房</td>
|
||||
<td></td>
|
||||
<td>HTML5网页设计<br/>曲丽丽 - 441教室</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16:00-18:00</td>
|
||||
<td></td>
|
||||
<td>JavaEE应用开发<br/>周星 - 303教室</td>
|
||||
<td></td>
|
||||
<td>数据库原理及应用<br/>严良 - 716机房</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<style>
|
||||
th, td {
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
td {
|
||||
height: 110px;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
printer.printHtml({html: html, horizontal: true});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-space {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ant-space .ant-btn {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
401
src/views/form/advanced.vue
Normal file
401
src/views/form/advanced.vue
Normal file
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<a-page-header :ghost="false" title="复杂表单">
|
||||
<div class="ele-text-secondary">复杂表单常见于一次性输入和提交大批量数据的场景。</div>
|
||||
</a-page-header>
|
||||
<div class="ele-body ele-body-card" style="padding-bottom: 48px;">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-card :bordered="false" title="仓库信息">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库名:" name="name">
|
||||
<a-input
|
||||
v-model:value="form.name"
|
||||
placeholder="请输入仓库名"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库域名:" name="url">
|
||||
<a-input
|
||||
v-model:value="form.url"
|
||||
placeholder="请输入"
|
||||
allow-clear
|
||||
addon-before="http://"
|
||||
addon-after=".com"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库管理员:" name="administrator">
|
||||
<a-select
|
||||
v-model:value="form.administrator"
|
||||
placeholder="请选择仓库管理员"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="审批人:" name="approver">
|
||||
<a-select
|
||||
v-model:value="form.approver"
|
||||
placeholder="请选择审批人"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="生效日期:" name="datetime">
|
||||
<a-range-picker
|
||||
v-model:value="form.datetime"
|
||||
class="ele-fluid">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库类型:" name="type">
|
||||
<a-select
|
||||
v-model:value="form.type"
|
||||
placeholder="请选择仓库类型"
|
||||
allow-clear>
|
||||
<a-select-option value="private">私密</a-select-option>
|
||||
<a-select-option value="public">公开</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-card :bordered="false" title="任务信息">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="任务名:" name="task">
|
||||
<a-input
|
||||
v-model:value="form.task"
|
||||
placeholder="请输入任务名"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="任务表述:" name="description">
|
||||
<a-input
|
||||
v-model:value="form.description"
|
||||
placeholder="请输入任务表述"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="执行人:" name="executor">
|
||||
<a-select
|
||||
v-model:value="form.executor"
|
||||
placeholder="请选择执行人"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="责任人:" name="officer">
|
||||
<a-select
|
||||
v-model:value="form.officer"
|
||||
placeholder="请选择责任人"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="提醒时间:" name="reminder">
|
||||
<a-time-picker
|
||||
v-model:value="form.reminder"
|
||||
placeholder="请选择提醒时间"
|
||||
value-format="hh:mm:ss"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="任务类型:" name="taskType">
|
||||
<a-select
|
||||
v-model:value="form.taskType"
|
||||
placeholder="请选择任务类型"
|
||||
allow-clear>
|
||||
<a-select-option value="1">私密</a-select-option>
|
||||
<a-select-option value="2">公开</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-card :bordered="false" title="选择成员">
|
||||
<!-- 数据表格 -->
|
||||
<a-table
|
||||
:data-source="users"
|
||||
row-key="__index"
|
||||
size="middle"
|
||||
:pagination="false"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<a-table-column
|
||||
data-index="__index"
|
||||
align="center"
|
||||
:width="58"/>
|
||||
<a-table-column
|
||||
title="用户名"
|
||||
data-index="name">
|
||||
<template #default="{text,index}">
|
||||
<a-input
|
||||
v-if="index===editIndex"
|
||||
v-model:value="editRow.name"
|
||||
placeholder="请输入用户名"/>
|
||||
<span v-else>{{ text }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="工号"
|
||||
data-index="number">
|
||||
<template #default="{text,index}">
|
||||
<a-input
|
||||
v-if="index===editIndex"
|
||||
v-model:value="editRow.number"
|
||||
placeholder="请输入工号"/>
|
||||
<span v-else>{{ text }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="所属部门"
|
||||
data-index="department">
|
||||
<template #default="{text,index}">
|
||||
<a-select
|
||||
v-if="index===editIndex"
|
||||
v-model:value="editRow.department"
|
||||
placeholder="请选择部门">
|
||||
<a-select-option value="研发部">研发部</a-select-option>
|
||||
<a-select-option value="测试部">测试部</a-select-option>
|
||||
<a-select-option value="产品部">产品部</a-select-option>
|
||||
</a-select>
|
||||
<span v-else>{{ text }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="操作"
|
||||
key="action"
|
||||
align="center"
|
||||
:width="160">
|
||||
<template #default="{index,record}">
|
||||
<a-space v-if="index===editIndex">
|
||||
<a @click="onSave(record, index)">保存</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="onCancel(record, index)">取消</a>
|
||||
</a-space>
|
||||
<a-space v-else>
|
||||
<a @click="onEdit(record, index)">修改</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm
|
||||
title="确定要删除此用户吗？"
|
||||
@confirm="onRemove(record,index)">
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
<a-button
|
||||
block
|
||||
type="dashed"
|
||||
style="margin-top: 16px;"
|
||||
@click="addRow">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>新增成员</span>
|
||||
</a-button>
|
||||
</a-card>
|
||||
<!-- 底部工具栏 -->
|
||||
<div class="ele-bottom-tool">
|
||||
<div v-if="validMsg" class="ele-text-danger">
|
||||
<close-circle-outlined/>
|
||||
<span>{{ validMsg }}</span>
|
||||
</div>
|
||||
<div class="ele-bottom-tool-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit">提交
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
CalendarOutlined,
|
||||
PlusOutlined,
|
||||
CloseCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'FormAdvanced',
|
||||
components: {
|
||||
CalendarOutlined,
|
||||
PlusOutlined,
|
||||
CloseCircleOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单数据
|
||||
form: {
|
||||
name: '',
|
||||
url: '',
|
||||
datetime: [],
|
||||
task: '',
|
||||
description: '',
|
||||
reminder: ''
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入仓库名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
url: [
|
||||
{required: true, message: '请输入仓库域名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
administrator: [
|
||||
{required: true, message: '请选择仓库管理员', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
approver: [
|
||||
{required: true, message: '请选择审批人', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
datetime: [
|
||||
{required: true, message: '请选择生效日期', type: 'array', trigger: 'blur'}
|
||||
],
|
||||
type: [
|
||||
{required: true, message: '请选择仓库类型', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
task: [
|
||||
{required: true, message: '请输入任务名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
description: [
|
||||
{required: true, message: '请输入任务表述', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
executor: [
|
||||
{required: true, message: '请选择执行人', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
officer: [
|
||||
{required: true, message: '请选择责任人', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
reminder: [
|
||||
{required: true, message: '请选择提醒时间', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
taskType: [
|
||||
{required: true, message: '请选择任务类型', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 用户列表
|
||||
users: [
|
||||
{__index: 1, name: 'John Brown', number: '00001', department: '研发部'},
|
||||
{__index: 2, name: 'Jim Green', number: '00002', department: '产品部'},
|
||||
{__index: 3, name: 'Joe Black', number: '00003', department: '产品部'}
|
||||
],
|
||||
// 表单验证失败提示信息
|
||||
validMsg: '',
|
||||
// 表格编辑行索引
|
||||
editIndex: null,
|
||||
// 表格编辑行数据
|
||||
editRow: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 表单提交 */
|
||||
submit() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.validMsg = '';
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.$message.success('提交成功');
|
||||
}, 1500);
|
||||
}).catch((e) => {
|
||||
this.validMsg = ` 共有 ${e.errorFields.length} 项校验不通过`;
|
||||
});
|
||||
},
|
||||
/* 添加一行 */
|
||||
addRow() {
|
||||
if (this.users.length && this.users[this.users.length - 1].__is_add) {
|
||||
return;
|
||||
}
|
||||
this.editRow = {
|
||||
__is_add: true, // 此字段标识为添加状态
|
||||
__index: this.users.length + 1 // 此字段标识索引
|
||||
};
|
||||
this.editIndex = this.users.length;
|
||||
this.users.push(this.editRow);
|
||||
},
|
||||
/* 修改行 */
|
||||
onEdit(row, index) {
|
||||
if (this.users.length && this.users[this.users.length - 1].__is_add) {
|
||||
return;
|
||||
}
|
||||
this.editIndex = index;
|
||||
this.editRow = Object.assign({}, row);
|
||||
},
|
||||
/* 删除行 */
|
||||
onRemove(row, index) {
|
||||
this.users[this.editIndex].__is_add = false;
|
||||
this.users.splice(index, 1); // 删除数据
|
||||
// 重置__index
|
||||
this.users = this.users.map((d, index) => {
|
||||
return Object.assign({}, d, {
|
||||
__index: index + 1
|
||||
});
|
||||
})
|
||||
// 如果需要请求接口删除可以在这里写
|
||||
},
|
||||
/* 保存编辑 */
|
||||
onSave(row, index) {
|
||||
if (!this.editRow.name) {
|
||||
this.$message.error('请输入用户');
|
||||
return;
|
||||
}
|
||||
if (!this.editRow.number) {
|
||||
this.$message.error('请输入工号');
|
||||
return;
|
||||
}
|
||||
if (!this.editRow.department) {
|
||||
this.$message.error('请选择部门');
|
||||
return;
|
||||
}
|
||||
this.users[index] = Object.assign({}, this.editRow, {
|
||||
__is_add: null
|
||||
});
|
||||
this.editIndex = null;
|
||||
this.editRow = {};
|
||||
// 如果需要请求接口保存可以在这里写
|
||||
},
|
||||
/* 取消编辑 */
|
||||
onCancel(row, index) {
|
||||
if (row.__is_add) {
|
||||
this.users.splice(index, 1);
|
||||
}
|
||||
this.editIndex = null;
|
||||
this.editRow = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
185
src/views/form/basic.vue
Normal file
185
src/views/form/basic.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<a-page-header :ghost="false" title="基础表单">
|
||||
<div class="ele-text-secondary">表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。</div>
|
||||
</a-page-header>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
style="max-width: 800px;margin: 0 auto;"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-form-item label="标题:" name="title">
|
||||
<a-input
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入标题"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="起止日期:" name="datetime">
|
||||
<a-range-picker
|
||||
v-model:value="form.datetime"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
<a-form-item label="目标描述:" name="goal">
|
||||
<a-textarea
|
||||
v-model:value="form.goal"
|
||||
placeholder="请输入目标描述"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="衡量标准:" name="standard">
|
||||
<a-textarea
|
||||
v-model:value="form.standard"
|
||||
placeholder="请输入衡量标准"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="地点:" name="address">
|
||||
<a-select
|
||||
v-model:value="form.address"
|
||||
placeholder="请选择地点"
|
||||
allow-clear>
|
||||
<a-select-option value="1">地点一</a-select-option>
|
||||
<a-select-option value="2">地点二</a-select-option>
|
||||
<a-select-option value="3">地点三</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="邀评人:">
|
||||
<a-select
|
||||
v-model:value="form.invites"
|
||||
placeholder="请选择邀评人"
|
||||
mode="multiple"
|
||||
allow-clear>
|
||||
<a-select-option
|
||||
v-for="item in users"
|
||||
:key="item.id"
|
||||
:value="item.id">{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="权重:">
|
||||
<a-space>
|
||||
<a-input-number
|
||||
v-model:value="form.weight"
|
||||
:min="0"
|
||||
:max="100"/>
|
||||
<span>%</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="目标公开:">
|
||||
<a-radio-group
|
||||
v-model:value="form.publicType"
|
||||
name="publicType">
|
||||
<a-radio :value="1">公开</a-radio>
|
||||
<a-radio :value="2">部分公开</a-radio>
|
||||
<a-radio :value="3">不公开</a-radio>
|
||||
</a-radio-group>
|
||||
<div style="margin-top: 12px;">
|
||||
<a-input
|
||||
v-if="form.publicType===2"
|
||||
placeholder="公开给"/>
|
||||
</div>
|
||||
<div class="ele-text-secondary" style="margin-top: 12px;">客户、邀评人默认被分享</div>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{md: {offset: 6}}">
|
||||
<a-space size="middle">
|
||||
<a-button @click="closePage">关闭</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="submit"
|
||||
:loading="loading">提交
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CalendarOutlined} from '@ant-design/icons-vue';
|
||||
import {finishPageTab} from '@/utils/page-tab-util';
|
||||
|
||||
export default {
|
||||
name: 'FormBasic',
|
||||
components: {CalendarOutlined},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单数据
|
||||
form: {
|
||||
title: '',
|
||||
datetime: [],
|
||||
goal: '',
|
||||
standard: '',
|
||||
invites: [],
|
||||
weight: 0,
|
||||
publicType: 1
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, message: '请输入标题', trigger: 'blur'}
|
||||
],
|
||||
datetime: [
|
||||
{required: true, message: '请选择起止日期', type: 'array', trigger: 'blur'}
|
||||
],
|
||||
goal: [
|
||||
{required: true, message: '请输入目标描述', trigger: 'blur'}
|
||||
],
|
||||
standard: [
|
||||
{required: true, message: '请输入衡量标准', trigger: 'blur'}
|
||||
],
|
||||
address: [
|
||||
{required: true, message: '请选择地点', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 邀评人下拉列表数据
|
||||
users: [
|
||||
{id: 1, name: 'SunSmile'},
|
||||
{id: 2, name: '你的名字很好听'},
|
||||
{id: 3, name: '全村人的希望'},
|
||||
{id: 4, name: 'Jasmine'},
|
||||
{id: 5, name: '酷酷的大叔'}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 提交 */
|
||||
submit() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
// 重置表单
|
||||
this.form = {
|
||||
title: '',
|
||||
datetime: [],
|
||||
goal: '',
|
||||
standard: '',
|
||||
address: '',
|
||||
invites: [],
|
||||
weight: 0,
|
||||
publicType: 1
|
||||
};
|
||||
this.$message.success('提交成功');
|
||||
}, 1500);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 关闭当前页面 */
|
||||
closePage() {
|
||||
finishPageTab();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
228
src/views/form/step.vue
Normal file
228
src/views/form/step.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<a-page-header :ghost="false" title="分步表单">
|
||||
<div class="ele-text-secondary">将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。</div>
|
||||
</a-page-header>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<div style="max-width: 800px;margin: 0 auto;">
|
||||
<a-steps :current="active" style="margin: 10px 0 30px 0;">
|
||||
<a-step title="第一步" description="填写转账信息"/>
|
||||
<a-step title="第二步" description="确认转账信息"/>
|
||||
<a-step title="第三步" description="转账成功"/>
|
||||
</a-steps>
|
||||
<!-- 第一步 -->
|
||||
<a-form
|
||||
v-if="active===0"
|
||||
ref="form1"
|
||||
:model="form1"
|
||||
:rules="rules1"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 16}, sm: {span: 24}}">
|
||||
<a-form-item label="付款账户:" name="account">
|
||||
<a-select
|
||||
v-model:value="form1.account"
|
||||
placeholder="请选择付款账户"
|
||||
allow-clear>
|
||||
<a-select-option value="eleadmin@eclouds.com">eleadmin@eclouds.com</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="收款账户:" name="receiver">
|
||||
<a-input
|
||||
v-model:value="form1.receiver"
|
||||
placeholder="请输入收款账户"
|
||||
allow-clear>
|
||||
<template #addonBefore>
|
||||
<a-select
|
||||
v-model:value="form1.pay"
|
||||
style="width: 100px;margin: -5px -12px;">
|
||||
<a-select-option value="alipay">支付宝</a-select-option>
|
||||
<a-select-option value="wxpay">微信</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="收款人姓名:" name="name">
|
||||
<a-input
|
||||
v-model:value="form1.name"
|
||||
placeholder="请输入收款人姓名"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="转账金额:" name="amount">
|
||||
<a-input
|
||||
v-model:value.number="form1.amount"
|
||||
placeholder="请输入转账金额"
|
||||
prefix="￥"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{sm: {offset: 6}}">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="submit1"
|
||||
:loading="loading1">下一步
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- 第二步 -->
|
||||
<a-form
|
||||
v-if="active===1"
|
||||
ref="form2"
|
||||
:model="form2"
|
||||
:rules="rules2"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 16}, sm: {span: 24}}"
|
||||
class="ele-form-detail">
|
||||
<a-alert
|
||||
message="确认转账后，资金将直接打入对方账户，无法退回。"
|
||||
type="info"
|
||||
show-icon
|
||||
closable/>
|
||||
<a-form-item
|
||||
label="付款账户:"
|
||||
style="margin-top: 24px;">{{ form1.account }}
|
||||
</a-form-item>
|
||||
<a-form-item label="收款账户:">{{ form1.receiver }}</a-form-item>
|
||||
<a-form-item label="收款人姓名:">{{ form1.name }}</a-form-item>
|
||||
<a-form-item label="转账金额:">
|
||||
<span style="font-size: 24px;line-height: 1;">{{ form1.amount }}</span> 元
|
||||
</a-form-item>
|
||||
<a-divider style="margin: 20px 0 30px 0;"/>
|
||||
<a-form-item label="支付密码:" name="password">
|
||||
<a-input-password
|
||||
v-model:value="form2.password"
|
||||
placeholder="请输入支付密码"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:wrapper-col="{sm: {offset: 6}}"
|
||||
style="margin-top: 24px;">
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="submit2"
|
||||
:loading="loading2">下一步
|
||||
</a-button>
|
||||
<a-button @click="active=0">上一步</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- 第三步 -->
|
||||
<div v-if="active===2">
|
||||
<a-result
|
||||
status="success"
|
||||
title="操作成功"
|
||||
sub-title="预计两小时内到账">
|
||||
<a-form
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 16}, sm: {span: 24}}"
|
||||
class="ele-form-detail">
|
||||
<a-form-item label="付款账户:">{{ form1.account }}</a-form-item>
|
||||
<a-form-item label="收款账户:">{{ form1.receiver }}</a-form-item>
|
||||
<a-form-item label="收款人姓名:">{{ form1.name }}</a-form-item>
|
||||
<a-form-item label="转账金额:">
|
||||
<span style="font-size: 24px;line-height: 1;">{{ form1.amount }}</span> 元
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #extra>
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="active=0">再转一笔
|
||||
</a-button>
|
||||
<a-button>查看账单</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="active===0">
|
||||
<a-divider style="margin: 35px 0 25px 0;"/>
|
||||
<a-alert type="info">
|
||||
<template #description>
|
||||
<h6 style="margin: 5px 0 15px 0;">说明</h6>
|
||||
<h6 style="margin-bottom: 10px;">转账到支付宝</h6>
|
||||
<p style="margin-bottom: 15px;">如果需要，这里可以放一些关于产品的常见问题说明。如果需要，
|
||||
这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
|
||||
<h6 style="margin-bottom: 10px;">转账到微信</h6>
|
||||
<p style="margin-bottom: 15px;">如果需要，这里可以放一些关于产品的常见问题说明。如果需要，
|
||||
这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
|
||||
</template>
|
||||
</a-alert>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormStep',
|
||||
data() {
|
||||
return {
|
||||
// 选中步骤
|
||||
active: 0,
|
||||
// 表单一数据
|
||||
form1: {
|
||||
account: 'eleadmin@eclouds.com',
|
||||
receiver: 'test@example.com',
|
||||
pay: 'alipay',
|
||||
name: 'Alex',
|
||||
amount: 500
|
||||
},
|
||||
// 表单一验证规则
|
||||
rules1: {
|
||||
account: [
|
||||
{required: true, message: '请选择付款账户', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
receiver: [
|
||||
{required: true, message: '请输入收款账户', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
name: [
|
||||
{required: true, message: '请输入收款人姓名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
amount: [
|
||||
{required: true, message: '请输入合法金额数字', type: 'number', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 步骤一提交状态
|
||||
loading1: false,
|
||||
// 表单二数据
|
||||
form2: {
|
||||
password: '123456',
|
||||
},
|
||||
// 表单二验证规则
|
||||
rules2: {
|
||||
password: [
|
||||
{required: true, message: '请输入支付密码', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 步骤二提交状态
|
||||
loading2: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 步骤一提交 */
|
||||
submit1() {
|
||||
this.$refs.form1.validate().then(() => {
|
||||
this.loading1 = true;
|
||||
setTimeout(() => {
|
||||
this.loading1 = false;
|
||||
this.active = 1;
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 步骤二提交 */
|
||||
submit2() {
|
||||
this.$refs.form2.validate().then(() => {
|
||||
this.loading2 = true;
|
||||
setTimeout(() => {
|
||||
this.loading2 = false;
|
||||
this.active = 2;
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
417
src/views/list/advanced.vue
Normal file
417
src/views/list/advanced.vue
Normal file
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card :bordered="false">
|
||||
<a-row>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<div class="ele-text-center">
|
||||
<div style="margin-bottom: 8px;">进行中的任务</div>
|
||||
<h2>10 个任务</h2>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<div class="ele-text-center">
|
||||
<div style="margin-bottom: 8px;">剩余任务</div>
|
||||
<h2>3 个任务</h2>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<div class="ele-text-center">
|
||||
<div style="margin-bottom: 8px;">任务总耗时</div>
|
||||
<h2>120 个小时</h2>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-card :bordered="false">
|
||||
<!-- 头部工具栏 -->
|
||||
<div class="ele-table-tool">
|
||||
<h6 class="ele-table-tool-title">复杂列表</h6>
|
||||
<a-space size="middle">
|
||||
<a-radio-group
|
||||
v-model:value="search.state"
|
||||
@change="query">
|
||||
<a-radio-button value="0">全部</a-radio-button>
|
||||
<a-radio-button value="1">进行中</a-radio-button>
|
||||
<a-radio-button value="2">已完成</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-input-search
|
||||
v-model:value="search.keyword"
|
||||
placeholder="请输入"
|
||||
style="width: 200px"
|
||||
@search="query">
|
||||
<template #enterButton>
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<search-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
</a-input-search>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
type="dashed"
|
||||
@click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>添加</span>
|
||||
</a-button>
|
||||
<!-- 数据列表 -->
|
||||
<a-spin :spinning="loading">
|
||||
<div v-for="(item,index) in data" :key="index">
|
||||
<div class="basic-list-item">
|
||||
<div class="ele-cell">
|
||||
<a-avatar
|
||||
shape="square"
|
||||
:size="60"
|
||||
:src="item.cover"/>
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-title">{{ item.title }}</div>
|
||||
<div class="ele-cell-desc">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="basic-list-item-owner">
|
||||
<div>发布人</div>
|
||||
<div class="ele-text-secondary">{{ item.user }}</div>
|
||||
</div>
|
||||
<div class="basic-list-item-time">
|
||||
<div>开始时间</div>
|
||||
<div class="ele-text-secondary">{{ item.time }}</div>
|
||||
</div>
|
||||
<div class="basic-list-item-progress">
|
||||
<a-progress
|
||||
:percent="item.progress"
|
||||
:status="item.status"/>
|
||||
</div>
|
||||
<div class="basic-list-item-tool">
|
||||
<a-space>
|
||||
<a @click="openEdit(item)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a>
|
||||
<span>更多<down-outlined class="ele-text-small"/></span>
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu @click="(obj) => dropClick(obj.key, item)">
|
||||
<a-menu-item key="share">分享</a-menu-item>
|
||||
<a-menu-item key="remove">删除</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider/>
|
||||
</div>
|
||||
<div class="ele-text-center" style="margin-top: 18px;">
|
||||
<a-pagination
|
||||
v-model:current="page.page"
|
||||
:total="count"
|
||||
show-quick-jumper
|
||||
@change="query"/>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="460"
|
||||
v-model:visible="showEdit"
|
||||
:confirm-loading="editLoading"
|
||||
:title="form.id?'任务编辑':'任务添加'"
|
||||
:body-style="{paddingBottom: '8px'}"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="editForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 5}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 19}, sm: {span: 24}}">
|
||||
<a-form-item label="任务名称:" name="title">
|
||||
<a-input
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入任务名称"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="开始时间:" name="time">
|
||||
<a-date-picker
|
||||
v-model:value="form.time"
|
||||
placeholder="请选择开始时间"
|
||||
show-time
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="负责人:" name="user">
|
||||
<a-select
|
||||
v-model:value="form.user"
|
||||
placeholder="请选择负责人"
|
||||
allow-clear>
|
||||
<a-select-option value="SunSmile">SunSmile</a-select-option>
|
||||
<a-select-option value="Pojin">Pojin</a-select-option>
|
||||
<a-select-option value="SuperWill">SuperWill</a-select-option>
|
||||
<a-select-option value="Jasmine">Jasmine</a-select-option>
|
||||
<a-select-option value="Vast">Vast</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="任务描述:">
|
||||
<a-textarea
|
||||
v-model:value="form.content"
|
||||
placeholder="请输入任务描述"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createVNode} from 'vue';
|
||||
import {
|
||||
SearchOutlined,
|
||||
PlusOutlined,
|
||||
DownOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListAdvanced',
|
||||
components: {
|
||||
SearchOutlined,
|
||||
PlusOutlined,
|
||||
DownOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 列表加载状态
|
||||
loading: false,
|
||||
// 列表数据
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'ElementUI',
|
||||
time: '2020-06-13 08:33',
|
||||
user: 'SunSmile',
|
||||
progress: 87,
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Vue.js',
|
||||
time: '2020-06-13 06:40',
|
||||
user: 'Pojin',
|
||||
progress: 100,
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Vuex',
|
||||
time: '2020-06-13 04:40',
|
||||
user: 'SuperWill',
|
||||
progress: 75,
|
||||
content: 'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Vue Router',
|
||||
time: '2020-06-13 02:40',
|
||||
user: 'Jasmine',
|
||||
progress: 65,
|
||||
content: 'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Sass',
|
||||
time: '2020-06-13 00:40',
|
||||
user: 'Vast',
|
||||
progress: 45,
|
||||
status: 'exception',
|
||||
content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
}
|
||||
],
|
||||
// 搜索表单
|
||||
search: {
|
||||
state: '0',
|
||||
keyword: ''
|
||||
},
|
||||
// 分页参数
|
||||
page: {
|
||||
page: 1,
|
||||
limit: 5
|
||||
},
|
||||
// 数据总数
|
||||
count: 100,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 编辑弹窗数据
|
||||
form: {},
|
||||
// 编辑弹窗表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, message: '请输入任务名称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
time: [
|
||||
{required: true, message: '请选择开始时间', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
user: [
|
||||
{required: true, message: '请选择负责人', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 编辑表单提交状态
|
||||
editLoading: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 查询数据 */
|
||||
query() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 300);
|
||||
},
|
||||
/* 显示编辑弹窗 */
|
||||
openEdit(row) {
|
||||
if (row) {
|
||||
this.form = Object.assign({}, row);
|
||||
} else {
|
||||
this.form = {};
|
||||
}
|
||||
this.showEdit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.editForm.clearValidate();
|
||||
});
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.editForm.validate().then(() => {
|
||||
this.editLoading = true;
|
||||
setTimeout(() => {
|
||||
this.editLoading = false;
|
||||
this.showEdit = false;
|
||||
this.$message.success('保存成功');
|
||||
if (this.form.id) { // 保存修改
|
||||
Object.assign(this.data.filter(d => d.id === this.form.id)[0], this.form);
|
||||
} else { // 保存添加
|
||||
this.data.push(Object.assign({
|
||||
id: new Date().getTime(),
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg'
|
||||
}, this.form));
|
||||
}
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 下拉菜单点击事件 */
|
||||
dropClick(command, item) {
|
||||
console.log(item);
|
||||
if (command === 'remove') { // 删除
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '确定删除该任务吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
this.$message.success('删除成功');
|
||||
}
|
||||
});
|
||||
} else if (command === 'share') {
|
||||
this.$message.success('点击了分享');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** 列表样式 */
|
||||
.basic-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.basic-list-item .ele-cell {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-owner {
|
||||
width: 80px;
|
||||
padding: 0 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-time {
|
||||
width: 160px;
|
||||
padding: 0 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basic-list-item .ele-text-secondary {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-progress {
|
||||
width: 180px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (max-width: 992px) {
|
||||
.basic-list-item .basic-list-item-owner,
|
||||
.basic-list-item .basic-list-item-time,
|
||||
.basic-list-item .basic-list-item-progress,
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
width: auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-progress {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.basic-list-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-owner,
|
||||
.basic-list-item .basic-list-item-time,
|
||||
.basic-list-item .basic-list-item-progress,
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
width: auto;
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.basic-list-item .ele-text-secondary {
|
||||
margin-top: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-owner > div,
|
||||
.basic-list-item .basic-list-item-time > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ele-table-tool .ant-input-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-table-tool :deep(.ant-space-item) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
335
src/views/list/basic.vue
Normal file
335
src/views/list/basic.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card :bordered="false" :body-style="{paddingBottom: 0}">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form
|
||||
:model="where"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="规则名称:">
|
||||
<a-input
|
||||
v-model:value="where.name"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="状态:">
|
||||
<a-select
|
||||
v-model:value="where.state"
|
||||
placeholder="请选择"
|
||||
allow-clear>
|
||||
<a-select-option value="0">运行中</a-select-option>
|
||||
<a-select-option value="1">已上线</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="searchExpand" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="描述:">
|
||||
<a-input
|
||||
v-model:value="where.desc"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="searchExpand" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="上次调度时间:">
|
||||
<a-date-picker
|
||||
v-model:value="where.lastTime"
|
||||
placeholder="请选择"
|
||||
show-time
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="searchExpand" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="服务调用次数:">
|
||||
<a-input-number
|
||||
v-model:value="where.callTimes"
|
||||
placeholder="请输入"
|
||||
:min="0"
|
||||
:max="100"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item
|
||||
class="ele-text-right"
|
||||
:wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<a @click="searchExpand = !searchExpand">
|
||||
<span v-if="searchExpand">收起 <up-outlined class="ele-text-small"/></span>
|
||||
<span v-else>展开 <down-outlined class="ele-text-small"/></span>
|
||||
</a>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card :bordered="false">
|
||||
<a-alert
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom: 16px;">
|
||||
<template #message>
|
||||
<span>已选择 <b class="ele-text-primary">{{ choose.length }}</b> 项<em/></span>
|
||||
<span>服务调用次数总计 <b>{{ sumTimes }} 万</b><em/><em/></span>
|
||||
<a @click="clearChoose">清空</a>
|
||||
</template>
|
||||
</a-alert>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="id"
|
||||
title="基础列表"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
:where="where"
|
||||
:custom-row="customRow"
|
||||
v-model:selection="choose"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openEdit()"
|
||||
class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-dropdown :disabled="choose.length===0">
|
||||
<a-button class="ele-btn-icon">
|
||||
<span>批量操作 <down-outlined/></span>
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="onDropClick">
|
||||
<a-menu-item key="del">批量删除</a-menu-item>
|
||||
<a-menu-item key="check">批量审批</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<a-divider type="vertical"/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a @click.stop="openEdit(record)">配置</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click.stop="doRSS(record)">订阅警报</a>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #state="{ record }">
|
||||
<a-badge
|
||||
:status="['processing', 'success', 'error', 'default'][record.state]"
|
||||
:text="['运行中', '已上线', '异常', '关闭'][record.state]"/>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="showEdit"
|
||||
:title="form.id?'配置规则':'新建规则'"
|
||||
:width="520"
|
||||
:confirm-loading="loading"
|
||||
:body-style="{paddingBottom: '16px'}"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 5}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 19}, sm: {span: 24}}">
|
||||
<a-form-item label="规则名称:" name="name">
|
||||
<a-input
|
||||
v-model:value="form.name"
|
||||
placeholder="请输入规则名称"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="描述:">
|
||||
<a-textarea
|
||||
v-model:value="form.desc"
|
||||
placeholder="请输入描述"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
DownOutlined,
|
||||
UpOutlined,
|
||||
PlusOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListBasic',
|
||||
components: {
|
||||
DownOutlined,
|
||||
UpOutlined,
|
||||
PlusOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 数据接口
|
||||
url: 'https://cdn.eleadmin.com/20200610/list-demo-basic.json',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
customRender: ({index}) => `${this.$refs.table.tableIndex + index}`
|
||||
},
|
||||
{
|
||||
title: '规则名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'desc',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callTimes',
|
||||
customRender: ({text}) => `${text} 万`,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
sorter: true,
|
||||
slots: {customRender: 'state'},
|
||||
filters: [
|
||||
{
|
||||
text: '运行中',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
text: '已上线',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
text: '异常',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
text: '关闭',
|
||||
value: '3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '上次调度时间',
|
||||
dataIndex: 'lastTime',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
choose: [],
|
||||
// 表格搜索条件
|
||||
where: {},
|
||||
// 编辑弹窗数据
|
||||
form: {},
|
||||
// 编辑弹窗表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入规则名称', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 编辑表单提交状态
|
||||
loading: false,
|
||||
// 搜索表单是否展开
|
||||
searchExpand: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 计算服务总调用次数
|
||||
sumTimes() {
|
||||
let sum = 0;
|
||||
this.choose.forEach(d => sum += d.callTimes);
|
||||
return sum;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 设置行属性 */
|
||||
customRow(record) {
|
||||
return {
|
||||
onClick: () => {
|
||||
const index = this.choose.findIndex(d => d.id === record.id);
|
||||
if (index === -1) {
|
||||
this.choose = this.choose.concat([record]);
|
||||
} else {
|
||||
this.choose = this.choose.slice(0, index).concat(this.choose.slice(index + 1));
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({page: 1, where: this.where});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
this.reload();
|
||||
},
|
||||
/* 清空选择 */
|
||||
clearChoose() {
|
||||
this.choose = [];
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.showEdit = false;
|
||||
this.$message.success('保存成功');
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 编辑 */
|
||||
openEdit(row) {
|
||||
this.form = Object.assign({}, row);
|
||||
this.showEdit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.clearValidate();
|
||||
});
|
||||
},
|
||||
/* 订阅 */
|
||||
doRSS(row) {
|
||||
console.log(row);
|
||||
this.$message.success('订阅成功');
|
||||
},
|
||||
/* 下拉按钮点击 */
|
||||
onDropClick(obj) {
|
||||
if (obj.key === 'del') {
|
||||
this.$message.info('点击了批量删除');
|
||||
} else if (obj.key === 'check') {
|
||||
this.$message.info('点击了批量审批');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
120
src/views/list/card/application.vue
Normal file
120
src/views/list/card/application.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-for="(item, index) in data"
|
||||
:key="index"
|
||||
:lg="6"
|
||||
:md="8"
|
||||
:sm="12"
|
||||
:xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
style="margin-top: 16px;">
|
||||
<div class="ele-cell" style="margin-bottom: 16px;">
|
||||
<a-avatar size="large" :src="item.cover"/>
|
||||
<h6 class="ele-cell-content">{{ item.title }}</h6>
|
||||
</div>
|
||||
<div class="ele-elip" style="margin-bottom: 6px;">网址：{{ item.url }}</div>
|
||||
<div class="ele-elip">最后更新时间：{{ item.time }}</div>
|
||||
<template #actions>
|
||||
<a-tooltip title="下载">
|
||||
<download-outlined/>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="编辑">
|
||||
<edit-outlined/>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="分享">
|
||||
<share-alt-outlined/>
|
||||
</a-tooltip>
|
||||
<a-dropdown>
|
||||
<ellipsis-outlined/>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>1st menu item</a-menu-item>
|
||||
<a-menu-item>2nd menu item</a-menu-item>
|
||||
<a-menu-item>3rd menu item</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
DownloadOutlined,
|
||||
EditOutlined,
|
||||
ShareAltOutlined,
|
||||
EllipsisOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListCardApplication',
|
||||
components: {
|
||||
DownloadOutlined,
|
||||
EditOutlined,
|
||||
ShareAltOutlined,
|
||||
EllipsisOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
title: 'ElementUI',
|
||||
url: 'https://element.eleme.cn',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
url: 'https://cn.vuejs.org',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Vuex',
|
||||
url: 'https://vuex.vuejs.org',
|
||||
time: '12 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Vue Router',
|
||||
url: 'https://vuex.vuejs.org',
|
||||
time: '14 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Sass',
|
||||
url: 'https://www.sass.hk',
|
||||
time: '10 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Axios',
|
||||
url: 'http://www.axios-js.com',
|
||||
time: '16 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/faa0202700ee455b90fe77d8bef98bc0.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Webpack',
|
||||
url: 'https://www.webpackjs.com',
|
||||
time: '6 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/d3519518b00d42d3936b2ab5ce3a4cc3.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Node.js',
|
||||
url: 'http://nodejs.cn',
|
||||
time: '8 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/fe9196dd091e438fba115205c1003ee7.jpg'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
234
src/views/list/card/article.vue
Normal file
234
src/views/list/card/article.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<a-card :bordered="false" style="margin-top: 16px;">
|
||||
<a-image-preview-group>
|
||||
<a-list
|
||||
:data-source="data"
|
||||
:loading="loading&&page===1"
|
||||
item-layout="vertical"
|
||||
size="large">
|
||||
<template #renderItem="{item,index}">
|
||||
<a-list-item :key="index">
|
||||
<a-list-item-meta :title="item.title">
|
||||
<template #description>
|
||||
<a-tag v-for="(tag,i) in item.tags" :key="i">
|
||||
{{ tag }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<div class="ele-text-heading">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div class="ele-cell" style="margin-top: 16px;">
|
||||
<a-avatar :src="item.avatar" size="small"/>
|
||||
<div class="ele-cell-content">
|
||||
{{ item.user }} 发表于 {{ item.time }}
|
||||
</div>
|
||||
</div>
|
||||
<template #extra>
|
||||
<a-image
|
||||
:width="280"
|
||||
:src="item.cover"
|
||||
style="max-width: 100%;cursor: zoom-in;"/>
|
||||
</template>
|
||||
<template #actions>
|
||||
<span>
|
||||
<like-outlined/>
|
||||
<span><s/>{{ item.likes }}</span>
|
||||
</span>
|
||||
<span>
|
||||
<star-outlined/>
|
||||
<span><s/>{{ item.favorites }}</span>
|
||||
</span>
|
||||
<span>
|
||||
<message-outlined/>
|
||||
<span><s/>{{ item.comments }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
<template #loadMore>
|
||||
<div class="ele-text-center" style="margin-top: 20px;">
|
||||
<a-button
|
||||
v-if="page!==1"
|
||||
:loading="loading"
|
||||
@click="query">
|
||||
{{ loading ? '加载中..' : '加载更多' }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-image-preview-group>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
LikeOutlined,
|
||||
StarOutlined,
|
||||
MessageOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListCardArticle',
|
||||
components: {
|
||||
LikeOutlined,
|
||||
StarOutlined,
|
||||
MessageOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
title: 'ElementUI',
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '你的名字很好听',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vuex',
|
||||
content: 'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。',
|
||||
time: '12 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '全村人的希望',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vue Router',
|
||||
content: 'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。',
|
||||
time: '14 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Sass',
|
||||
content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
|
||||
time: '10 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Axios',
|
||||
content: 'Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。',
|
||||
time: '16 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Webpack',
|
||||
content: 'webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。',
|
||||
time: '6 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '全村人的希望',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Node.js',
|
||||
content: 'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。',
|
||||
time: '8 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
}
|
||||
],
|
||||
loading: false,
|
||||
page: 2
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
previewList() {
|
||||
return this.data.map(item => item.cover);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//this.query();
|
||||
},
|
||||
methods: {
|
||||
query() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.page++;
|
||||
this.data = this.data.concat([
|
||||
{
|
||||
title: 'ElementUI',
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '你的名字很好听',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
}
|
||||
]);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 768px) {
|
||||
.ant-list-item :deep(.ant-list-item-extra .ant-image) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/views/list/card/index.vue
Normal file
66
src/views/list/card/index.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{padding: '0 24px'}">
|
||||
<h5 style="padding: 16px 0 24px 0;">卡片列表</h5>
|
||||
<div class="ele-text-center">
|
||||
<a-input-search
|
||||
v-model:value="keyword"
|
||||
placeholder="请输入内容"
|
||||
enter-button
|
||||
style="max-width: 500px;"
|
||||
size="large"/>
|
||||
</div>
|
||||
<a-tabs
|
||||
class="list-card-tabs"
|
||||
:active-key="active"
|
||||
@tabClick="onTabChange">
|
||||
<a-tab-pane key="/list/card/project" tab="项目"/>
|
||||
<a-tab-pane key="/list/card/application" tab="应用"/>
|
||||
<a-tab-pane key="/list/card/article" tab="文章"/>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
<ele-empty-layout/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleEmptyLayout from 'ele-admin-pro/packages/ele-empty-layout';
|
||||
|
||||
export default {
|
||||
name: 'ListCard',
|
||||
components: {EleEmptyLayout},
|
||||
data() {
|
||||
return {
|
||||
keyword: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
active() {
|
||||
return this.$route.path;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 切换tab */
|
||||
onTabChange(key) {
|
||||
this.$router.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list-card-tabs {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.list-card-tabs :deep(.ant-tabs-bar) {
|
||||
margin-bottom: 0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.list-card-tabs :deep(.ant-tabs-tab) {
|
||||
padding: 12px 4px;
|
||||
}
|
||||
</style>
|
||||
228
src/views/list/card/project.vue
Normal file
228
src/views/list/card/project.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-for="(item, index) in data"
|
||||
:key="index"
|
||||
:lg="6"
|
||||
:md="8"
|
||||
:sm="12"
|
||||
:xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
style="margin-top: 16px;">
|
||||
<template #cover>
|
||||
<img :src="item.cover" alt=""/>
|
||||
</template>
|
||||
<a-card-meta :title="item.title">
|
||||
<template #description>
|
||||
<div class="project-list-desc">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content ele-text-secondary">
|
||||
{{ item.time }}
|
||||
</div>
|
||||
<ele-avatar-list :data="item.users" size="small"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ListCardProject',
|
||||
data() {
|
||||
return {
|
||||
// 分页参数
|
||||
page: {
|
||||
page: 1,
|
||||
limit: 8
|
||||
},
|
||||
// 数据总数
|
||||
count: 40,
|
||||
data: [
|
||||
{
|
||||
title: 'ElementUI',
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Vuex',
|
||||
content: 'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。',
|
||||
time: '12 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Vue Router',
|
||||
content: 'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。',
|
||||
time: '14 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Sass',
|
||||
content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
|
||||
time: '10 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Axios',
|
||||
content: 'Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。',
|
||||
time: '16 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Webpack',
|
||||
content: 'webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。',
|
||||
time: '6 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Node.js',
|
||||
content: 'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。',
|
||||
time: '8 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
query() {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.project-list-desc {
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
387
src/views/login/forget.vue
Normal file
387
src/views/login/forget.vue
Normal file
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div :class="['login-wrapper', ['', 'login-form-right', 'login-form-left'][direction]]">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
class="login-form ele-bg-white">
|
||||
<h4>忘记密码</h4>
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
placeholder="请输入绑定手机号"
|
||||
v-model:value="form.phone"
|
||||
allow-clear
|
||||
size="large">
|
||||
<template #prefix>
|
||||
<mobile-outlined/>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="password">
|
||||
<a-input-password
|
||||
placeholder="请输入新的登录密码"
|
||||
v-model:value="form.password"
|
||||
size="large">
|
||||
<template #prefix>
|
||||
<lock-outlined/>
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item name="password2">
|
||||
<a-input-password
|
||||
placeholder="请再次输入登录密码"
|
||||
v-model:value="form.password2"
|
||||
size="large">
|
||||
<template #prefix>
|
||||
<key-outlined/>
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
allow-clear
|
||||
size="large">
|
||||
<template #prefix>
|
||||
<safety-certificate-outlined/>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTimer"
|
||||
@click="showImgCodeCheck">
|
||||
<span v-if="!countdownTimer">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<router-link
|
||||
to="/login"
|
||||
class="ele-pull-right"
|
||||
style="line-height: 22px;">返回登录
|
||||
</router-link>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="doSubmit">修改密码
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="login-copyright">copyright © 2021 eleadmin.com all rights reserved.</div>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="340"
|
||||
:footer="null"
|
||||
title="发送验证码"
|
||||
v-model:visible="showImgCode">
|
||||
<div
|
||||
class="login-input-group"
|
||||
style="margin-bottom: 16px;">
|
||||
<a-input
|
||||
v-model:value="imgCode"
|
||||
placeholder="请输入图形验证码"
|
||||
allow-clear
|
||||
size="large"/>
|
||||
<a-button class="login-captcha">
|
||||
<img
|
||||
alt=""
|
||||
:src="captcha"
|
||||
@click="changeImgCode"/>
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="codeLoading"
|
||||
@click="sendCode">立即发送
|
||||
</a-button>
|
||||
</a-modal>
|
||||
<!-- 实际项目去掉这段 -->
|
||||
<div style="position: absolute;left: 30px;top: 20px;z-index: 999;">
|
||||
<a-radio-group v-model:value="direction" size="small">
|
||||
<a-radio-button :value="2">居左</a-radio-button>
|
||||
<a-radio-button :value="0">居中</a-radio-button>
|
||||
<a-radio-button :value="1">居右</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
MobileOutlined,
|
||||
LockOutlined,
|
||||
KeyOutlined,
|
||||
SafetyCertificateOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'Forget',
|
||||
components: {
|
||||
MobileOutlined,
|
||||
LockOutlined,
|
||||
KeyOutlined,
|
||||
SafetyCertificateOutlined
|
||||
},
|
||||
data() {
|
||||
let rePswRule = async (rule, value) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请再次输入新密码');
|
||||
}
|
||||
if (value === this.form.password) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject('两次输入密码不一致');
|
||||
};
|
||||
return {
|
||||
// 登录框方向, 0居中, 1居右, 2居左
|
||||
direction: 0,
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单数据
|
||||
form: {
|
||||
phone: '1234567890',
|
||||
password: '',
|
||||
password2: '',
|
||||
code: ''
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
phone: [
|
||||
{required: true, message: '请输入绑定手机号', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入新的登录密码', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
password2: [
|
||||
{required: true, validator: rePswRule, trigger: 'blur'}
|
||||
],
|
||||
code: [
|
||||
{required: true, message: '请输入验证码', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 用于刷新验证码
|
||||
v: new Date().getTime(),
|
||||
// 是否显示图形验证码弹窗
|
||||
showImgCode: false,
|
||||
// 图形验证码
|
||||
imgCode: '',
|
||||
// 发送验证码按钮loading
|
||||
codeLoading: false,
|
||||
// 验证码倒计时时间
|
||||
countdownTime: 30,
|
||||
// 验证码倒计时定时器
|
||||
countdownTimer: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 图形验证码地址
|
||||
captcha() {
|
||||
return 'https://eleadmin.com/assets/captcha?v=' + this.v;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 提交 */
|
||||
doSubmit() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.$message.success('密码修改成功');
|
||||
this.$router.push('/login');
|
||||
}, 1000);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 更换图形验证码 */
|
||||
changeImgCode() {
|
||||
// 这里演示的验证码是后端地址直接是图片的形式, 如果后端返回base64格式请参考登录页面
|
||||
this.v = new Date().getTime();
|
||||
},
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
showImgCodeCheck() {
|
||||
if (!this.form.phone) {
|
||||
this.$message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
this.imgCode = '';
|
||||
this.changeImgCode();
|
||||
this.showImgCode = true;
|
||||
},
|
||||
/* 发送短信验证码 */
|
||||
sendCode() {
|
||||
if (!this.imgCode) {
|
||||
this.$message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
this.codeLoading = true;
|
||||
setTimeout(() => {
|
||||
this.$message.success('短信验证码发送成功, 请注意查收!');
|
||||
this.showImgCode = false;
|
||||
this.codeLoading = false;
|
||||
this.startCountdownTimer();
|
||||
}, 1000);
|
||||
},
|
||||
/* 开始对按钮进行倒计时 */
|
||||
startCountdownTimer() {
|
||||
this.countdownTime = 30;
|
||||
this.countdownTimer = setInterval(() => {
|
||||
if (this.countdownTime <= 1) {
|
||||
clearInterval(this.countdownTimer);
|
||||
this.countdownTimer = null;
|
||||
}
|
||||
this.countdownTime--;
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
if (this.countdownTimer) {
|
||||
clearInterval(this.countdownTimer);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 背景 */
|
||||
.login-wrapper {
|
||||
padding: 48px 16px 0 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-image: url("~@/assets/bg-login.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.login-wrapper:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.login-form {
|
||||
width: 360px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding: 0 28px 16px 28px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.login-form-right .login-form {
|
||||
margin: 0 15% 0 auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
margin: 0 auto 0 15%;
|
||||
}
|
||||
|
||||
.login-form h4 {
|
||||
padding: 22px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-input-group :deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-input-group .login-captcha {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-input-group .login-captcha > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 第三方登录图标 */
|
||||
.login-oauth-icon {
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
margin: 0 12px;
|
||||
font-size: 18px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 底部版权 */
|
||||
.login-copyright {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
padding: 48px 0 22px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (min-height: 640px) {
|
||||
.login-wrapper {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: auto;
|
||||
right: 15%;
|
||||
transform: translateX(0);
|
||||
margin: -230px auto auto auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
right: auto;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.login-copyright {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
364
src/views/login/login.vue
Normal file
364
src/views/login/login.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div :class="['login-wrapper', ['', 'login-form-right', 'login-form-left'][direction]]">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
class="login-form ele-bg-white">
|
||||
<h4>{{ $t('login.title') }}</h4>
|
||||
<a-form-item name="username">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
v-model:value="form.username"
|
||||
:placeholder="$t('login.username')">
|
||||
<template #prefix>
|
||||
<user-outlined/>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="password">
|
||||
<a-input-password
|
||||
size="large"
|
||||
v-model:value="form.password"
|
||||
:placeholder="$t('login.password')">
|
||||
<template #prefix>
|
||||
<lock-outlined/>
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
v-model:value="form.code"
|
||||
:placeholder="$t('login.code')">
|
||||
<template #prefix>
|
||||
<safety-certificate-outlined/>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button class="login-captcha" @click="changeCode">
|
||||
<img v-if="captcha" :src="captcha" alt=""/>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-checkbox v-model:checked="form.remember">
|
||||
{{ $t('login.remember') }}
|
||||
</a-checkbox>
|
||||
<router-link
|
||||
to="/forget"
|
||||
class="ele-pull-right"
|
||||
style="line-height: 22px;">
|
||||
{{ $t('login.forget') }}
|
||||
</router-link>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="doSubmit">
|
||||
{{ loading ? $t('login.loading') : $t('login.login') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
<div class="ele-text-center" style="padding-bottom: 32px;">
|
||||
<qq-outlined class="login-oauth-icon" style="background: #3492ed;"/>
|
||||
<wechat-outlined class="login-oauth-icon" style="background: #4daf29;"/>
|
||||
<weibo-outlined class="login-oauth-icon" style="background: #CF1900;"/>
|
||||
</div>
|
||||
</a-form>
|
||||
<div class="login-copyright">copyright © 2021 eleadmin.com all rights reserved.</div>
|
||||
<!-- 多语言切换 -->
|
||||
<div style="position: absolute;right: 30px;top: 20px;z-index: 999;">
|
||||
<a-dropdown placement="bottomLeft" :overlay-style="{minWidth: '120px'}">
|
||||
<global-outlined style="font-size: 18px;color: #fff;"/>
|
||||
<template #overlay>
|
||||
<a-menu :selected-keys="languages" @click="changeLanguage">
|
||||
<a-menu-item key="en">English</a-menu-item>
|
||||
<a-menu-item key="zh_CN">简体中文</a-menu-item>
|
||||
<a-menu-item key="zh_TW">繁體中文</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<!-- 实际项目去掉这段 -->
|
||||
<div style="position: absolute;left: 30px;top: 20px;z-index: 999;">
|
||||
<a-radio-group v-model:value="direction" size="small">
|
||||
<a-radio-button :value="2">居左</a-radio-button>
|
||||
<a-radio-button :value="0">居中</a-radio-button>
|
||||
<a-radio-button :value="1">居右</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
QqOutlined,
|
||||
WechatOutlined,
|
||||
WeiboOutlined,
|
||||
GlobalOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import setting from '@/config/setting';
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
QqOutlined,
|
||||
WechatOutlined,
|
||||
WeiboOutlined,
|
||||
GlobalOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 登录框方向, 0居中, 1居右, 2居左
|
||||
direction: 0,
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单数据
|
||||
form: {
|
||||
username: 'admin',
|
||||
password: 'admin',
|
||||
code: '',
|
||||
remember: true
|
||||
},
|
||||
// 验证码base64数据
|
||||
captcha: '',
|
||||
// 验证码内容, 实际项目去掉
|
||||
text: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 表单验证规则
|
||||
rules() {
|
||||
return {
|
||||
username: [
|
||||
{required: true, message: this.$t('login.username'), type: 'string', trigger: 'blur'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: this.$t('login.password'), type: 'string', trigger: 'blur'}
|
||||
],
|
||||
code: [
|
||||
{required: true, message: this.$t('login.code'), type: 'string', trigger: 'blur'}
|
||||
]
|
||||
};
|
||||
},
|
||||
// 当前语言
|
||||
languages() {
|
||||
return [this.$i18n.locale];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (setting.takeToken()) {
|
||||
return this.goHome();
|
||||
}
|
||||
this.changeCode();
|
||||
},
|
||||
methods: {
|
||||
/* 提交 */
|
||||
doSubmit() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
if (this.form.code.toLowerCase() !== this.text) {
|
||||
return this.$message.error('验证码错误');
|
||||
}
|
||||
this.loading = true;
|
||||
let formData = new FormData();
|
||||
for (let key in this.form) {
|
||||
formData.append(key, this.form[key]);
|
||||
}
|
||||
this.$http.post('/login', formData).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success('登录成功');
|
||||
this.$store.dispatch('user/setToken', {
|
||||
token: 'Bearer ' + res.data.access_token,
|
||||
remember: this.form.remember
|
||||
}).then(() => {
|
||||
this.goHome();
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 跳转到首页 */
|
||||
goHome() {
|
||||
const query = this.$route.query;
|
||||
const path = query && query.from ? query.from : '/';
|
||||
this.$router.push(path).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 更换图形验证码 */
|
||||
changeCode() {
|
||||
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
||||
this.$http.get('/file/captcha').then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.captcha = res.data.data;
|
||||
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
||||
this.text = res.data.text;
|
||||
// 自动回填验证码, 实际项目去掉这个
|
||||
this.form.code = res.data.text;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 切换语言 */
|
||||
changeLanguage({key}) {
|
||||
this.$i18n.locale = key;
|
||||
localStorage.setItem('i18n-lang', key);
|
||||
this.$refs.form.clearValidate();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 背景 */
|
||||
.login-wrapper {
|
||||
padding: 48px 16px 0 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-image: url("~@/assets/bg-login.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.login-wrapper:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.login-form {
|
||||
width: 360px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding: 0 28px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.login-form-right .login-form {
|
||||
margin: 0 15% 0 auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
margin: 0 auto 0 15%;
|
||||
}
|
||||
|
||||
.login-form h4 {
|
||||
padding: 22px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-input-group :deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-input-group .login-captcha {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-input-group .login-captcha > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 第三方登录图标 */
|
||||
.login-oauth-icon {
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
margin: 0 12px;
|
||||
font-size: 18px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 底部版权 */
|
||||
.login-copyright {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
padding: 48px 0 22px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (min-height: 640px) {
|
||||
.login-wrapper {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: auto;
|
||||
right: 15%;
|
||||
transform: translateX(0);
|
||||
margin: -230px auto auto auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
right: auto;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.login-copyright {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
55
src/views/result/fail.vue
Normal file
55
src/views/result/fail.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<div style="max-width: 960px;margin: 0 auto;">
|
||||
<a-result
|
||||
status="error"
|
||||
title="提交失败"
|
||||
sub-title="请核对并修改以下信息后，再重新提交。">
|
||||
<div>您提交的内容有如下错误：</div>
|
||||
<div class="error-tips-item">
|
||||
<close-circle-outlined class="ele-text-danger"/>
|
||||
<div>您的账户已被冻结</div>
|
||||
<a>立即解冻></a>
|
||||
</div>
|
||||
<div class="error-tips-item">
|
||||
<close-circle-outlined class="ele-text-danger"/>
|
||||
<div>您的账户还不具备申请资格</div>
|
||||
<a>立即升级></a>
|
||||
</div>
|
||||
<template #extra>
|
||||
<a-space size="middle">
|
||||
<a-button type="primary">返回修改</a-button>
|
||||
<a-button>重新提交</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CloseCircleOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ResultFail',
|
||||
components: {CloseCircleOutlined}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.error-tips-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.error-tips-item > div {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.error-tips-item a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
30
src/views/result/success.vue
Normal file
30
src/views/result/success.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<div style="max-width: 960px;margin: 0 auto;">
|
||||
<a-result
|
||||
status="success"
|
||||
title="提交成功"
|
||||
sub-title="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。灰色区域可以显示一些补充的信息。">
|
||||
<div>已提交申请，等待部门审核。</div>
|
||||
<template #extra>
|
||||
<a-space size="middle">
|
||||
<a-button type="primary">返回列表</a-button>
|
||||
<a-button>查看项目</a-button>
|
||||
<a-button>打印</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ResultSuccess'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
140
src/views/system/dictionary/index.vue
Normal file
140
src/views/system/dictionary/index.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="6" :md="10" :sm="24" :xs="24">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{padding: '24px 16px'}">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="dictId"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
v-model:current="current"
|
||||
:need-page="false"
|
||||
:row-selection="{columnWidth: 38}"
|
||||
:toolkit="[]"
|
||||
@done="done">
|
||||
<template #toolbar>
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openEdit()">新建
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openEdit(current)"
|
||||
:disabled="!current">修改
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
@click="remove"
|
||||
:disabled="!current">删除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="18" :md="14" :sm="24" :xs="24">
|
||||
<a-card :bordered="false">
|
||||
<sys-dict-data
|
||||
v-if="current"
|
||||
:dict-id="current.dictId"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<sys-dict-edit
|
||||
v-model:visible="showEdit"
|
||||
:data="editData"
|
||||
@done="reload"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createVNode} from 'vue';
|
||||
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
|
||||
import SysDictData from './sys-dict-data';
|
||||
import SysDictEdit from './sys-dict-edit';
|
||||
|
||||
export default {
|
||||
name: 'SystemDictionary',
|
||||
components: {SysDictData, SysDictEdit},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据接口
|
||||
url: '/sys/dict',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
width: 38,
|
||||
customRender: ({index}) => index + 1
|
||||
},
|
||||
{
|
||||
title: '字典名称',
|
||||
dataIndex: 'dictName'
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
current: null,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 编辑回显数据
|
||||
editData: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 表格渲染完成回调 */
|
||||
done(res) {
|
||||
if (res.data.length > 0) {
|
||||
this.current = res.data[0];
|
||||
}
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload();
|
||||
},
|
||||
/* 打开编辑弹窗 */
|
||||
openEdit(row) {
|
||||
this.editData = row;
|
||||
this.showEdit = true;
|
||||
},
|
||||
/* 删除 */
|
||||
remove() {
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的字典吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.delete('/sys/dict/' + this.current.dictId).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (min-width: 768px) {
|
||||
.ant-card {
|
||||
min-height: calc(100vh - 122px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
135
src/views/system/dictionary/sys-dict-data-edit.vue
Normal file
135
src/views/system/dictionary/sys-dict-data-edit.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<!-- 字典项编辑弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:width="460"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:body-style="{paddingBottom: '8px'}"
|
||||
:title="isUpdate?'修改字典项':'添加字典项'"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-form-item label="字典项名称:" name="dictDataName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入字典项名称"
|
||||
v-model:value="form.dictDataName"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="字典项值:" name="dictDataCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入字典项值"
|
||||
v-model:value="form.dictDataCode"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序号:" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="9999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注:">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SysDictDataEdit',
|
||||
emits: ['done', 'update:visible'],
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 修改回显的数据
|
||||
data: Object,
|
||||
// 字典id
|
||||
dictId: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单数据
|
||||
form: Object.assign({}, this.data),
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
dictDataName: [
|
||||
{required: true, message: '请输入字典项名称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
dictDataCode: [
|
||||
{required: true, message: '请输入字典项值', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
sortNumber: [
|
||||
{required: true, message: '请输入排序号', type: 'number', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
if (this.data) {
|
||||
this.form = Object.assign({}, this.data);
|
||||
this.isUpdate = true;
|
||||
} else {
|
||||
this.form = {};
|
||||
this.isUpdate = false;
|
||||
}
|
||||
if (this.$refs.form) {
|
||||
this.$refs.form.clearValidate();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
this.$http[this.isUpdate ? 'put' : 'post']('/sys/dictdata',
|
||||
Object.assign({}, this.form, {
|
||||
dictId: this.dictId
|
||||
})
|
||||
).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
if (!this.isUpdate) {
|
||||
this.form = {};
|
||||
}
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
178
src/views/system/dictionary/sys-dict-data.vue
Normal file
178
src/views/system/dictionary/sys-dict-data.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="dictDataId"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
:where="where"
|
||||
tool-class="ele-toolbar-form"
|
||||
v-model:selection="selection"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="6" :md="8" :sm="24" :xs="24">
|
||||
<a-input
|
||||
v-model:value.trim="where.keywords"
|
||||
placeholder="输入关键字搜索"
|
||||
allow-clear/>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="8" :sm="24" :xs="24">
|
||||
<a-space size="middle">
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button type="primary" @click="openEdit()">新建</a-button>
|
||||
<a-button type="primary" danger @click="removeBatch">删除</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm
|
||||
title="确定要删除此字典项吗？"
|
||||
@confirm="remove(record)">
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
<!-- 编辑弹窗 -->
|
||||
<sys-dict-data-edit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:dict-id="dictId"
|
||||
@done="reload"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createVNode} from 'vue';
|
||||
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
|
||||
import SysDictDataEdit from './sys-dict-data-edit';
|
||||
|
||||
export default {
|
||||
name: 'SysDictData',
|
||||
components: {SysDictDataEdit},
|
||||
props: {
|
||||
// 字典id
|
||||
dictId: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据接口
|
||||
url: '/sys/dictdata/page',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
title: '字典项名称',
|
||||
dataIndex: 'dictDataName',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '字典项值',
|
||||
dataIndex: 'dictDataCode',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
sorter: true,
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
customRender: ({text}) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 130,
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
where: {
|
||||
dictId: this.dictId
|
||||
},
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({page: 1, where: this.where});
|
||||
},
|
||||
/* 打开编辑弹窗 */
|
||||
openEdit(row) {
|
||||
this.current = row;
|
||||
this.showEdit = true;
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.delete('/sys/dictdata/' + row.dictDataId).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 批量删除 */
|
||||
removeBatch() {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的字典项吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.delete('/sys/dictdata/batch', {
|
||||
data: this.selection.map(d => d.dictDataId)
|
||||
}).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听字典id变化
|
||||
dictId() {
|
||||
this.where.dictId = this.dictId;
|
||||
this.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
129
src/views/system/dictionary/sys-dict-edit.vue
Normal file
129
src/views/system/dictionary/sys-dict-edit.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<!-- 字典编辑弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:width="460"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate?'修改字典':'添加字典'"
|
||||
:body-style="{paddingBottom: '8px'}"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 5}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 19}, sm: {span: 24}}">
|
||||
<a-form-item label="字典名称:" name="dictName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入字典名称"
|
||||
v-model:value="form.dictName"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="字典值:" name="dictCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入字典值"
|
||||
v-model:value="form.dictCode"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序号:" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="9999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注:">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SysDictEdit',
|
||||
emits: ['done', 'update:visible'],
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 修改回显的数据
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单数据
|
||||
form: Object.assign({}, this.data),
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
dictName: [
|
||||
{required: true, message: '请输入字典名称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
dictCode: [
|
||||
{required: true, message: '请输入字典值', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
sortNumber: [
|
||||
{required: true, message: '请输入排序号', type: 'number', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
if (this.data) {
|
||||
this.form = Object.assign({}, this.data);
|
||||
this.isUpdate = true;
|
||||
} else {
|
||||
this.form = {};
|
||||
this.isUpdate = false;
|
||||
}
|
||||
if (this.$refs.form) {
|
||||
this.$refs.form.clearValidate();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
this.$http[this.isUpdate ? 'put' : 'post']('/sys/dict', this.form).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
if (!this.isUpdate) {
|
||||
this.form = {};
|
||||
}
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
214
src/views/system/login-record/index.vue
Normal file
214
src/views/system/login-record/index.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form
|
||||
:model="where"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="用户账号:">
|
||||
<a-input
|
||||
v-model:value.trim="where.username"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="用户名:">
|
||||
<a-input
|
||||
v-model:value.trim="where.nickname"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="登录时间:">
|
||||
<a-range-picker
|
||||
v-model:value="daterange"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="id"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
:where="where"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="exportData">
|
||||
<template #icon>
|
||||
<download-outlined/>
|
||||
</template>
|
||||
<span>导出</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #operType="{ record }">
|
||||
<a-tag :color="['green', 'red', '', 'orange'][record.operType]">
|
||||
{{ ['登录成功', '登录失败', '退出登录', '刷新TOKEN'][record.operType] }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx';
|
||||
import {
|
||||
DownloadOutlined,
|
||||
CalendarOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'SystemLoginRecord',
|
||||
components: {
|
||||
DownloadOutlined,
|
||||
CalendarOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据接口
|
||||
url: '/sys/loginRecord/page',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
customRender: ({index}) => this.$refs.table.tableIndex + index
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'username',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'nickname',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'IP地址',
|
||||
dataIndex: 'ip',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '设备型号',
|
||||
dataIndex: 'device',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作系统',
|
||||
dataIndex: 'os',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '浏览器',
|
||||
dataIndex: 'browser',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'operType',
|
||||
sorter: true,
|
||||
width: 120,
|
||||
slots: {customRender: 'operType'}
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '登录时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
customRender: ({text}) => this.$util.toDateString(text)
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
where: {},
|
||||
// 日期范围选择
|
||||
daterange: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({page: 1, where: this.where});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
this.daterange = [];
|
||||
this.reload();
|
||||
},
|
||||
/* 导出数据 */
|
||||
exportData() {
|
||||
let array = [['账号', '用户名', 'IP地址', '设备型号', '操作系统', '浏览器', '操作类型', '备注', '登录时间']];
|
||||
// 请求查询全部(不分页)的接口
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.get('/sys/loginRecord/page?page=1&limit=2000').then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
res.data.data.forEach(d => {
|
||||
array.push([
|
||||
d.username,
|
||||
d.nickname,
|
||||
d.ip,
|
||||
d.device,
|
||||
d.os,
|
||||
d.browser,
|
||||
['登录成功', '登录失败', '退出登录', '刷新TOKEN'][d.operType],
|
||||
d.comments,
|
||||
this.$util.toDateString(d.createTime)
|
||||
]);
|
||||
});
|
||||
this.$util.exportSheet(XLSX, array, '登录日志');
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
daterange() {
|
||||
if (this.daterange && this.daterange.length === 2) {
|
||||
this.where.createTimeStart = this.daterange[0] + ' 00:00:00';
|
||||
this.where.createTimeEnd = this.daterange[1] + ' 23:59:59';
|
||||
} else {
|
||||
this.where.createTimeStart = null;
|
||||
this.where.createTimeEnd = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
275
src/views/system/menu/index.vue
Normal file
275
src/views/system/menu/index.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form
|
||||
:model="where"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="菜单名称:">
|
||||
<a-input
|
||||
v-model:value.trim="where.title"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="菜单地址:">
|
||||
<a-input
|
||||
v-model:value.trim="where.path"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="权限标识:">
|
||||
<a-input
|
||||
v-model:value.trim="where.authority"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="menuId"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
:where="where"
|
||||
:need-page="false"
|
||||
:parse-data="parseData"
|
||||
:expand-icon-column-index="1"
|
||||
:expanded-row-keys="expandedRowKeys"
|
||||
:scroll="{x: 'max-content'}"
|
||||
@expandedRowsChange="onExpandedRowsChange">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button @click="expandAll">展开全部</a-button>
|
||||
<a-button @click="foldAll">折叠全部</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #menuType="{ record }">
|
||||
<a-tag
|
||||
v-if="isUrl(record.path)"
|
||||
color="orange">外链
|
||||
</a-tag>
|
||||
<a-tag
|
||||
v-else-if="isUrl(record.component)"
|
||||
color="green">内链
|
||||
</a-tag>
|
||||
<a-tag
|
||||
v-else
|
||||
:color="['blue', ''][record.menuType]">
|
||||
{{ ['菜单', '按钮'][record.menuType] }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a @click="openEdit(null, record.menuId)">添加</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm @confirm="remove(record)" title="确定要删除此菜单吗？">
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<menu-edit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:menu-list="menuList"
|
||||
@done="reload"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {PlusOutlined} from '@ant-design/icons-vue';
|
||||
import MenuEdit from './menu-edit';
|
||||
|
||||
export default {
|
||||
name: 'SystemMenu',
|
||||
components: {PlusOutlined, MenuEdit},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据接口
|
||||
url: '/sys/menu',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
dataIndex: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
customRender: ({index}) => index + 1
|
||||
},
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'title',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '路由地址',
|
||||
dataIndex: 'path',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '组件路径',
|
||||
dataIndex: 'component',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '权限标识',
|
||||
dataIndex: 'authority',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '可见',
|
||||
dataIndex: 'hide',
|
||||
sorter: true,
|
||||
customRender: ({text}) => ['是', '否'][text]
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'menuType',
|
||||
sorter: true,
|
||||
slots: {customRender: 'menuType'}
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
customRender: ({text}) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
where: {},
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 表格展开的行
|
||||
expandedRowKeys: [],
|
||||
// 全部菜单数据
|
||||
menuList: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 解析接口返回数据 */
|
||||
parseData(res) {
|
||||
res.data = this.$util.toTreeData(res.data.map(d => {
|
||||
d.key = d.menuId;
|
||||
d.value = d.menuId;
|
||||
return d;
|
||||
}), 'menuId', 'parentId');
|
||||
if (!Object.keys(this.where).length) {
|
||||
this.menuList = res.data;
|
||||
}
|
||||
if (!this.expandedRowKeys.length) {
|
||||
this.expandAll();
|
||||
}
|
||||
return res;
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({where: this.where});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
this.reload();
|
||||
},
|
||||
/* 打开编辑弹窗 */
|
||||
openEdit(row, parentId) {
|
||||
this.current = Object.assign({
|
||||
menuType: 0,
|
||||
hide: 0,
|
||||
parentId: parentId
|
||||
}, row);
|
||||
this.showEdit = true;
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
if (row.children && row.children.length > 0) {
|
||||
this.$message.error('请先删除子节点');
|
||||
return;
|
||||
}
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.delete('/sys/menu/' + row.menuId).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 展开全部 */
|
||||
expandAll() {
|
||||
let keys = [];
|
||||
this.$util.eachTreeData(this.menuList, (d) => {
|
||||
if (d.children && d.children.length) {
|
||||
keys.push(d.menuId);
|
||||
}
|
||||
});
|
||||
this.expandedRowKeys = keys;
|
||||
},
|
||||
/* 折叠全部 */
|
||||
foldAll() {
|
||||
this.expandedRowKeys = [];
|
||||
},
|
||||
/* 展开的行变化 */
|
||||
onExpandedRowsChange(expandedRows) {
|
||||
this.expandedRowKeys = expandedRows;
|
||||
},
|
||||
/* 判断是否是网址 */
|
||||
isUrl(url) {
|
||||
return url && (
|
||||
url.startsWith('http://') ||
|
||||
url.startsWith('https://') ||
|
||||
url.startsWith('://'));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
263
src/views/system/menu/menu-edit.vue
Normal file
263
src/views/system/menu/menu-edit.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:width="680"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate?'修改菜单':'新建菜单'"
|
||||
:body-style="{paddingBottom: '8px'}"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 7}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 17}, sm: {span: 24}}">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="上级菜单" name="parentId">
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
:tree-data="menuList"
|
||||
tree-default-expand-all
|
||||
placeholder="请选择上级菜单"
|
||||
v-model:value="form.parentId"
|
||||
:dropdown-style="{maxHeight: '360px', overflow: 'auto'}"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="菜单名称" name="title">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入菜单名称"
|
||||
v-model:value="form.title"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="菜单类型" name="menuType">
|
||||
<a-radio-group
|
||||
v-model:value="form.menuType"
|
||||
@change="onMenuTypeChange">
|
||||
<a-radio :value="0">菜单</a-radio>
|
||||
<a-radio :value="1">按钮</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="打开方式">
|
||||
<a-radio-group
|
||||
v-model:value="form.openType"
|
||||
:disabled="form.menuType === 1"
|
||||
@change="onOpenTypeChange">
|
||||
<a-radio :value="0">组件</a-radio>
|
||||
<a-radio :value="1">内链</a-radio>
|
||||
<a-radio :value="2">外链</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div style="margin-bottom: 22px;">
|
||||
<a-divider/>
|
||||
</div>
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="菜单图标" name="icon">
|
||||
<ele-icon-picker
|
||||
v-model:value="form.icon"
|
||||
:disabled="form.menuType===1"
|
||||
placeholder="请选择菜单图标"/>
|
||||
</a-form-item>
|
||||
<a-form-item name="path">
|
||||
<template #label>
|
||||
<a-tooltip
|
||||
v-if="form.openType === 2"
|
||||
title="需要以`http://`、`https://`、`//`开头">
|
||||
<question-circle-outlined
|
||||
style="vertical-align: -2px;margin-right: 4px;"/>
|
||||
</a-tooltip>
|
||||
<span>{{ form.openType === 2 ? '外链地址' : '路由地址' }}</span>
|
||||
</template>
|
||||
<a-input
|
||||
allow-clear
|
||||
v-model:value="form.path"
|
||||
:disabled="form.menuType===1"
|
||||
:placeholder="form.openType === 2 ? '请输入外链地址' : '请输入路由地址'"/>
|
||||
</a-form-item>
|
||||
<a-form-item name="component">
|
||||
<template #label>
|
||||
<a-tooltip
|
||||
v-if="form.openType === 1"
|
||||
title="需要以`http://`、`https://`、`//`开头">
|
||||
<question-circle-outlined
|
||||
style="vertical-align: -2px;margin-right: 4px;"/>
|
||||
</a-tooltip>
|
||||
<span>{{ form.openType === 1 ? '内链地址' : '组件路径' }}</span>
|
||||
</template>
|
||||
<a-input
|
||||
allow-clear
|
||||
v-model:value="form.component"
|
||||
:disabled="form.menuType === 1 || form.openType === 2"
|
||||
:placeholder="form.openType === 1 ? '请输入内链地址' : '请输入组件路径'"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="权限标识" name="authority">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入权限标识"
|
||||
v-model:value="form.authority"
|
||||
:disabled="form.menuType === 0"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序号:" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否可见">
|
||||
<a-switch
|
||||
checked-children="是"
|
||||
un-checked-children="否"
|
||||
v-model:checked="form.isShow"
|
||||
:disabled="form.menuType === 1"/>
|
||||
<a-tooltip title="选择不可见只注册路由不显示在侧边栏，比如添加页面应该选择不可见">
|
||||
<question-circle-outlined
|
||||
style="vertical-align: -3px;margin-left: 16px;"/>
|
||||
</a-tooltip>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleIconPicker from 'ele-admin-pro/packages/ele-icon-picker';
|
||||
import {QuestionCircleOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'MenuEdit',
|
||||
components: {EleIconPicker, QuestionCircleOutlined},
|
||||
emits: [
|
||||
'done',
|
||||
'update:visible'
|
||||
],
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 修改回显的数据
|
||||
data: Object,
|
||||
// 全部菜单数据
|
||||
menuList: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单数据
|
||||
form: this.initFormData(this.data),
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, type: 'string', message: '请输入菜单名称', trigger: 'blur'}
|
||||
],
|
||||
sortNumber: [
|
||||
{required: true, type: 'number', message: '请输入排序号', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
this.isUpdate = !!(this.data && this.data.menuId);
|
||||
this.form = this.initFormData(this.data);
|
||||
if (this.$refs.form) {
|
||||
this.$refs.form.clearValidate();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
this.$http[this.isUpdate ? 'put' : 'post']('/sys/menu',
|
||||
Object.assign({}, this.form, {
|
||||
parentId: this.form.parentId || 0,
|
||||
hide: this.form.isShow ? 0 : 1
|
||||
})
|
||||
).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
},
|
||||
/* menuType选择改变 */
|
||||
onMenuTypeChange() {
|
||||
if (this.form.menuType === 0) {
|
||||
this.form.authority = '';
|
||||
} else {
|
||||
this.form.openType = 0;
|
||||
this.form.icon = '';
|
||||
this.form.path = '';
|
||||
this.form.component = '';
|
||||
this.form.hide = 0;
|
||||
this.form.isShow = true;
|
||||
}
|
||||
},
|
||||
/* openType选择改变 */
|
||||
onOpenTypeChange() {
|
||||
if (this.form.openType === 2) {
|
||||
this.form.component = '';
|
||||
}
|
||||
},
|
||||
/* 初始化form数据 */
|
||||
initFormData(data) {
|
||||
let form = {
|
||||
menuType: 0,
|
||||
openType: 0,
|
||||
hide: 0,
|
||||
isShow: true
|
||||
};
|
||||
if (data) {
|
||||
let openType = 0;
|
||||
if (this.isUrl(data.path)) {
|
||||
openType = 2;
|
||||
} else if (this.isUrl(data.component)) {
|
||||
openType = 1;
|
||||
}
|
||||
Object.assign(form, data, {
|
||||
parentId: data.parentId === 0 ? null : data.parentId,
|
||||
isShow: data.hide === 0,
|
||||
openType: openType
|
||||
});
|
||||
}
|
||||
return form;
|
||||
},
|
||||
/* 判断是否是网址 */
|
||||
isUrl(url) {
|
||||
return url && (
|
||||
url.startsWith('http://') ||
|
||||
url.startsWith('https://') ||
|
||||
url.startsWith('://'));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
243
src/views/system/oper-record/index.vue
Normal file
243
src/views/system/oper-record/index.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form
|
||||
:model="where"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="用户账号:">
|
||||
<a-input
|
||||
v-model:value.trim="where.username"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="操作模块:">
|
||||
<a-input
|
||||
v-model:value.trim="where.model"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="操作时间:">
|
||||
<a-range-picker
|
||||
v-model:value="daterange"
|
||||
:show-time="true"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
class="ele-fluid">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="id"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
:where="where"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="exportData">
|
||||
<template #icon>
|
||||
<download-outlined/>
|
||||
</template>
|
||||
<span>导出</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #state="{ record }">
|
||||
<a-tag :color="['green', 'red'][record.state]">
|
||||
{{ ['正常', '异常'][record.state] }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a @click="openDetail(record)">详情</a>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 详情弹窗 -->
|
||||
<oper-record-detail
|
||||
v-model:visible="showInfo"
|
||||
:data="current||{}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx';
|
||||
import {
|
||||
DownloadOutlined,
|
||||
CalendarOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import OperRecordDetail from './oper-record-detail';
|
||||
|
||||
export default {
|
||||
name: 'SystemOperRecord',
|
||||
components: {
|
||||
DownloadOutlined,
|
||||
CalendarOutlined,
|
||||
OperRecordDetail
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据接口
|
||||
url: '/sys/operRecord/page',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
customRender: ({index}) => this.$refs.table.tableIndex + index
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'username',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'nickname',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作模块',
|
||||
dataIndex: 'model',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作功能',
|
||||
dataIndex: 'description',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '请求地址',
|
||||
dataIndex: 'url',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '方式',
|
||||
dataIndex: 'requestMethod',
|
||||
sorter: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
sorter: true,
|
||||
width: 90,
|
||||
slots: {customRender: 'state'}
|
||||
},
|
||||
{
|
||||
title: '耗时',
|
||||
dataIndex: 'spendTime',
|
||||
sorter: true,
|
||||
width: 100,
|
||||
customRender: ({text}) => text / 1000 + 's'
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
customRender: ({text}) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 90,
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
where: {},
|
||||
// 当前选中数据
|
||||
current: null,
|
||||
// 是否显示查看弹窗
|
||||
showInfo: false,
|
||||
// 日期范围选择
|
||||
daterange: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({page: 1, where: this.where});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
this.daterange = [];
|
||||
this.reload();
|
||||
},
|
||||
/* 详情 */
|
||||
openDetail(row) {
|
||||
this.current = row;
|
||||
this.showInfo = true;
|
||||
},
|
||||
/* 导出数据 */
|
||||
exportData() {
|
||||
let array = [['账号', '用户名', '操作模块', '操作功能', '请求地址', '请求方式', '状态', '耗时', '操作时间']];
|
||||
// 请求查询全部(不分页)的接口
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.get('/sys/loginRecord/page?page=1&limit=2000').then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
res.data.data.forEach(d => {
|
||||
array.push([
|
||||
d.username,
|
||||
d.nickname,
|
||||
d.model,
|
||||
d.description,
|
||||
d.url,
|
||||
d.requestMethod,
|
||||
['正常', '异常'][d.state],
|
||||
d.spendTime,
|
||||
this.$util.toDateString(d.createTime)
|
||||
]);
|
||||
});
|
||||
this.$util.exportSheet(XLSX, array, '操作日志');
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
daterange() {
|
||||
if (this.daterange && this.daterange.length === 2) {
|
||||
this.where.createTimeStart = this.daterange[0];
|
||||
this.where.createTimeEnd = this.daterange[1];
|
||||
} else {
|
||||
this.where.createTimeStart = null;
|
||||
this.where.createTimeEnd = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
126
src/views/system/oper-record/oper-record-detail.vue
Normal file
126
src/views/system/oper-record/oper-record-detail.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<!-- 详情弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
title="详情"
|
||||
:width="640"
|
||||
:footer="null"
|
||||
:visible="visible"
|
||||
@update:visible="updateVisible">
|
||||
<a-form
|
||||
class="ele-form-detail"
|
||||
:label-col="{sm: {span: 8}, xs: {span: 6}}"
|
||||
:wrapper-col="{sm: {span: 16}, xs: {span: 18}}">
|
||||
<a-row :gutter="16">
|
||||
<a-col :sm="12" :xs="24">
|
||||
<a-form-item label="操作人:">
|
||||
<div class="ele-text-secondary">
|
||||
{{ data.nickname }}({{ data.username }})
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="操作模块:">
|
||||
<div class="ele-text-secondary">
|
||||
{{ data.model }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="操作时间:">
|
||||
<div class="ele-text-secondary">
|
||||
{{ $util.toDateString(data.createTime) }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="请求方式:">
|
||||
<div class="ele-text-secondary">
|
||||
{{ data.requestMethod }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :sm="12" :xs="24">
|
||||
<a-form-item label="IP地址:">
|
||||
<div class="ele-text-secondary">
|
||||
{{ data.ip }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="操作功能:">
|
||||
<div class="ele-text-secondary">
|
||||
{{ data.description }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="请求耗时:">
|
||||
<div class="ele-text-secondary">
|
||||
{{ data.spendTime / 1000 }}s
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="请求状态:">
|
||||
<a-tag :color="['green', 'red'][data.state]">
|
||||
{{ ['正常', '异常'][data.state] }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div style="margin: 12px 0;">
|
||||
<a-divider/>
|
||||
</div>
|
||||
<a-form-item
|
||||
label="请求地址:"
|
||||
:label-col="{sm: {span: 4}, xs: {span: 6}}"
|
||||
:wrapper-col="{sm: {span: 20}, xs: {span: 18}}">
|
||||
<div class="ele-text-secondary">
|
||||
{{ data.url }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="调用方法:"
|
||||
:label-col="{sm: {span: 4}, xs: {span: 6}}"
|
||||
:wrapper-col="{sm: {span: 20}, xs: {span: 18}}">
|
||||
<div class="ele-text-secondary">
|
||||
{{ data.operMethod }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="请求参数:"
|
||||
:label-col="{sm: {span: 4}, xs: {span: 6}}"
|
||||
:wrapper-col="{sm: {span: 20}, xs: {span: 18}}">
|
||||
<div class="ele-text-secondary">
|
||||
{{ data.param }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="返回结果:"
|
||||
:label-col="{sm: {span: 4}, xs: {span: 6}}"
|
||||
:wrapper-col="{sm: {span: 20}, xs: {span: 18}}">
|
||||
<div class="ele-text-secondary">
|
||||
{{ data.result }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="备注:"
|
||||
:label-col="{sm: {span: 4}, xs: {span: 6}}"
|
||||
:wrapper-col="{sm: {span: 20}, xs: {span: 18}}">
|
||||
<div class="ele-text-secondary">
|
||||
{{ data.comments }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OperRecordDetail',
|
||||
emits: ['update:visible'],
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 数据
|
||||
data: Object
|
||||
},
|
||||
methods: {
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
166
src/views/system/organization/index.vue
Normal file
166
src/views/system/organization/index.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="6" :md="24" :sm="24" :xs="24">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{padding: '24px 16px'}">
|
||||
<div class="ele-table-tool">
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openEdit()">新建
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openEdit(current)"
|
||||
:disabled="!current">修改
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
@click="remove"
|
||||
:disabled="!current">删除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-tree
|
||||
:tree-data="data"
|
||||
v-model:expanded-keys="expandedRowKeys"
|
||||
v-model:selected-keys="selectedRowKeys"
|
||||
@select="onTreeSelect"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="18" :md="24" :sm="24" :xs="24">
|
||||
<a-card :bordered="false">
|
||||
<org-user-list
|
||||
v-if="current"
|
||||
:organization-id="current.organizationId"
|
||||
:organization-list="data"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<org-edit
|
||||
v-model:visible="showEdit"
|
||||
:data="editData"
|
||||
:organization-list="data"
|
||||
@done="query"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createVNode} from 'vue';
|
||||
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
|
||||
import OrgUserList from './org-user-list';
|
||||
import OrgEdit from './org-edit';
|
||||
|
||||
export default {
|
||||
name: 'SystemOrganization',
|
||||
components: {
|
||||
OrgUserList,
|
||||
OrgEdit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: true,
|
||||
// 树形数据
|
||||
data: [],
|
||||
// 树展开的key
|
||||
expandedRowKeys: [],
|
||||
// 树选中的key
|
||||
selectedRowKeys: [],
|
||||
// 选中数据
|
||||
current: null,
|
||||
// 是否显示表单弹窗
|
||||
showEdit: false,
|
||||
// 编辑回显数据
|
||||
editData: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
/* 查询 */
|
||||
query() {
|
||||
this.loading = true;
|
||||
this.$http.get('/sys/organization').then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
let eks = [];
|
||||
res.data.data.forEach(d => {
|
||||
d.key = d.organizationId;
|
||||
d.value = d.organizationId;
|
||||
d.title = d.organizationName;
|
||||
eks.push(d.key);
|
||||
});
|
||||
this.expandedRowKeys = eks;
|
||||
this.data = this.$util.toTreeData(res.data.data, 'organizationId', 'parentId');
|
||||
if (this.data.length) {
|
||||
this.selectedRowKeys = [this.data[0].key];
|
||||
this.onTreeSelect();
|
||||
} else {
|
||||
this.selectedRowKeys = [];
|
||||
this.current = null;
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 选择数据 */
|
||||
onTreeSelect() {
|
||||
this.$util.eachTreeData(this.data, (d) => {
|
||||
if (this.selectedRowKeys.indexOf(d.key) !== -1) {
|
||||
this.current = d;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 打开编辑弹窗 */
|
||||
openEdit(item) {
|
||||
this.editData = Object.assign({}, {
|
||||
parentId: this.current.parentId
|
||||
}, item);
|
||||
this.showEdit = true;
|
||||
},
|
||||
/* 删除 */
|
||||
remove() {
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的机构吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.delete('/sys/organization/' + this.current.organizationId).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.query();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (min-width: 768px) {
|
||||
.ant-card {
|
||||
min-height: calc(100vh - 122px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
201
src/views/system/organization/org-edit.vue
Normal file
201
src/views/system/organization/org-edit.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<!-- 机构编辑弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:width="680"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate?'修改机构':'添加机构'"
|
||||
:body-style="{paddingBottom: '8px'}"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 7}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 17}, sm: {span: 24}}">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="上级机构:" name="parentId">
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
placeholder="请选择上级机构"
|
||||
v-model:value="form.parentId"
|
||||
:tree-data="organizationList"
|
||||
:dropdown-style="{maxHeight: '360px', overflow: 'auto'}"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="机构名称:" name="organizationName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入机构名称"
|
||||
v-model:value="form.organizationName"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="机构全称:" name="organizationFullName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
placeholder="请输入机构全称"
|
||||
v-model:value="form.organizationFullName"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="机构代码:" name="organizationCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入机构代码"
|
||||
v-model:value="form.organizationCode"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="机构类型:" name="organizationType">
|
||||
<a-select
|
||||
allow-clear
|
||||
placeholder="请选择机构类型"
|
||||
v-model:value="form.organizationType">
|
||||
<a-select-option
|
||||
v-for="item in organizationTypeList"
|
||||
:key="item.dictDataId"
|
||||
:value="item.dictDataId">
|
||||
{{ item.dictDataName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序号:" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注:">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OrgEdit',
|
||||
emits: ['done', 'update:visible'],
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 修改回显的数据
|
||||
data: Object,
|
||||
// 全部机构
|
||||
organizationList: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单数据
|
||||
form: Object.assign({}, this.data, {
|
||||
parentId: this.data ? (this.data.parentId === 0 ? null : this.data.parentId) : null
|
||||
}),
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
organizationName: [
|
||||
{required: true, message: '请输入机构名称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
organizationFullName: [
|
||||
{required: true, message: '请输入机构全称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
organizationCode: [
|
||||
{required: true, message: '请输入机构代码', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
organizationType: [
|
||||
{required: true, message: '请选择机构类型', type: 'number', trigger: 'blur'}
|
||||
],
|
||||
sortNumber: [
|
||||
{required: true, message: '请输入排序号', type: 'number', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false,
|
||||
// 机构类型列表
|
||||
organizationTypeList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
if (this.data) {
|
||||
this.form = Object.assign({}, this.data, {
|
||||
parentId: this.data.parentId === 0 ? null : this.data.parentId
|
||||
});
|
||||
this.isUpdate = !!this.data.organizationId;
|
||||
} else {
|
||||
this.form = {};
|
||||
this.isUpdate = false;
|
||||
}
|
||||
if (this.$refs.form) {
|
||||
this.$refs.form.clearValidate();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.queryOrganizationType(); // 获取机构类型
|
||||
},
|
||||
methods: {
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
this.$http[this.isUpdate ? 'put' : 'post']('/sys/organization',
|
||||
Object.assign({}, this.form, {
|
||||
parentId: this.form.parentId || 0
|
||||
})
|
||||
).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
if (!this.isUpdate) {
|
||||
this.form = {};
|
||||
}
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
},
|
||||
/* 查询机构类型 */
|
||||
queryOrganizationType() {
|
||||
this.$http.get('/sys/dictdata', {
|
||||
params: {
|
||||
dictCode: 'organization_type'
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.organizationTypeList = res.data.data;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
248
src/views/system/organization/org-user-edit.vue
Normal file
248
src/views/system/organization/org-user-edit.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:width="680"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate?'修改用户':'新建用户'"
|
||||
:body-style="{paddingBottom: '8px'}"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 7}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 17}, sm: {span: 24}}">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="所属机构:">
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
placeholder="请选择所属机构"
|
||||
v-model:value="form.organizationId"
|
||||
:tree-data="organizationList"
|
||||
:dropdown-style="{maxHeight: '360px', overflow: 'auto'}"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="用户账号:" name="username">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入用户账号"
|
||||
v-model:value="form.username"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="用户名:" name="nickname">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入用户名"
|
||||
v-model:value="form.nickname"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别:" name="sex">
|
||||
<a-select
|
||||
allow-clear
|
||||
placeholder="请选择性别"
|
||||
v-model:value="form.sex">
|
||||
<a-select-option :value="1">男</a-select-option>
|
||||
<a-select-option :value="2">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色:" name="roleIds">
|
||||
<a-select
|
||||
allow-clear
|
||||
mode="multiple"
|
||||
placeholder="请选择角色"
|
||||
v-model:value="form.roleIds">
|
||||
<a-select-option
|
||||
v-for="item in roleList"
|
||||
:key="item.roleId"
|
||||
:value="item.roleId">
|
||||
{{ item.roleName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="手机号:" name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="11"
|
||||
placeholder="请输入手机号"
|
||||
v-model:value="form.phone"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱:" name="email">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
placeholder="请输入邮箱"
|
||||
v-model:value="form.email"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="!isUpdate"
|
||||
label="登录密码:"
|
||||
name="password">
|
||||
<a-input-password
|
||||
:maxlength="20"
|
||||
v-model:value="form.password"
|
||||
placeholder="请输入登录密码"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="个人简介:">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入个人简介"
|
||||
v-model:value="form.introduction"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import validate from 'ele-admin-pro/packages/validate';
|
||||
|
||||
export default {
|
||||
name: 'OrgUserEdit',
|
||||
emits: ['done', 'update:visible'],
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 修改回显的数据
|
||||
data: Object,
|
||||
// 全部机构
|
||||
organizationList: Array,
|
||||
// 机构id
|
||||
organizationId: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单数据
|
||||
form: Object.assign({}, this.data, {
|
||||
organizationId: this.organizationId
|
||||
}),
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
trigger: 'blur',
|
||||
asyncValidator: (rule, value) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请输入用户账号');
|
||||
}
|
||||
this.$http.get('/sys/user?username=' + value).then(res => {
|
||||
if (res.data.code !== 0 || !res.data.data.length) {
|
||||
return resolve();
|
||||
}
|
||||
if (this.isUpdate && res.data.data[0].username === this.data.username) {
|
||||
return resolve();
|
||||
}
|
||||
reject('账号已经存在');
|
||||
}).catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{required: true, message: '请输入用户名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
sex: [
|
||||
{required: true, message: '请选择性别', type: 'number', trigger: 'blur'}
|
||||
],
|
||||
roleIds: [
|
||||
{required: true, message: '请选择角色', type: 'array', trigger: 'blur'}
|
||||
],
|
||||
email: [
|
||||
{pattern: validate.email, message: '邮箱格式不正确', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
password: [
|
||||
{required: true, pattern: /^[\S]{5,18}$/, message: '密码必须为5-18位非空白字符', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
phone: [
|
||||
{pattern: validate.phone, message: '手机号格式不正确', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false,
|
||||
// 角色列表
|
||||
roleList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
if (this.data) {
|
||||
this.form = Object.assign({}, this.data, {
|
||||
roleIds: this.data.roles.map(d => d.roleId)
|
||||
});
|
||||
this.isUpdate = true;
|
||||
} else {
|
||||
this.form = {organizationId: this.organizationId};
|
||||
this.isUpdate = false;
|
||||
}
|
||||
if (this.$refs.form) {
|
||||
this.$refs.form.clearValidate();
|
||||
}
|
||||
},
|
||||
organizationId() {
|
||||
if (!this.isUpdate) {
|
||||
this.form = {organizationId: this.organizationId};
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.queryRoles(); // 查询角色列表
|
||||
},
|
||||
methods: {
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
this.$http[this.isUpdate ? 'put' : 'post']('/sys/user', this.form).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
if (!this.isUpdate) {
|
||||
this.form = {};
|
||||
}
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
},
|
||||
/* 查询角色列表 */
|
||||
queryRoles() {
|
||||
this.$http.get('/sys/role').then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.roleList = res.data.data;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
207
src/views/system/organization/org-user-list.vue
Normal file
207
src/views/system/organization/org-user-list.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="userId"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
:where="where"
|
||||
tool-class="ele-toolbar-form"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="6" :md="8" :sm="24" :xs="24">
|
||||
<a-input
|
||||
v-model:value.trim="where.username"
|
||||
placeholder="请输入用户账号"
|
||||
allow-clear/>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="8" :sm="24" :xs="24">
|
||||
<a-input
|
||||
v-model:value.trim="where.nickname"
|
||||
placeholder="请输入用户名"
|
||||
allow-clear/>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="8" :sm="24" :xs="24">
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="reload">查询
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openEdit()">新建
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<template #roles="{ record }">
|
||||
<a-tag
|
||||
v-for="(item, index) in record.roles"
|
||||
:key="index"
|
||||
color="blue">{{ item.roleName }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #state="{ text,record }">
|
||||
<a-switch
|
||||
:checked="text===0"
|
||||
@change="(checked) => changeState(checked, record)"/>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm
|
||||
title="确定要删除此用户吗？"
|
||||
@confirm="remove(record)">
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
<!-- 编辑弹窗 -->
|
||||
<org-user-edit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:organization-list="organizationList"
|
||||
:organization-id="organizationId"
|
||||
@done="reload"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrgUserEdit from './org-user-edit';
|
||||
|
||||
export default {
|
||||
name: 'SysOrgUserList',
|
||||
components: {OrgUserEdit},
|
||||
props: {
|
||||
// 机构id
|
||||
organizationId: Number,
|
||||
// 全部机构
|
||||
organizationList: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据接口
|
||||
url: '/sys/user/page',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
customRender: ({index}) => this.$refs.table.tableIndex + index
|
||||
},
|
||||
{
|
||||
title: '用户账号',
|
||||
dataIndex: 'username',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'nickname',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'sexName',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '角色',
|
||||
key: 'roles',
|
||||
slots: {customRender: 'roles'}
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
customRender: ({text}) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
sorter: true,
|
||||
width: 90,
|
||||
align: 'center',
|
||||
slots: {customRender: 'state'}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
where: {
|
||||
organizationId: this.organizationId
|
||||
},
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({page: 1, where: this.where});
|
||||
},
|
||||
/* 打开编辑弹窗 */
|
||||
openEdit(row) {
|
||||
this.current = row;
|
||||
this.showEdit = true;
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.delete('/sys/user/' + row.userId).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 修改用户状态 */
|
||||
changeState(checked, row) {
|
||||
let params = new FormData();
|
||||
params.append('state', checked ? 0 : 1);
|
||||
this.$http.put('/sys/user/state/' + row.userId, params).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
row.state = checked ? 0 : 1;
|
||||
this.$message.success(res.data.msg);
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/* 监听机构id变化 */
|
||||
organizationId() {
|
||||
this.where.organizationId = this.organizationId;
|
||||
this.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
238
src/views/system/role/index.vue
Normal file
238
src/views/system/role/index.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form
|
||||
:model="where"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="角色名称:">
|
||||
<a-input
|
||||
v-model:value.trim="where.roleName"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="角色标识:">
|
||||
<a-input
|
||||
v-model:value.trim="where.roleCode"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="备注:">
|
||||
<a-input
|
||||
v-model:value.trim="where.comments"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="roleId"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
:where="where"
|
||||
v-model:selection="selection"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button type="primary" danger @click="removeBatch">
|
||||
<template #icon>
|
||||
<delete-outlined/>
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="openAuth(record)">分配权限</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm
|
||||
title="确定要删除此角色吗？"
|
||||
@confirm="remove(record)">
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<role-edit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"/>
|
||||
<!-- 权限分配弹窗 -->
|
||||
<role-auth
|
||||
v-model:visible="showAuth"
|
||||
:data="current"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createVNode} from 'vue'
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import RoleEdit from './role-edit';
|
||||
import RoleAuth from './role-auth';
|
||||
|
||||
export default {
|
||||
name: 'SystemRole',
|
||||
components: {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
RoleEdit,
|
||||
RoleAuth
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据接口
|
||||
url: '/sys/role/page',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
customRender: ({index}) => this.$refs.table.tableIndex + index
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'roleName',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '角色标识',
|
||||
dataIndex: 'roleCode',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
customRender: ({text}) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
where: {},
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 是否显示权限分配弹窗
|
||||
showAuth: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 搜索 */
|
||||
reload() {
|
||||
this.selection = [];
|
||||
this.$refs.table.reload({page: 1, where: this.where});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
this.reload();
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.delete('/sys/role/' + row.roleId).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 批量删除 */
|
||||
removeBatch() {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的角色吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.delete('/sys/role/batch', {
|
||||
data: this.selection.map(d => d.roleId)
|
||||
}).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 打开编辑弹窗 */
|
||||
openEdit(row) {
|
||||
this.current = row;
|
||||
this.showEdit = true;
|
||||
},
|
||||
/* 打开权限分配弹窗 */
|
||||
openAuth(row) {
|
||||
this.current = row;
|
||||
this.showAuth = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
134
src/views/system/role/role-auth.vue
Normal file
134
src/views/system/role/role-auth.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<!-- 角色权限分配弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:width="460"
|
||||
title="分配权限"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save">
|
||||
<a-spin :spinning="authLoading">
|
||||
<div style="height: 60vh;" class="ele-scrollbar-hover">
|
||||
<a-tree
|
||||
checkable
|
||||
:tree-data="authData"
|
||||
v-model:expandedKeys="expandKeys"
|
||||
v-model:checkedKeys="checkedKeys"/>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RoleAuth',
|
||||
emits: ['update:visible'],
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 当前角色数据
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 权限数据
|
||||
authData: [],
|
||||
// 权限数据请求状态
|
||||
authLoading: false,
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 角色权限展开的keys
|
||||
expandKeys: [],
|
||||
// 角色权限选中的keys
|
||||
checkedKeys: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible() {
|
||||
if (this.visible) {
|
||||
this.query();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 查询权限数据 */
|
||||
query() {
|
||||
this.authData = [];
|
||||
this.expandKeys = [];
|
||||
this.checkedKeys = [];
|
||||
if (!this.data) {
|
||||
return;
|
||||
}
|
||||
this.authLoading = true;
|
||||
this.$http.get('/sys/role/menu', {
|
||||
params: {
|
||||
roleId: this.data.roleId
|
||||
}
|
||||
}).then(res => {
|
||||
this.authLoading = false;
|
||||
if (res.data.code === 0) {
|
||||
let eks = [], cks = [];
|
||||
// 转成树形结构的数据
|
||||
this.authData = this.$util.toTreeData({
|
||||
data: res.data.data,
|
||||
idKey: 'menuId',
|
||||
pidKey: 'parentId',
|
||||
addPIds: true,
|
||||
parentIds: []
|
||||
});
|
||||
// 全部默认展开以及回显选中的数据
|
||||
this.$util.eachTreeData(this.authData, (d) => {
|
||||
d.key = d.menuId;
|
||||
eks.push(d.key);
|
||||
if (d.checked && (!d.children || !d.children.length)) {
|
||||
cks.push(d.key);
|
||||
}
|
||||
});
|
||||
this.expandKeys = eks;
|
||||
this.checkedKeys = cks;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.authLoading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 保存权限分配 */
|
||||
save() {
|
||||
this.loading = true;
|
||||
// 获取选中的id，包含所有半选的父级的id
|
||||
const ids = new Set();
|
||||
this.$util.eachTreeData(this.authData, (d) => {
|
||||
if (this.checkedKeys.some(c => c === d.key)) {
|
||||
ids.add(d.key);
|
||||
if (d.parentIds) {
|
||||
d.parentIds.forEach((id) => {
|
||||
ids.add(id);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.$http.put('/sys/role/menu/' + this.data.roleId, Array.from(ids)).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.updateVisible(false);
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
118
src/views/system/role/role-edit.vue
Normal file
118
src/views/system/role/role-edit.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<!-- 角色编辑弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:width="460"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate?'修改角色':'添加角色'"
|
||||
:body-style="{paddingBottom: '8px'}"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 5}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 19}, sm: {span: 24}}">
|
||||
<a-form-item label="角色名称:" name="roleName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入角色名称"
|
||||
v-model:value="form.roleName"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色标识:" name="roleCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入角色标识"
|
||||
v-model:value="form.roleCode"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注:">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RoleEdit',
|
||||
emits: ['done', 'update:visible'],
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 修改回显的数据
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单数据
|
||||
form: Object.assign({}, this.data),
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
roleName: [
|
||||
{required: true, message: '请输入角色名称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
roleCode: [
|
||||
{required: true, message: '请输入角色标识', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
if (this.data) {
|
||||
this.form = Object.assign({}, this.data);
|
||||
this.isUpdate = true;
|
||||
} else {
|
||||
this.form = {};
|
||||
this.isUpdate = false;
|
||||
}
|
||||
if (this.$refs.form) {
|
||||
this.$refs.form.clearValidate();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
this.$http[this.isUpdate ? 'put' : 'post']('/sys/role', this.form).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
if (!this.isUpdate) {
|
||||
this.form = {};
|
||||
}
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
321
src/views/system/user/index.vue
Normal file
321
src/views/system/user/index.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form
|
||||
:model="where"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="用户账号:">
|
||||
<a-input
|
||||
v-model:value.trim="where.username"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="用户名:">
|
||||
<a-input
|
||||
v-model:value.trim="where.nickname"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="性别:">
|
||||
<a-select
|
||||
v-model:value="where.sex"
|
||||
placeholder="请选择"
|
||||
allow-clear>
|
||||
<a-select-option :value="1">男</a-select-option>
|
||||
<a-select-option :value="2">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="userId"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
:where="where"
|
||||
v-model:selection="selection"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button type="primary" danger @click="removeBatch">
|
||||
<template #icon>
|
||||
<delete-outlined/>
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
<a-button @click="showImport=true">
|
||||
<template #icon>
|
||||
<upload-outlined/>
|
||||
</template>
|
||||
<span>导入</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #nickname="{ record }">
|
||||
<router-link :to="'/system/user/info?id=' + record.userId">
|
||||
{{ record.nickname }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template #roles="{ record }">
|
||||
<a-tag
|
||||
v-for="(item, index) in record.roles"
|
||||
:key="index"
|
||||
color="blue">
|
||||
{{ item.roleName }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #state="{ text, record }">
|
||||
<a-switch
|
||||
:checked="text===0"
|
||||
@change="(checked) => editState(checked, record)"/>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="resetPsw(record)">重置密码</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm
|
||||
title="确定要删除此用户吗？"
|
||||
@confirm="remove(record)">
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<user-edit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"/>
|
||||
<!-- 导入弹窗 -->
|
||||
<user-import
|
||||
v-model:visible="showImport"
|
||||
@done="reload"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createVNode} from 'vue';
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
UploadOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import UserEdit from './user-edit';
|
||||
import UserImport from './user-import';
|
||||
|
||||
export default {
|
||||
name: 'SystemUser',
|
||||
components: {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
UploadOutlined,
|
||||
UserImport,
|
||||
UserEdit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据接口
|
||||
url: '/sys/user/page',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
customRender: ({index}) => this.$refs.table.tableIndex + index
|
||||
},
|
||||
{
|
||||
title: '用户账号',
|
||||
dataIndex: 'username',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'nickname',
|
||||
sorter: true,
|
||||
slots: {customRender: 'nickname'}
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'sexName',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '角色',
|
||||
key: 'roles',
|
||||
slots: {customRender: 'roles'}
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
customRender: ({text}) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
sorter: true,
|
||||
width: 90,
|
||||
align: 'center',
|
||||
slots: {customRender: 'state'}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
where: {},
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 是否显示用户导入弹窗
|
||||
showImport: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 搜索 */
|
||||
reload() {
|
||||
this.selection = [];
|
||||
this.$refs.table.reload({page: 1, where: this.where});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
this.reload();
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.delete('/sys/user/' + row.userId).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 批量删除 */
|
||||
removeBatch() {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的用户吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
this.$http.delete('/sys/user/batch', {
|
||||
data: this.selection.map(d => d.userId)
|
||||
}).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 打开编辑弹窗 */
|
||||
openEdit(row) {
|
||||
this.current = row;
|
||||
this.showEdit = true;
|
||||
},
|
||||
/* 重置用户密码 */
|
||||
resetPsw(row) {
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '确定要重置此用户的密码为"123456"吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
const formData = new FormData();
|
||||
formData.append('password', '123456');
|
||||
this.$http.put('/sys/user/psw/' + row.userId, formData).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 修改用户状态 */
|
||||
editState(checked, row) {
|
||||
let params = new FormData();
|
||||
params.append('state', checked ? 0 : 1);
|
||||
this.$http.put('/sys/user/state/' + row.userId, params).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
row.state = checked ? 0 : 1;
|
||||
this.$message.success(res.data.msg);
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
86
src/views/system/user/info/index.vue
Normal file
86
src/views/system/user/info/index.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card title="基本信息" :bordered="false">
|
||||
<a-form
|
||||
class="ele-form-detail"
|
||||
:label-col="{md: {span: 2}, sm: {span: 4}, xs: {span: 6}}"
|
||||
:wrapper-col="{md: {span: 22}, sm: {span: 20}, xs: {span: 18}}">
|
||||
<a-form-item label="账号">
|
||||
<div class="ele-text-secondary">{{ user.username }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="用户名">
|
||||
<div class="ele-text-secondary">{{ user.nickname }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别">
|
||||
<div class="ele-text-secondary">{{ user.sexName }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号">
|
||||
<div class="ele-text-secondary">{{ user.phone }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色">
|
||||
<a-tag v-for="item in user.roles" :key="item.roleId" color="blue">
|
||||
{{ item.roleName }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="创建时间">
|
||||
<div class="ele-text-secondary">{{ $util.toDateString(user.createTime) }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-badge
|
||||
:status="['processing', 'error'][user.state]"
|
||||
:text="['正常', '冻结'][user.state]"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {setPageTab} from '@/utils/page-tab-util';
|
||||
|
||||
export default {
|
||||
name: 'SystemUserInfo',
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.query(this.$route.query.id);
|
||||
},
|
||||
methods: {
|
||||
/* 查询用户信息 */
|
||||
query(id) {
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.$http.get('/sys/user/' + id).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.user = res.data.data;
|
||||
// 修改页签标题
|
||||
setPageTab({
|
||||
fullPath: this.$route.fullPath,
|
||||
title: this.user.nickname + '的信息'
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((e) => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.query(this.$route.query.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
235
src/views/system/user/user-edit.vue
Normal file
235
src/views/system/user/user-edit.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:width="680"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate?'修改用户':'新建用户'"
|
||||
:body-style="{paddingBottom: '8px'}"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 7}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 17}, sm: {span: 24}}">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="用户账号:" name="username">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入用户账号"
|
||||
v-model:value="form.username"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="用户名:" name="nickname">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入用户名"
|
||||
v-model:value="form.nickname"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别:" name="sex">
|
||||
<a-select
|
||||
allow-clear
|
||||
placeholder="请选择性别"
|
||||
v-model:value="form.sex">
|
||||
<a-select-option :value="1">男</a-select-option>
|
||||
<a-select-option :value="2">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色:" name="roleIds">
|
||||
<a-select
|
||||
allow-clear
|
||||
mode="multiple"
|
||||
placeholder="请选择角色"
|
||||
v-model:value="form.roleIds">
|
||||
<a-select-option
|
||||
v-for="item in roleList"
|
||||
:key="item.roleId"
|
||||
:value="item.roleId">
|
||||
{{ item.roleName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱:" name="email">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
placeholder="请输入邮箱"
|
||||
v-model:value="form.email"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="手机号:" name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="11"
|
||||
placeholder="请输入手机号"
|
||||
v-model:value="form.phone"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="出生日期:" name="birthday">
|
||||
<a-date-picker
|
||||
class="ele-fluid"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择出生日期"
|
||||
v-model:value="form.birthday"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="!isUpdate"
|
||||
label="登录密码:"
|
||||
name="password">
|
||||
<a-input-password
|
||||
:maxlength="20"
|
||||
v-model:value="form.password"
|
||||
placeholder="请输入登录密码"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="个人简介:">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入个人简介"
|
||||
v-model:value="form.introduction"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import validate from 'ele-admin-pro/packages/validate';
|
||||
|
||||
export default {
|
||||
name: 'UserEdit',
|
||||
emits: ['done', 'update:visible'],
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 修改回显的数据
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单数据
|
||||
form: Object.assign({}, this.data),
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
trigger: 'blur',
|
||||
asyncValidator: (rule, value) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请输入用户账号');
|
||||
}
|
||||
this.$http.get('/sys/user?username=' + value).then(res => {
|
||||
if (res.data.code !== 0 || !res.data.data.length) {
|
||||
return resolve();
|
||||
}
|
||||
if (this.isUpdate && res.data.data[0].username === this.data.username) {
|
||||
return resolve();
|
||||
}
|
||||
reject('账号已经存在');
|
||||
}).catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{required: true, message: '请输入用户名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
sex: [
|
||||
{required: true, message: '请选择性别', type: 'number', trigger: 'blur'}
|
||||
],
|
||||
roleIds: [
|
||||
{required: true, message: '请选择角色', type: 'array', trigger: 'blur'}
|
||||
],
|
||||
email: [
|
||||
{pattern: validate.email, message: '邮箱格式不正确', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
password: [
|
||||
{required: true, pattern: /^[\S]{5,18}$/, message: '密码必须为5-18位非空白字符', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
phone: [
|
||||
{pattern: validate.phone, message: '手机号格式不正确', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false,
|
||||
// 角色列表
|
||||
roleList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
if (this.data) {
|
||||
this.form = Object.assign({}, this.data, {
|
||||
roleIds: this.data.roles.map(d => d.roleId)
|
||||
});
|
||||
this.isUpdate = true;
|
||||
} else {
|
||||
this.form = {};
|
||||
this.isUpdate = false;
|
||||
}
|
||||
if (this.$refs.form) {
|
||||
this.$refs.form.clearValidate();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.queryRoles(); // 查询角色列表
|
||||
},
|
||||
methods: {
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
this.$http[this.isUpdate ? 'put' : 'post']('/sys/user', this.form).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
if (!this.isUpdate) {
|
||||
this.form = {};
|
||||
}
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
},
|
||||
/* 查询角色列表 */
|
||||
queryRoles() {
|
||||
this.$http.get('/sys/role').then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.roleList = res.data.data;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
77
src/views/system/user/user-import.vue
Normal file
77
src/views/system/user/user-import.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<!-- 用户导入弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:width="520"
|
||||
:footer="null"
|
||||
title="导入用户"
|
||||
:visible="visible"
|
||||
@update:visible="updateVisible">
|
||||
<a-spin :spinning="loading">
|
||||
<a-upload-dragger
|
||||
accept=".xls,.xlsx"
|
||||
:show-upload-list="false"
|
||||
:customRequest="doUpload"
|
||||
style="padding: 24px 0;margin-bottom: 16px;">
|
||||
<p class="ant-upload-drag-icon">
|
||||
<cloud-upload-outlined/>
|
||||
</p>
|
||||
<p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
|
||||
</a-upload-dragger>
|
||||
</a-spin>
|
||||
<div class="ele-text-center">
|
||||
<span>只能上传xls、xlsx文件，</span>
|
||||
<a href="https://cdn.eleadmin.com/20200610/用户导入模板.xlsx"
|
||||
download="用户导入模板.xlsx">下载模板
|
||||
</a>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CloudUploadOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'UserImport',
|
||||
components: {CloudUploadOutlined},
|
||||
emits: ['done', 'update:visible'],
|
||||
props: {
|
||||
// 是否打开弹窗
|
||||
visible: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 导入请求状态
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 上传 */
|
||||
doUpload({file}) {
|
||||
this.loading = true;
|
||||
let formData = new FormData();
|
||||
formData.append('file', file);
|
||||
this.$http.post('/sys/user/import', formData).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
return false;
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
215
src/views/user/message.vue
Normal file
215
src/views/user/message.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" class="user-message-card">
|
||||
<div class="ele-cell ele-cell-align-top">
|
||||
<a-menu :selected-keys="active" mode="inline">
|
||||
<a-menu-item key="all">
|
||||
<router-link to="/user/message">全部消息</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="notice">
|
||||
<router-link to="/user/message?type=notice">系统通知</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="message">
|
||||
<router-link to="/user/message?type=message">用户私信</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="todo">
|
||||
<router-link to="/user/message?type=todo">代办事项</router-link>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<div class="ele-cell-content">
|
||||
<!-- 数据表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:datasource="data"
|
||||
:columns="columns"
|
||||
v-model:selection="selection"
|
||||
:scroll="{x: 'max-content'}"
|
||||
@refresh="query">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="read">标记已读</a-button>
|
||||
<a-button type="primary" @click="readAll">全部已读</a-button>
|
||||
<a-button type="primary" danger @click="removeBatch">删除消息</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #state="{ text }">
|
||||
<span :class="['ele-text-warning', 'ele-text-info'][text]">
|
||||
{{ ['未读', '已读'][text] }}
|
||||
</span>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a @click="view(record)">查看</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="确定要删除此消息吗？" @confirm="remove(record)">
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createVNode} from 'vue';
|
||||
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'UserMessage',
|
||||
data() {
|
||||
return {
|
||||
// 导航选中
|
||||
active: ['all'],
|
||||
// 列表显示数据
|
||||
data: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
width: 38,
|
||||
customRender: ({index}) => this.$refs.table.tableIndex + index
|
||||
},
|
||||
{
|
||||
title: '标题内容',
|
||||
dataIndex: 'title'
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'time'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
slots: {customRender: 'state'}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
}
|
||||
],
|
||||
// 列表选中数据
|
||||
selection: [],
|
||||
// 全部数据
|
||||
allData: [],
|
||||
// 加载状态
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const type = this.$route.query.type;
|
||||
if (type) {
|
||||
this.active = [type];
|
||||
}
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
/* 查询全部数据 */
|
||||
query() {
|
||||
this.loading = true;
|
||||
this.$http.get('https://cdn.eleadmin.com/20200609/message.json').then((res) => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.allData = res.data.data;
|
||||
this.changeType();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((e) => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 切换消息类型 */
|
||||
changeType() {
|
||||
if (this.active.indexOf('all') !== -1) {
|
||||
this.data = [].concat(this.allData);
|
||||
} else {
|
||||
this.data = this.allData.filter((d) => this.active.indexOf(d.type) !== -1);
|
||||
}
|
||||
this.selection = [];
|
||||
},
|
||||
/* 查看 */
|
||||
view(row) {
|
||||
this.$message.info(row.title);
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
this.allData.splice(this.allData.findIndex((t) => t.id === row.id), 1);
|
||||
this.$message.success('删除成功');
|
||||
this.changeType();
|
||||
},
|
||||
/* 批量删除 */
|
||||
removeBatch() {
|
||||
if (!this.selection.length) {
|
||||
return this.$message.error('请至少选择一条数据');
|
||||
}
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的消息吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
this.selection.forEach((d) => {
|
||||
this.allData.splice(this.allData.findIndex((t) => t.id === d.id), 1);
|
||||
});
|
||||
this.changeType();
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 标记已读 */
|
||||
read() {
|
||||
if (!this.selection.length) {
|
||||
return this.$message.error('请至少选择一条数据');
|
||||
}
|
||||
this.selection.forEach((d) => {
|
||||
const index = this.allData.findIndex((t) => t.id === d.id);
|
||||
this.allData[index].state = 1;
|
||||
});
|
||||
this.changeType();
|
||||
},
|
||||
/* 全部标记已读 */
|
||||
readAll() {
|
||||
this.allData.forEach((d) => {
|
||||
d.state = 1;
|
||||
});
|
||||
this.changeType();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
const type = this.$route.query.type;
|
||||
this.active = [type || 'all'];
|
||||
this.changeType();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-message-card :deep(.ant-card-body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.user-message-card .ant-menu {
|
||||
width: 150px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.user-message-card .ant-menu + .ele-cell-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.user-message-card .ant-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
365
src/views/user/profile.vue
Normal file
365
src/views/user/profile.vue
Normal file
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="6" :md="8" :sm="24" :xs="24">
|
||||
<a-card :bordered="false">
|
||||
<div class="ele-text-center">
|
||||
<div class="user-info-avatar-group" @click="showCropper=true">
|
||||
<a-avatar :size="110" :src="form.avatar"/>
|
||||
<upload-outlined class="user-info-avatar-icon"/>
|
||||
</div>
|
||||
<h1>Jasmine</h1>
|
||||
<div>海纳百川，有容乃大</div>
|
||||
</div>
|
||||
<div class="user-info-list">
|
||||
<div class="ele-cell">
|
||||
<user-outlined/>
|
||||
<div class="ele-cell-content">资深前端工程师</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<home-outlined/>
|
||||
<div class="ele-cell-content">某某公司 - 某某事业群 - 某某技术部</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<environment-outlined/>
|
||||
<div class="ele-cell-content">中国 • 浙江省 • 杭州市</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<tag-outlined/>
|
||||
<div class="ele-cell-content">JavaScript、HTML、CSS、Vue、Node</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider dashed/>
|
||||
<h6>标签</h6>
|
||||
<div class="user-info-tags">
|
||||
<a-tag>很有想法的</a-tag>
|
||||
<a-tag>专注设计</a-tag>
|
||||
<a-tag>辣~</a-tag>
|
||||
<a-tag>大长腿</a-tag>
|
||||
<a-tag>川妹子</a-tag>
|
||||
<a-tag>海纳百川</a-tag>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="18" :md="16" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" class="user-info-tabs">
|
||||
<a-tabs v-model:active-key="active" size="large">
|
||||
<a-tab-pane tab="基本信息" key="info">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-form-item label="昵称:" name="nickname">
|
||||
<a-input
|
||||
v-model:value="form.nickname"
|
||||
placeholder="请输入昵称"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别:" name="sex">
|
||||
<a-select
|
||||
v-model:value="form.sex"
|
||||
placeholder="请选择性别"
|
||||
allow-clear>
|
||||
<a-select-option value="保密">保密</a-select-option>
|
||||
<a-select-option value="男">男</a-select-option>
|
||||
<a-select-option value="女">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱:" name="email">
|
||||
<a-input
|
||||
v-model:value="form.email"
|
||||
placeholder="请输入邮箱"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="个人简介:">
|
||||
<a-textarea
|
||||
v-model:value="form.introduction"
|
||||
placeholder="请输入个人简介"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="街道地址:">
|
||||
<a-input
|
||||
v-model:value="form.address"
|
||||
placeholder="请输入街道地址"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="联系电话:">
|
||||
<div class="ele-cell">
|
||||
<a-input
|
||||
v-model:value="form.tellPre"
|
||||
style="width: 65px;"/>
|
||||
<div class="ele-cell-content">
|
||||
<a-input
|
||||
v-model:value="form.tell"
|
||||
placeholder="请输入联系电话"
|
||||
allow-clear/>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{md: {offset: 6}}">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="save"
|
||||
:loading="loading">
|
||||
{{ loading ? '保存中..' : '保存更改' }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="账号绑定" key="account">
|
||||
<div class="user-account-list">
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-title">密保手机</div>
|
||||
<div class="ele-cell-desc">已绑定手机：138****8293</div>
|
||||
</div>
|
||||
<a>去修改</a>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-title">密保邮箱</div>
|
||||
<div class="ele-cell-desc">已绑定邮箱：eleadmin@eclouds.com</div>
|
||||
</div>
|
||||
<a>去修改</a>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-title">密保问题</div>
|
||||
<div class="ele-cell-desc">未设置密保问题</div>
|
||||
</div>
|
||||
<a>去设置</a>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<div class="ele-cell">
|
||||
<qq-outlined class="user-account-icon"/>
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-title">绑定QQ</div>
|
||||
<div class="ele-cell-desc">当前未绑定QQ账号</div>
|
||||
</div>
|
||||
<a>去绑定</a>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<div class="ele-cell">
|
||||
<wechat-outlined class="user-account-icon"/>
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-title">绑定微信</div>
|
||||
<div class="ele-cell-desc">当前未绑定绑定微信账号</div>
|
||||
</div>
|
||||
<a>去绑定</a>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<div class="ele-cell">
|
||||
<alipay-outlined class="user-account-icon"/>
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-title">绑定支付宝</div>
|
||||
<div class="ele-cell-desc">当前未绑定绑定支付宝账号</div>
|
||||
</div>
|
||||
<a>去绑定</a>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 头像裁剪弹窗 -->
|
||||
<ele-cropper-modal
|
||||
v-model:visible="showCropper"
|
||||
:src="form.avatar"
|
||||
@done="onCrop"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
UploadOutlined,
|
||||
UserOutlined,
|
||||
HomeOutlined,
|
||||
EnvironmentOutlined,
|
||||
TagOutlined,
|
||||
QqOutlined,
|
||||
WechatOutlined,
|
||||
AlipayOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import EleCropperModal from 'ele-admin-pro/packages/ele-cropper-modal';
|
||||
|
||||
export default {
|
||||
name: 'UserInfo',
|
||||
components: {
|
||||
UploadOutlined,
|
||||
UserOutlined,
|
||||
HomeOutlined,
|
||||
EnvironmentOutlined,
|
||||
TagOutlined,
|
||||
QqOutlined,
|
||||
WechatOutlined,
|
||||
AlipayOutlined,
|
||||
EleCropperModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// tab页选中
|
||||
active: 'info',
|
||||
// 表单数据
|
||||
form: {
|
||||
nickname: 'Jasmine',
|
||||
sex: '保密',
|
||||
email: 'eleadmin@eclouds.com',
|
||||
introduction: '',
|
||||
address: '',
|
||||
tellPre: '0752',
|
||||
tell: '',
|
||||
avatar: 'https://cdn.eleadmin.com/20200610/avatar.jpg'
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
nickname: [
|
||||
{required: true, message: '请输入昵称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
sex: [
|
||||
{required: true, message: '请选择性别', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
email: [
|
||||
{required: true, message: '请输入邮箱', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 保存按钮loading
|
||||
loading: false,
|
||||
// 是否显示裁剪弹窗
|
||||
showCropper: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 保存更改 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.$message.success('保存成功');
|
||||
}, 800);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 头像裁剪完成回调 */
|
||||
onCrop(res) {
|
||||
this.form.avatar = res;
|
||||
this.showCropper = false;
|
||||
this.$store.dispatch('user/setUser', Object.assign({}, this.$store.state.user.user, {
|
||||
avatar: res
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 用户资料卡片 */
|
||||
.user-info-avatar-group {
|
||||
margin: 16px 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-info-avatar-group .user-info-avatar-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
display: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.user-info-avatar-group:hover .user-info-avatar-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user-info-avatar-group:hover:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.user-info-avatar-group + h1 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 用户信息列表 */
|
||||
.user-info-list {
|
||||
margin: 52px 0 32px 0;
|
||||
}
|
||||
|
||||
.user-info-list .ele-cell + .ele-cell {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.user-info-list + .ant-divider {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 用户标签 */
|
||||
.user-info-tags {
|
||||
margin: 16px 0 4px 0;
|
||||
}
|
||||
|
||||
.user-info-tags .ant-tag {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
|
||||
/* 右侧卡片 */
|
||||
.user-info-tabs :deep(.ant-card-body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.user-info-tabs :deep(.ant-tabs-tab) {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
margin: 0 12px 0 28px !important;
|
||||
}
|
||||
|
||||
.user-info-tabs .ant-form {
|
||||
max-width: 580px;
|
||||
margin-top: 20px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* 用户账号绑定列表 */
|
||||
.user-account-list {
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
.user-account-list > .ele-cell {
|
||||
padding: 18px 34px;
|
||||
}
|
||||
|
||||
.user-account-list .user-account-icon {
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
font-size: 26px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-account-list .user-account-icon.anticon-qq {
|
||||
background: #3492ED;
|
||||
}
|
||||
|
||||
.user-account-list .user-account-icon.anticon-wechat {
|
||||
background: #4DAF29;
|
||||
}
|
||||
|
||||
.user-account-list .user-account-icon.anticon-alipay {
|
||||
background: #1476FE;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user