初始化项目
This commit is contained in:
@@ -0,0 +1,434 @@
|
||||
.chart-scrollbar {
|
||||
.chart-warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.chart-warp-bottom {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
.big-data-down-left,
|
||||
.big-data-down-right {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.flex-warp-item {
|
||||
padding: 0 7.5px 15px 15px;
|
||||
width: 100%;
|
||||
height: 33.33%;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--el-color-white);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.flex-title {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.flex-title-small {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.flex-content {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
.flex-content-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-left {
|
||||
color: var(--el-text-color-primary);
|
||||
.sky {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.sky-left {
|
||||
font-size: 30px;
|
||||
}
|
||||
.sky-center {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
font {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.span {
|
||||
background: #22bc76;
|
||||
border-radius: 2px;
|
||||
padding: 0 5px;
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
.sky-right {
|
||||
span {
|
||||
font-size: 30px;
|
||||
}
|
||||
font {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sky-dd {
|
||||
.sky-dl {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
overflow: hidden;
|
||||
div {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.sky-dl-first {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.d-states {
|
||||
display: flex;
|
||||
.d-states-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
i {
|
||||
font-size: 20px;
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
flex-shrink: 1;
|
||||
color: var(--el-color-white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.i-bg1 {
|
||||
background: #22bc76;
|
||||
}
|
||||
.i-bg2 {
|
||||
background: #e2356d;
|
||||
}
|
||||
.i-bg3 {
|
||||
background: #43bbef;
|
||||
}
|
||||
.d-states-flex {
|
||||
overflow: hidden;
|
||||
padding: 0 10px 0;
|
||||
.d-states-item-label {
|
||||
color: var(--el-color-primary);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.d-states-item-value {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 3px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.d-btn {
|
||||
margin-top: 5px;
|
||||
.d-btn-item {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 35px;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.3s;
|
||||
color: var(--el-color-primary);
|
||||
.d-btn-item-left {
|
||||
font-size: 20px;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.d-btn-item-center {
|
||||
padding: 0 10px;
|
||||
flex: 1;
|
||||
}
|
||||
.d-btn-item-eight {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-center {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.big-data-down-center-one {
|
||||
height: 66.67%;
|
||||
padding: 0 7.5px 15px;
|
||||
.big-data-down-center-one-content {
|
||||
height: 100%;
|
||||
background: var(--el-color-white);
|
||||
padding: 15px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-center-two {
|
||||
padding: 0 7.5px 15px;
|
||||
height: 33.33%;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--el-color-white);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.flex-title {
|
||||
margin-bottom: 15px;
|
||||
color: var(--el-text-color-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.flex-title-small {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.flex-content {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
height: calc(100% - 30px);
|
||||
.flex-content-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
.monitor-item {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.monitor-wave {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
background-color: var(--el-color-primary);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #f4f4f4;
|
||||
animation: roateOne 10s linear infinite;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
&::before {
|
||||
bottom: 10px;
|
||||
border-radius: 60%;
|
||||
}
|
||||
&::after {
|
||||
bottom: 8px;
|
||||
opacity: 0.7;
|
||||
border-radius: 37%;
|
||||
}
|
||||
.monitor-z-index {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@keyframes roateOne {
|
||||
0% {
|
||||
transform: translate(-50%, 0) rotateZ(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -2%) rotateZ(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, 0%) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
.monitor-active {
|
||||
background-color: #22bc76;
|
||||
.monitor-z-index {
|
||||
color: #22bc76;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex-content-right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-right {
|
||||
.flex-warp-item {
|
||||
padding: 0 15px 15px 7.5px;
|
||||
.flex-title {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.flex-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.task {
|
||||
display: flex;
|
||||
height: 45px;
|
||||
.task-item {
|
||||
flex: 1;
|
||||
color: var(--el-color-white);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.task-item-box {
|
||||
position: relative;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
left: -50%;
|
||||
top: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50% 50%, 50% 50%;
|
||||
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
||||
background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
|
||||
linear-gradient(#ffb980, #ffb980);
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
width: calc(100% - 2px);
|
||||
height: calc(100% - 2px);
|
||||
border-radius: 100%;
|
||||
}
|
||||
.task-item-value {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.task-item-label {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.task1 {
|
||||
&::after {
|
||||
background: #5492be;
|
||||
}
|
||||
}
|
||||
.task2 {
|
||||
&::after {
|
||||
background: #43a177;
|
||||
}
|
||||
}
|
||||
.task3 {
|
||||
&::after {
|
||||
background: #a76077;
|
||||
}
|
||||
}
|
||||
}
|
||||
.task-first-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
color: var(--el-color-primary);
|
||||
.task-first {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
color: var(--el-text-color-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
margin-top: 15px;
|
||||
.progress-item {
|
||||
height: 33.33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.progress-box {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
:deep(.el-progress__text) {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 12px !important;
|
||||
text-align: right;
|
||||
}
|
||||
:deep(.el-progress-bar__outer) {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
:deep(.el-progress-bar) {
|
||||
margin-right: -22px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* sky 天气
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const skyList = [
|
||||
{
|
||||
v1: '时间',
|
||||
v2: '天气',
|
||||
v3: '温度',
|
||||
v5: '降水',
|
||||
v7: '风力',
|
||||
type: 'title',
|
||||
},
|
||||
{
|
||||
v1: '今天',
|
||||
v2: 'ele-Sunny',
|
||||
v3: '20°/26°',
|
||||
v5: '50%',
|
||||
v7: '13m/s',
|
||||
},
|
||||
{
|
||||
v1: '明天',
|
||||
v2: 'ele-Lightning',
|
||||
v3: '20°/26°',
|
||||
v5: '50%',
|
||||
v7: '13m/s',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 当前设置状态
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const dBtnList = [
|
||||
{
|
||||
v2: '阳光玫瑰种植',
|
||||
v3: '126天',
|
||||
v4: '设备在线',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 当前设备监测
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const chartData4List = [
|
||||
{
|
||||
label: '温度',
|
||||
},
|
||||
{
|
||||
label: '光照',
|
||||
},
|
||||
{
|
||||
label: '湿度',
|
||||
},
|
||||
{
|
||||
label: '风力',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="big-data-up mb15">
|
||||
<div class="up-left">
|
||||
<i class="el-icon-time mr5"></i>
|
||||
<span>{{ time.txt }}</span>
|
||||
</div>
|
||||
<div class="up-center">
|
||||
<span>智慧农业系统平台</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, onBeforeMount, onUnmounted, defineComponent } from 'vue';
|
||||
import { formatDate } from '/@/utils/formatTime';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'chartHead',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
time: {
|
||||
txt: '',
|
||||
fun: 0,
|
||||
},
|
||||
});
|
||||
// 初始化时间
|
||||
const initTime = () => {
|
||||
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
|
||||
state.time.fun = window.setInterval(() => {
|
||||
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
|
||||
}, 1000);
|
||||
};
|
||||
// 页面加载前
|
||||
onBeforeMount(() => {
|
||||
initTime();
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
window.clearInterval(state.time.fun);
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.big-data-up {
|
||||
height: 55px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
color: var(--el-color-primary);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.up-left {
|
||||
position: absolute;
|
||||
}
|
||||
.up-center {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
letter-spacing: 5px;
|
||||
background-image: -webkit-linear-gradient(
|
||||
left,
|
||||
var(--el-color-primary),
|
||||
var(--el-color-primary-light-3) 25%,
|
||||
var(--el-color-primary) 50%,
|
||||
var(--el-color-primary-light-3) 75%,
|
||||
var(--el-color-primary)
|
||||
);
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
background-size: 200% 100%;
|
||||
-webkit-animation: masked-animation-data-v-b02d8052 4s linear infinite;
|
||||
animation: masked-animation-data-v-b02d8052 4s linear infinite;
|
||||
-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(transparent), to(hsla(0, 0%, 100%, 0.1)));
|
||||
position: relative;
|
||||
@keyframes masked-animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 1px transparent solid;
|
||||
border-image: linear-gradient(to right, var(--el-color-primary-light-9), var(--el-color-primary)) 1 10;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,492 @@
|
||||
<template>
|
||||
<div class="chart-scrollbar layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
|
||||
<div class="chart-warp">
|
||||
<div class="chart-warp-top">
|
||||
<ChartHead />
|
||||
</div>
|
||||
<div class="chart-warp-bottom">
|
||||
<!-- 左边 -->
|
||||
<div class="big-data-down-left">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">天气预报</div>
|
||||
<div class="flex-content">
|
||||
<div class="sky">
|
||||
<SvgIcon name="ele-Sunny" class="sky-left" />
|
||||
<div class="sky-center">
|
||||
<div class="mb2">
|
||||
<span>多云转晴</span>
|
||||
<span>东南风</span>
|
||||
<span class="span ml5">良</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sky-right">
|
||||
<span>25</span>
|
||||
<span>°C</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sky-dd">
|
||||
<div class="sky-dl" v-for="(v, k) in skyList" :key="k" :class="{ 'sky-dl-first': k === 1 }">
|
||||
<div>{{ v.v1 }}</div>
|
||||
<div v-if="v.type === 'title'">{{ v.v2 }}</div>
|
||||
<div v-else>
|
||||
<SvgIcon :name="v.v2" />
|
||||
</div>
|
||||
<div>{{ v.v3 }}</div>
|
||||
<div class="tip">{{ v.v5 }}</div>
|
||||
<div>{{ v.v7 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">当前设备状态</div>
|
||||
<div class="flex-content flex-content-overflow">
|
||||
<div class="d-states">
|
||||
<div class="d-states-item">
|
||||
<SvgIcon name="ele-Odometer" class="i-bg1" />
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">园区设备数</div>
|
||||
<div class="d-states-item-value">99</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-states-item">
|
||||
<SvgIcon name="ele-FirstAidKit" class="i-bg2" />
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">预警设备数</div>
|
||||
<div class="d-states-item-value">10</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-states-item">
|
||||
<SvgIcon name="ele-VideoPlay" class="i-bg3" />
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">运行设备数</div>
|
||||
<div class="d-states-item-value">20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-btn">
|
||||
<div class="d-btn-item" v-for="(v, k) in dBtnList" :key="k">
|
||||
<i class="d-btn-item-left el-icon-money"></i>
|
||||
<div class="d-btn-item-center">
|
||||
<div>{{ v.v2 }}|{{ v.v3 }}</div>
|
||||
</div>
|
||||
<div class="d-btn-item-eight">{{ v.v4 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">近30天预警总数</div>
|
||||
<div class="flex-content">
|
||||
<div style="height: 100%" ref="chartsWarningRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间 -->
|
||||
<div class="big-data-down-center">
|
||||
<div class="big-data-down-center-one">
|
||||
<div class="big-data-down-center-one-content">
|
||||
<div style="height: 100%" ref="chartsCenterOneRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="big-data-down-center-two">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">
|
||||
<span>当前设备监测</span>
|
||||
<span class="flex-title-small">单位：次</span>
|
||||
</div>
|
||||
<div class="flex-content">
|
||||
<div class="flex-content-left">
|
||||
<div class="monitor-item" v-for="(v, k) in chartData4List" :key="k">
|
||||
<div class="monitor-wave">
|
||||
<div class="monitor-z-index">
|
||||
<div class="monitor-item-label">{{ v.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-content-right">
|
||||
<div style="height: 100%" ref="chartsMonitorRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右边 -->
|
||||
<div class="big-data-down-right">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">
|
||||
<span>近7天产品追溯扫码统计</span>
|
||||
<span class="flex-title-small">单位：次</span>
|
||||
</div>
|
||||
<div class="flex-content">
|
||||
<div style="height: 100%" ref="chartsSevenDaysRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">当前任务统计</div>
|
||||
<div class="flex-content">
|
||||
<div class="task">
|
||||
<div class="task-item task-first-item">
|
||||
<div class="task-item-value task-first">25</div>
|
||||
<div class="task-item-label">待办任务</div>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<div class="task-item-box task1">
|
||||
<div class="task-item-value">12</div>
|
||||
<div class="task-item-label">施肥</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<div class="task-item-box task2">
|
||||
<div class="task-item-value">3</div>
|
||||
<div class="task-item-label">施药</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<div class="task-item-box task3">
|
||||
<div class="task-item-value">5</div>
|
||||
<div class="task-item-label">农事</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-item">
|
||||
<span>施肥率</span>
|
||||
<div class="progress-box">
|
||||
<el-progress :percentage="70" color="#43bdf0"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>施药率</span>
|
||||
<div class="progress-box">
|
||||
<el-progress :percentage="36" color="#43bdf0"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>农事率</span>
|
||||
<div class="progress-box">
|
||||
<el-progress :percentage="91" color="#43bdf0"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">
|
||||
<span>近7天投入品记录</span>
|
||||
<span class="flex-title-small">单位：件</span>
|
||||
</div>
|
||||
<div class="flex-content">
|
||||
<div style="height: 100%" ref="chartsInvestmentRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, onMounted, getCurrentInstance, watch, nextTick, onActivated, defineComponent } from 'vue';
|
||||
import ChartHead from '/@/views/chart/head.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-wordcloud';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
import { skyList, dBtnList, chartData4List } from '/@/views/chart/chart';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'chartIndex',
|
||||
components: { ChartHead },
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state = reactive({
|
||||
skyList,
|
||||
dBtnList,
|
||||
chartData4List,
|
||||
myCharts: [],
|
||||
});
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// 初始化中间图表1
|
||||
const initChartsCenterOne = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsCenterOneRef);
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {},
|
||||
series: [
|
||||
{
|
||||
type: 'wordCloud',
|
||||
sizeRange: [12, 40],
|
||||
rotationRange: [0, 0],
|
||||
rotationStep: 45,
|
||||
gridSize: Math.random() * 20 + 5,
|
||||
shape: 'circle',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
textStyle: {
|
||||
fontFamily: 'sans-serif',
|
||||
fontWeight: 'bold',
|
||||
color: function () {
|
||||
return `rgb(${[Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',')})`;
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: 'gfastV3', value: 520 },
|
||||
{ name: 'lyt', value: 520 },
|
||||
{ name: 'next-admin', value: 500 },
|
||||
{ name: '更名', value: 420 },
|
||||
{ name: '智慧农业', value: 520 },
|
||||
{ name: '男神', value: 2.64 },
|
||||
{ name: '好身材', value: 4.03 },
|
||||
{ name: '校草', value: 24.95 },
|
||||
{ name: '酷', value: 4.04 },
|
||||
{ name: '时尚', value: 5.27 },
|
||||
{ name: '阳光活力', value: 5.8 },
|
||||
{ name: '初恋', value: 3.09 },
|
||||
{ name: '英俊潇洒', value: 24.71 },
|
||||
{ name: '霸气', value: 6.33 },
|
||||
{ name: '腼腆', value: 2.55 },
|
||||
{ name: '蠢萌', value: 3.88 },
|
||||
{ name: '青春', value: 8.04 },
|
||||
{ name: '网红', value: 5.87 },
|
||||
{ name: '萌', value: 6.97 },
|
||||
{ name: '认真', value: 2.53 },
|
||||
{ name: '古典', value: 2.49 },
|
||||
{ name: '温柔', value: 3.91 },
|
||||
{ name: '有个性', value: 3.25 },
|
||||
{ name: '可爱', value: 9.93 },
|
||||
{ name: '幽默诙谐', value: 3.65 },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
(<any>state.myCharts).push(myChart);
|
||||
};
|
||||
// 初始化近7天产品追溯扫码统计
|
||||
const initChartsSevenDays = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsSevenDaysRef);
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [12, 32, 11, 34, 90, 23, 21],
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [22, 82, 91, 24, 90, 30, 30],
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [50, 32, 18, 14, 90, 30, 50],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
(<any>state.myCharts).push(myChart);
|
||||
};
|
||||
// 初始化近30天预警总数
|
||||
const initChartsWarning = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsWarningRef);
|
||||
const option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 20,
|
||||
bottom: 30,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '面积模式',
|
||||
type: 'pie',
|
||||
radius: [20, 50],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 8,
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: '监测设备预警' },
|
||||
{ value: 38, name: '天气预警' },
|
||||
{ value: 32, name: '任务预警' },
|
||||
{ value: 30, name: '病虫害预警' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
(<any>state.myCharts).push(myChart);
|
||||
};
|
||||
// 初始化当前设备监测
|
||||
const initChartsMonitor = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
itemStyle: {
|
||||
color: '#289df5',
|
||||
borderColor: '#289df5',
|
||||
areaStyle: {
|
||||
type: 'default',
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
data: [20, 32, 31, 34, 12, 13, 20],
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
(<any>state.myCharts).push(myChart);
|
||||
};
|
||||
// 初始化近7天投入品记录
|
||||
const initChartsInvestment = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsInvestmentRef);
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20, 15, 80, 70, 11, 30],
|
||||
type: 'bar',
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
(<any>state.myCharts).push(myChart);
|
||||
};
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResizeFun = () => {
|
||||
nextTick(() => {
|
||||
for (let i = 0; i < state.myCharts.length; i++) {
|
||||
(<any>state.myCharts[i]).resize();
|
||||
}
|
||||
});
|
||||
};
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResize = () => {
|
||||
window.addEventListener('resize', initEchartsResizeFun);
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initChartsCenterOne();
|
||||
initChartsSevenDays();
|
||||
initChartsWarning();
|
||||
initChartsMonitor();
|
||||
initChartsInvestment();
|
||||
initEchartsResize();
|
||||
});
|
||||
// 由于页面缓存原因，keep-alive
|
||||
onActivated(() => {
|
||||
initEchartsResizeFun();
|
||||
});
|
||||
// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
|
||||
watch(
|
||||
() => isTagsViewCurrenFull.value,
|
||||
() => {
|
||||
initEchartsResizeFun();
|
||||
}
|
||||
);
|
||||
return {
|
||||
initTagViewHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './chart.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,16 @@
|
||||
import {defineComponent,h} from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name:"baiduMap",
|
||||
props:{
|
||||
src:{
|
||||
type:String,
|
||||
default:'',
|
||||
}
|
||||
},
|
||||
setup(prop){
|
||||
return ()=>{
|
||||
return h('script',{src:prop.src,type:'text/javascript'})
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="error layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
|
||||
<div class="error-flex">
|
||||
<div class="left">
|
||||
<div class="left-item">
|
||||
<div class="left-item-animation left-item-num">401</div>
|
||||
<div class="left-item-animation left-item-title">{{ $t('message.noAccess.accessTitle') }}</div>
|
||||
<div class="left-item-animation left-item-msg">{{ $t('message.noAccess.accessMsg') }}</div>
|
||||
<div class="left-item-animation left-item-btn">
|
||||
<el-button type="primary" round @click="onSetAuth">{{ $t('message.noAccess.accessBtn') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img
|
||||
src="https://img-blog.csdnimg.cn/3333f265772a4fa89287993500ecbf96.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_16,color_FFFFFF,t_70,g_se,x_16"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
import { Session } from '/@/utils/storage';
|
||||
|
||||
export default defineComponent({
|
||||
name: '401',
|
||||
setup() {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const onSetAuth = () => {
|
||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS
|
||||
// 清除缓存/token等
|
||||
Session.clear();
|
||||
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
||||
window.location.reload();
|
||||
};
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
return {
|
||||
onSetAuth,
|
||||
initTagViewHeight,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.error {
|
||||
height: 100%;
|
||||
background-color: var(--el-color-white);
|
||||
display: flex;
|
||||
.error-flex {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
height: 350px;
|
||||
width: 900px;
|
||||
.left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
.left-item {
|
||||
.left-item-animation {
|
||||
opacity: 0;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.left-item-num {
|
||||
color: var(--el-color-info);
|
||||
font-size: 55px;
|
||||
}
|
||||
.left-item-title {
|
||||
font-size: 20px;
|
||||
color: var(--el-text-color-primary);
|
||||
margin: 15px 0 5px 0;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.left-item-msg {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
margin-bottom: 30px;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.left-item-btn {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
opacity: 0;
|
||||
animation-name: error-img;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="error layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
|
||||
<div class="error-flex">
|
||||
<div class="left">
|
||||
<div class="left-item">
|
||||
<div class="left-item-animation left-item-num">404</div>
|
||||
<div class="left-item-animation left-item-title">{{ $t('message.notFound.foundTitle') }}</div>
|
||||
<div class="left-item-animation left-item-msg">{{ $t('message.notFound.foundMsg') }}</div>
|
||||
<div class="left-item-animation left-item-btn">
|
||||
<el-button type="primary" round @click="onGoHome">{{ $t('message.notFound.foundBtn') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img
|
||||
src="https://img-blog.csdnimg.cn/9eb1d85a417f4ed1ba7107f149ce3da1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_16,color_FFFFFF,t_70,g_se,x_16"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
|
||||
export default defineComponent({
|
||||
name: '404',
|
||||
setup() {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const router = useRouter();
|
||||
const onGoHome = () => {
|
||||
router.push('/');
|
||||
};
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
return {
|
||||
onGoHome,
|
||||
initTagViewHeight,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.error {
|
||||
height: 100%;
|
||||
background-color: var(--el-color-white);
|
||||
display: flex;
|
||||
.error-flex {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
height: 350px;
|
||||
width: 900px;
|
||||
.left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
.left-item {
|
||||
.left-item-animation {
|
||||
opacity: 0;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.left-item-num {
|
||||
color: var(--el-color-info);
|
||||
font-size: 55px;
|
||||
}
|
||||
.left-item-title {
|
||||
font-size: 20px;
|
||||
color: var(--el-text-color-primary);
|
||||
margin: 15px 0 5px 0;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.left-item-msg {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
margin-bottom: 30px;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.left-item-btn {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
opacity: 0;
|
||||
animation-name: error-img;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<el-card shadow="hover" header="复制剪切演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-clipboard3`，项目地址：https://github.com/JamieCurnow/vue-clipboard3`"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<el-input placeholder="请输入内容" v-model="copyVal">
|
||||
<template #append>
|
||||
<el-button @click="copyText(copyVal)">复制链接</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input placeholder="先点击上方 `复制链接` 按钮，然后 `Ctrl + V` 进行粘贴！ " v-model="shearVal" class="mt15"> </el-input>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
|
||||
import commonFunction from '/@/utils/commonFunction';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funClipboard',
|
||||
setup() {
|
||||
const { copyText } = commonFunction();
|
||||
const state = reactive({
|
||||
copyVal: 'https://gitee.com/lyt-top/vue-next-admin',
|
||||
shearVal: '',
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {});
|
||||
return {
|
||||
copyText,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<codemirror
|
||||
v-model="code"
|
||||
placeholder="Code goes here..."
|
||||
:style="{ height: '400px' }"
|
||||
:autofocus="true"
|
||||
:indent-with-tab="true"
|
||||
:tab-size="2"
|
||||
:extensions="extensions"
|
||||
@ready="handleReady"
|
||||
@change="log('change', $event)"
|
||||
@focus="log('focus', $event)"
|
||||
@blur="log('blur', $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,shallowRef } from 'vue'
|
||||
import { Codemirror } from 'vue-codemirror'
|
||||
import { javascript } from '@codemirror/lang-javascript'
|
||||
import { oneDark } from '@codemirror/theme-one-dark'
|
||||
|
||||
export default defineComponent({
|
||||
name:"demoCodeMirror",
|
||||
components: {
|
||||
Codemirror
|
||||
},
|
||||
setup() {
|
||||
const code = ref(`console.log('Hello, world!')`)
|
||||
const extensions = [javascript(), oneDark]
|
||||
|
||||
// Codemirror EditorView instance ref
|
||||
const view = shallowRef()
|
||||
const handleReady = (payload) => {
|
||||
view.value = payload.view
|
||||
}
|
||||
|
||||
// Status is available at all times via Codemirror EditorView
|
||||
const getCodemirrorStates = () => {
|
||||
const state = view.value.state
|
||||
const ranges = state.selection.ranges
|
||||
const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
|
||||
const cursor = ranges[0].anchor
|
||||
const length = state.doc.length
|
||||
const lines = state.doc.lines
|
||||
// more state info ...
|
||||
// return ...
|
||||
}
|
||||
|
||||
return {
|
||||
code,
|
||||
extensions,
|
||||
handleReady,
|
||||
log: console.log
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="hover" header="数字滚动演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `countup.js`，项目地址：https://github.com/inorganik/countUp.js"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="6" class="mb15" v-for="(v, k) in topCardItemList" :key="k">
|
||||
<div class="countup-card-item countup-card-item-box" :style="{ background: `var(${v.color})` }">
|
||||
<div class="countup-card-item-flex" ref="topCardItemRefs">
|
||||
<div class="countup-card-item-title pb3">{{ v.title }}</div>
|
||||
<div class="countup-card-item-title-num pb6"></div>
|
||||
<div class="countup-card-item-tip pb3">{{ v.tip }}</div>
|
||||
<div class="countup-card-item-tip-num"></div>
|
||||
</div>
|
||||
<i :class="v.icon" :style="{ color: v.iconColor }"></i>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default" @click="refreshCurrent">
|
||||
<el-icon>
|
||||
<ele-RefreshRight />
|
||||
</el-icon>
|
||||
重置/刷新数值
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, onMounted, nextTick, defineComponent } from 'vue';
|
||||
import { CountUp } from 'countup.js';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funCountup',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
topCardItemRefs: null as any,
|
||||
topCardItemList: [
|
||||
{
|
||||
title: '今日访问人数',
|
||||
titleNum: '123',
|
||||
tip: '在场人数',
|
||||
tipNum: '911',
|
||||
color: '--el-color-primary',
|
||||
iconColor: '#ffcb47',
|
||||
icon: 'iconfont icon-jinridaiban',
|
||||
},
|
||||
{
|
||||
title: '实验室总数',
|
||||
titleNum: '123',
|
||||
tip: '使用中',
|
||||
tipNum: '611',
|
||||
color: '--el-color-success',
|
||||
iconColor: '#70cf41',
|
||||
icon: 'iconfont icon-AIshiyanshi',
|
||||
},
|
||||
{
|
||||
title: '申请人数（月）',
|
||||
titleNum: '123',
|
||||
tip: '通过人数',
|
||||
tipNum: '911',
|
||||
color: '--el-color-warning',
|
||||
iconColor: '#dfae64',
|
||||
icon: 'iconfont icon-shenqingkaiban',
|
||||
},
|
||||
{
|
||||
title: '销售情况',
|
||||
titleNum: '123',
|
||||
tip: '销售数',
|
||||
tipNum: '911',
|
||||
color: '--el-color-danger',
|
||||
iconColor: '#e56565',
|
||||
icon: 'iconfont icon-ditu',
|
||||
},
|
||||
],
|
||||
});
|
||||
// 初始化数字滚动
|
||||
const initNumCountUp = () => {
|
||||
nextTick(() => {
|
||||
state.topCardItemRefs.forEach((v: HTMLDivElement) => {
|
||||
new CountUp(v.querySelector('.countup-card-item-title-num') as HTMLDivElement, Math.random() * 10000).start();
|
||||
new CountUp(v.querySelector('.countup-card-item-tip-num') as HTMLDivElement, Math.random() * 1000).start();
|
||||
});
|
||||
});
|
||||
};
|
||||
// 重置/刷新数值
|
||||
const refreshCurrent = () => {
|
||||
initNumCountUp();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initNumCountUp();
|
||||
});
|
||||
return {
|
||||
refreshCurrent,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.countup-card-item {
|
||||
width: 100%;
|
||||
height: 103px;
|
||||
background: var(--el-text-color-secondary);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
.countup-card-item-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.countup-card-item-flex {
|
||||
padding: 0 20px;
|
||||
color: var(--el-color-white);
|
||||
.countup-card-item-title,
|
||||
.countup-card-item-tip {
|
||||
font-size: 13px;
|
||||
}
|
||||
.countup-card-item-title-num {
|
||||
font-size: 18px;
|
||||
}
|
||||
.countup-card-item-tip-num {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="croppers-container">
|
||||
<el-card shadow="hover" header="cropper 图片裁剪">
|
||||
<el-alert
|
||||
title="感谢优秀的 `cropperjs`，项目地址：https://github.com/fengyuanchen/cropperjs"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<div class="cropper-img-warp">
|
||||
<div class="mb15 mt15">
|
||||
<img class="cropper-img" :src="cropperImg" />
|
||||
</div>
|
||||
<el-button type="primary" size="default" @click="onCropperDialogOpen">
|
||||
<el-icon>
|
||||
<ele-Crop />
|
||||
</el-icon>
|
||||
更换头像
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<CropperDialog ref="cropperDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, toRefs, reactive, defineComponent } from 'vue';
|
||||
import CropperDialog from '/@/components/cropper/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funCropper',
|
||||
components: { CropperDialog },
|
||||
setup() {
|
||||
const cropperDialogRef = ref();
|
||||
const state = reactive({
|
||||
cropperImg: 'https://yxh-1301841944.cos.ap-chongqing.myqcloud.com/gfast/2022-06-08/timg.jpg',
|
||||
});
|
||||
// 打开裁剪弹窗
|
||||
const onCropperDialogOpen = () => {
|
||||
cropperDialogRef.value.openDialog(state.cropperImg);
|
||||
};
|
||||
return {
|
||||
cropperDialogRef,
|
||||
onCropperDialogOpen,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.croppers-container {
|
||||
.cropper-img-warp {
|
||||
text-align: center;
|
||||
.cropper-img {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
|
||||
<div class="layout-view-bg-white">
|
||||
<div ref="echartsMap" style="height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts/extension/bmap/bmap';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
import { echartsMapList, echartsMapData } from './mock';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funEchartsMap',
|
||||
setup() {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state: any = reactive({
|
||||
echartsMap: null,
|
||||
echartsMapList,
|
||||
echartsMapData,
|
||||
});
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// echartsMap 将坐标信息和对应物理量的值合在一起
|
||||
const convertData = (data: any) => {
|
||||
let res = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let geoCoord = state.echartsMapData[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
// 初始化 echartsMap
|
||||
const initEchartsMap = () => {
|
||||
const myChart = echarts.init(<HTMLElement>state.echartsMap);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
color: ['#9a60b4', '#ea7ccc'],
|
||||
bmap: {
|
||||
center: [104.114129, 37.550339],
|
||||
zoom: 5,
|
||||
roam: true,
|
||||
mapStyle: {},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'pm2.5',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: convertData(state.echartsMapList),
|
||||
symbolSize: function (val: any) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
encode: {
|
||||
value: 2,
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: convertData(
|
||||
state.echartsMapList
|
||||
.sort(function (a: any, b: any) {
|
||||
return b.value - a.value;
|
||||
})
|
||||
.slice(0, 6)
|
||||
),
|
||||
symbolSize: function (val: any) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
encode: {
|
||||
value: 2,
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke',
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#333',
|
||||
},
|
||||
zlevel: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
//initEchartsMap();
|
||||
});
|
||||
return {
|
||||
initTagViewHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,387 @@
|
||||
// 地图模拟数据
|
||||
export const echartsMapList = [
|
||||
{ name: '海门', value: 9 },
|
||||
{ name: '鄂尔多斯', value: 12 },
|
||||
{ name: '招远', value: 12 },
|
||||
{ name: '舟山', value: 12 },
|
||||
{ name: '齐齐哈尔', value: 14 },
|
||||
{ name: '盐城', value: 15 },
|
||||
{ name: '赤峰', value: 16 },
|
||||
{ name: '青岛', value: 18 },
|
||||
{ name: '乳山', value: 18 },
|
||||
{ name: '金昌', value: 19 },
|
||||
{ name: '泉州', value: 21 },
|
||||
{ name: '莱西', value: 21 },
|
||||
{ name: '日照', value: 21 },
|
||||
{ name: '胶南', value: 22 },
|
||||
{ name: '南通', value: 23 },
|
||||
{ name: '拉萨', value: 24 },
|
||||
{ name: '云浮', value: 24 },
|
||||
{ name: '梅州', value: 25 },
|
||||
{ name: '文登', value: 25 },
|
||||
{ name: '上海', value: 25 },
|
||||
{ name: '攀枝花', value: 25 },
|
||||
{ name: '威海', value: 25 },
|
||||
{ name: '承德', value: 25 },
|
||||
{ name: '厦门', value: 26 },
|
||||
{ name: '汕尾', value: 26 },
|
||||
{ name: '潮州', value: 26 },
|
||||
{ name: '丹东', value: 27 },
|
||||
{ name: '太仓', value: 27 },
|
||||
{ name: '曲靖', value: 27 },
|
||||
{ name: '烟台', value: 28 },
|
||||
{ name: '福州', value: 29 },
|
||||
{ name: '瓦房店', value: 30 },
|
||||
{ name: '即墨', value: 30 },
|
||||
{ name: '抚顺', value: 31 },
|
||||
{ name: '玉溪', value: 31 },
|
||||
{ name: '张家口', value: 31 },
|
||||
{ name: '阳泉', value: 31 },
|
||||
{ name: '莱州', value: 32 },
|
||||
{ name: '湖州', value: 32 },
|
||||
{ name: '汕头', value: 32 },
|
||||
{ name: '昆山', value: 33 },
|
||||
{ name: '宁波', value: 33 },
|
||||
{ name: '湛江', value: 33 },
|
||||
{ name: '揭阳', value: 34 },
|
||||
{ name: '荣成', value: 34 },
|
||||
{ name: '连云港', value: 35 },
|
||||
{ name: '葫芦岛', value: 35 },
|
||||
{ name: '常熟', value: 36 },
|
||||
{ name: '东莞', value: 36 },
|
||||
{ name: '河源', value: 36 },
|
||||
{ name: '淮安', value: 36 },
|
||||
{ name: '泰州', value: 36 },
|
||||
{ name: '南宁', value: 37 },
|
||||
{ name: '营口', value: 37 },
|
||||
{ name: '惠州', value: 37 },
|
||||
{ name: '江阴', value: 37 },
|
||||
{ name: '蓬莱', value: 37 },
|
||||
{ name: '韶关', value: 38 },
|
||||
{ name: '嘉峪关', value: 38 },
|
||||
{ name: '广州', value: 38 },
|
||||
{ name: '延安', value: 38 },
|
||||
{ name: '太原', value: 39 },
|
||||
{ name: '清远', value: 39 },
|
||||
{ name: '中山', value: 39 },
|
||||
{ name: '昆明', value: 39 },
|
||||
{ name: '寿光', value: 40 },
|
||||
{ name: '盘锦', value: 40 },
|
||||
{ name: '长治', value: 41 },
|
||||
{ name: '深圳', value: 360 },
|
||||
{ name: '珠海', value: 42 },
|
||||
{ name: '宿迁', value: 43 },
|
||||
{ name: '咸阳', value: 43 },
|
||||
{ name: '铜川', value: 44 },
|
||||
{ name: '平度', value: 44 },
|
||||
{ name: '佛山', value: 44 },
|
||||
{ name: '海口', value: 44 },
|
||||
{ name: '江门', value: 45 },
|
||||
{ name: '章丘', value: 45 },
|
||||
{ name: '肇庆', value: 46 },
|
||||
{ name: '大连', value: 47 },
|
||||
{ name: '临汾', value: 47 },
|
||||
{ name: '吴江', value: 47 },
|
||||
{ name: '石嘴山', value: 49 },
|
||||
{ name: '沈阳', value: 50 },
|
||||
{ name: '苏州', value: 50 },
|
||||
{ name: '茂名', value: 50 },
|
||||
{ name: '嘉兴', value: 51 },
|
||||
{ name: '长春', value: 51 },
|
||||
{ name: '胶州', value: 52 },
|
||||
{ name: '银川', value: 52 },
|
||||
{ name: '张家港', value: 52 },
|
||||
{ name: '三门峡', value: 53 },
|
||||
{ name: '锦州', value: 54 },
|
||||
{ name: '南昌', value: 54 },
|
||||
{ name: '柳州', value: 54 },
|
||||
{ name: '三亚', value: 54 },
|
||||
{ name: '自贡', value: 56 },
|
||||
{ name: '吉林', value: 56 },
|
||||
{ name: '阳江', value: 57 },
|
||||
{ name: '泸州', value: 57 },
|
||||
{ name: '西宁', value: 57 },
|
||||
{ name: '宜宾', value: 58 },
|
||||
{ name: '呼和浩特', value: 58 },
|
||||
{ name: '成都', value: 58 },
|
||||
{ name: '大同', value: 58 },
|
||||
{ name: '镇江', value: 59 },
|
||||
{ name: '桂林', value: 59 },
|
||||
{ name: '张家界', value: 59 },
|
||||
{ name: '宜兴', value: 59 },
|
||||
{ name: '北海', value: 60 },
|
||||
{ name: '西安', value: 61 },
|
||||
{ name: '金坛', value: 62 },
|
||||
{ name: '东营', value: 62 },
|
||||
{ name: '牡丹江', value: 63 },
|
||||
{ name: '遵义', value: 63 },
|
||||
{ name: '绍兴', value: 63 },
|
||||
{ name: '扬州', value: 64 },
|
||||
{ name: '常州', value: 64 },
|
||||
{ name: '潍坊', value: 65 },
|
||||
{ name: '重庆', value: 66 },
|
||||
{ name: '台州', value: 67 },
|
||||
{ name: '南京', value: 67 },
|
||||
{ name: '滨州', value: 70 },
|
||||
{ name: '贵阳', value: 71 },
|
||||
{ name: '无锡', value: 71 },
|
||||
{ name: '本溪', value: 71 },
|
||||
{ name: '克拉玛依', value: 72 },
|
||||
{ name: '渭南', value: 72 },
|
||||
{ name: '马鞍山', value: 72 },
|
||||
{ name: '宝鸡', value: 72 },
|
||||
{ name: '焦作', value: 75 },
|
||||
{ name: '句容', value: 75 },
|
||||
{ name: '北京', value: 79 },
|
||||
{ name: '徐州', value: 79 },
|
||||
{ name: '衡水', value: 80 },
|
||||
{ name: '包头', value: 80 },
|
||||
{ name: '绵阳', value: 80 },
|
||||
{ name: '乌鲁木齐', value: 84 },
|
||||
{ name: '枣庄', value: 84 },
|
||||
{ name: '杭州', value: 84 },
|
||||
{ name: '淄博', value: 85 },
|
||||
{ name: '鞍山', value: 86 },
|
||||
{ name: '溧阳', value: 86 },
|
||||
{ name: '库尔勒', value: 86 },
|
||||
{ name: '安阳', value: 90 },
|
||||
{ name: '开封', value: 90 },
|
||||
{ name: '济南', value: 92 },
|
||||
{ name: '德阳', value: 93 },
|
||||
{ name: '温州', value: 95 },
|
||||
{ name: '九江', value: 96 },
|
||||
{ name: '邯郸', value: 98 },
|
||||
{ name: '临安', value: 99 },
|
||||
{ name: '兰州', value: 99 },
|
||||
{ name: '沧州', value: 100 },
|
||||
{ name: '临沂', value: 103 },
|
||||
{ name: '南充', value: 104 },
|
||||
{ name: '天津', value: 105 },
|
||||
{ name: '富阳', value: 106 },
|
||||
{ name: '泰安', value: 112 },
|
||||
{ name: '诸暨', value: 112 },
|
||||
{ name: '郑州', value: 113 },
|
||||
{ name: '哈尔滨', value: 114 },
|
||||
{ name: '聊城', value: 116 },
|
||||
{ name: '芜湖', value: 117 },
|
||||
{ name: '唐山', value: 119 },
|
||||
{ name: '平顶山', value: 119 },
|
||||
{ name: '邢台', value: 119 },
|
||||
{ name: '德州', value: 120 },
|
||||
{ name: '济宁', value: 120 },
|
||||
{ name: '荆州', value: 127 },
|
||||
{ name: '宜昌', value: 130 },
|
||||
{ name: '义乌', value: 132 },
|
||||
{ name: '丽水', value: 133 },
|
||||
{ name: '洛阳', value: 134 },
|
||||
{ name: '秦皇岛', value: 136 },
|
||||
{ name: '株洲', value: 143 },
|
||||
{ name: '石家庄', value: 147 },
|
||||
{ name: '莱芜', value: 148 },
|
||||
{ name: '常德', value: 152 },
|
||||
{ name: '保定', value: 153 },
|
||||
{ name: '湘潭', value: 154 },
|
||||
{ name: '金华', value: 157 },
|
||||
{ name: '岳阳', value: 169 },
|
||||
{ name: '长沙', value: 175 },
|
||||
{ name: '衢州', value: 177 },
|
||||
{ name: '廊坊', value: 93 },
|
||||
{ name: '菏泽', value: 194 },
|
||||
{ name: '合肥', value: 229 },
|
||||
{ name: '武汉', value: 273 },
|
||||
{ name: '大庆', value: 279 },
|
||||
];
|
||||
|
||||
// 地图经纬度数据
|
||||
export const echartsMapData = {
|
||||
海门: [121.15, 31.89],
|
||||
鄂尔多斯: [109.781327, 39.608266],
|
||||
招远: [120.38, 37.35],
|
||||
舟山: [122.207216, 29.985295],
|
||||
齐齐哈尔: [123.97, 47.33],
|
||||
盐城: [120.13, 33.38],
|
||||
赤峰: [118.87, 42.28],
|
||||
青岛: [120.33, 36.07],
|
||||
乳山: [121.52, 36.89],
|
||||
金昌: [102.188043, 38.520089],
|
||||
泉州: [118.58, 24.93],
|
||||
莱西: [120.53, 36.86],
|
||||
日照: [119.46, 35.42],
|
||||
胶南: [119.97, 35.88],
|
||||
南通: [121.05, 32.08],
|
||||
拉萨: [91.11, 29.97],
|
||||
云浮: [112.02, 22.93],
|
||||
梅州: [116.1, 24.55],
|
||||
文登: [122.05, 37.2],
|
||||
上海: [121.48, 31.22],
|
||||
攀枝花: [101.718637, 26.582347],
|
||||
威海: [122.1, 37.5],
|
||||
承德: [117.93, 40.97],
|
||||
厦门: [118.1, 24.46],
|
||||
汕尾: [115.375279, 22.786211],
|
||||
潮州: [116.63, 23.68],
|
||||
丹东: [124.37, 40.13],
|
||||
太仓: [121.1, 31.45],
|
||||
曲靖: [103.79, 25.51],
|
||||
烟台: [121.39, 37.52],
|
||||
福州: [119.3, 26.08],
|
||||
瓦房店: [121.979603, 39.627114],
|
||||
即墨: [120.45, 36.38],
|
||||
抚顺: [123.97, 41.97],
|
||||
玉溪: [102.52, 24.35],
|
||||
张家口: [114.87, 40.82],
|
||||
阳泉: [113.57, 37.85],
|
||||
莱州: [119.942327, 37.177017],
|
||||
湖州: [120.1, 30.86],
|
||||
汕头: [116.69, 23.39],
|
||||
昆山: [120.95, 31.39],
|
||||
宁波: [121.56, 29.86],
|
||||
湛江: [110.359377, 21.270708],
|
||||
揭阳: [116.35, 23.55],
|
||||
荣成: [122.41, 37.16],
|
||||
连云港: [119.16, 34.59],
|
||||
葫芦岛: [120.836932, 40.711052],
|
||||
常熟: [120.74, 31.64],
|
||||
东莞: [113.75, 23.04],
|
||||
河源: [114.68, 23.73],
|
||||
淮安: [119.15, 33.5],
|
||||
泰州: [119.9, 32.49],
|
||||
南宁: [108.33, 22.84],
|
||||
营口: [122.18, 40.65],
|
||||
惠州: [114.4, 23.09],
|
||||
江阴: [120.26, 31.91],
|
||||
蓬莱: [120.75, 37.8],
|
||||
韶关: [113.62, 24.84],
|
||||
嘉峪关: [98.289152, 39.77313],
|
||||
广州: [113.23, 23.16],
|
||||
延安: [109.47, 36.6],
|
||||
太原: [112.53, 37.87],
|
||||
清远: [113.01, 23.7],
|
||||
中山: [113.38, 22.52],
|
||||
昆明: [102.73, 25.04],
|
||||
寿光: [118.73, 36.86],
|
||||
盘锦: [122.070714, 41.119997],
|
||||
长治: [113.08, 36.18],
|
||||
深圳: [114.07, 22.62],
|
||||
珠海: [113.52, 22.3],
|
||||
宿迁: [118.3, 33.96],
|
||||
咸阳: [108.72, 34.36],
|
||||
铜川: [109.11, 35.09],
|
||||
平度: [119.97, 36.77],
|
||||
佛山: [113.11, 23.05],
|
||||
海口: [110.35, 20.02],
|
||||
江门: [113.06, 22.61],
|
||||
章丘: [117.53, 36.72],
|
||||
肇庆: [112.44, 23.05],
|
||||
大连: [121.62, 38.92],
|
||||
临汾: [111.5, 36.08],
|
||||
吴江: [120.63, 31.16],
|
||||
石嘴山: [106.39, 39.04],
|
||||
沈阳: [123.38, 41.8],
|
||||
苏州: [120.62, 31.32],
|
||||
茂名: [110.88, 21.68],
|
||||
嘉兴: [120.76, 30.77],
|
||||
长春: [125.35, 43.88],
|
||||
胶州: [120.03336, 36.264622],
|
||||
银川: [106.27, 38.47],
|
||||
张家港: [120.555821, 31.875428],
|
||||
三门峡: [111.19, 34.76],
|
||||
锦州: [121.15, 41.13],
|
||||
南昌: [115.89, 28.68],
|
||||
柳州: [109.4, 24.33],
|
||||
三亚: [109.511909, 18.252847],
|
||||
自贡: [104.778442, 29.33903],
|
||||
吉林: [126.57, 43.87],
|
||||
阳江: [111.95, 21.85],
|
||||
泸州: [105.39, 28.91],
|
||||
西宁: [101.74, 36.56],
|
||||
宜宾: [104.56, 29.77],
|
||||
呼和浩特: [111.65, 40.82],
|
||||
成都: [104.06, 30.67],
|
||||
大同: [113.3, 40.12],
|
||||
镇江: [119.44, 32.2],
|
||||
桂林: [110.28, 25.29],
|
||||
张家界: [110.479191, 29.117096],
|
||||
宜兴: [119.82, 31.36],
|
||||
北海: [109.12, 21.49],
|
||||
西安: [108.95, 34.27],
|
||||
金坛: [119.56, 31.74],
|
||||
东营: [118.49, 37.46],
|
||||
牡丹江: [129.58, 44.6],
|
||||
遵义: [106.9, 27.7],
|
||||
绍兴: [120.58, 30.01],
|
||||
扬州: [119.42, 32.39],
|
||||
常州: [119.95, 31.79],
|
||||
潍坊: [119.1, 36.62],
|
||||
重庆: [106.54, 29.59],
|
||||
台州: [121.420757, 28.656386],
|
||||
南京: [118.78, 32.04],
|
||||
滨州: [118.03, 37.36],
|
||||
贵阳: [106.71, 26.57],
|
||||
无锡: [120.29, 31.59],
|
||||
本溪: [123.73, 41.3],
|
||||
克拉玛依: [84.77, 45.59],
|
||||
渭南: [109.5, 34.52],
|
||||
马鞍山: [118.48, 31.56],
|
||||
宝鸡: [107.15, 34.38],
|
||||
焦作: [113.21, 35.24],
|
||||
句容: [119.16, 31.95],
|
||||
北京: [116.46, 39.92],
|
||||
徐州: [117.2, 34.26],
|
||||
衡水: [115.72, 37.72],
|
||||
包头: [110, 40.58],
|
||||
绵阳: [104.73, 31.48],
|
||||
乌鲁木齐: [87.68, 43.77],
|
||||
枣庄: [117.57, 34.86],
|
||||
杭州: [120.19, 30.26],
|
||||
淄博: [118.05, 36.78],
|
||||
鞍山: [122.85, 41.12],
|
||||
溧阳: [119.48, 31.43],
|
||||
库尔勒: [86.06, 41.68],
|
||||
安阳: [114.35, 36.1],
|
||||
开封: [114.35, 34.79],
|
||||
济南: [117, 36.65],
|
||||
德阳: [104.37, 31.13],
|
||||
温州: [120.65, 28.01],
|
||||
九江: [115.97, 29.71],
|
||||
邯郸: [114.47, 36.6],
|
||||
临安: [119.72, 30.23],
|
||||
兰州: [103.73, 36.03],
|
||||
沧州: [116.83, 38.33],
|
||||
临沂: [118.35, 35.05],
|
||||
南充: [106.110698, 30.837793],
|
||||
天津: [117.2, 39.13],
|
||||
富阳: [119.95, 30.07],
|
||||
泰安: [117.13, 36.18],
|
||||
诸暨: [120.23, 29.71],
|
||||
郑州: [113.65, 34.76],
|
||||
哈尔滨: [126.63, 45.75],
|
||||
聊城: [115.97, 36.45],
|
||||
芜湖: [118.38, 31.33],
|
||||
唐山: [118.02, 39.63],
|
||||
平顶山: [113.29, 33.75],
|
||||
邢台: [114.48, 37.05],
|
||||
德州: [116.29, 37.45],
|
||||
济宁: [116.59, 35.38],
|
||||
荆州: [112.239741, 30.335165],
|
||||
宜昌: [111.3, 30.7],
|
||||
义乌: [120.06, 29.32],
|
||||
丽水: [119.92, 28.45],
|
||||
洛阳: [112.44, 34.7],
|
||||
秦皇岛: [119.57, 39.95],
|
||||
株洲: [113.16, 27.83],
|
||||
石家庄: [114.48, 38.03],
|
||||
莱芜: [117.67, 36.19],
|
||||
常德: [111.69, 29.05],
|
||||
保定: [115.48, 38.85],
|
||||
湘潭: [112.91, 27.87],
|
||||
金华: [119.64, 29.12],
|
||||
岳阳: [113.09, 29.37],
|
||||
长沙: [113, 28.21],
|
||||
衢州: [118.88, 28.97],
|
||||
廊坊: [116.7, 39.53],
|
||||
菏泽: [115.480656, 35.23375],
|
||||
合肥: [117.27, 31.86],
|
||||
武汉: [114.31, 30.52],
|
||||
大庆: [125.03, 46.58],
|
||||
};
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="grid-layout-container">
|
||||
<el-card shadow="hover" header="vue-grid-layout 拖拽布局演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-grid-layout`，项目地址：https://github.com/jbaysolutions/vue-grid-layout"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<grid-layout
|
||||
v-model:layout="layouts"
|
||||
:col-num="12"
|
||||
:row-height="30"
|
||||
:is-draggable="true"
|
||||
:is-resizable="true"
|
||||
:is-mirrored="false"
|
||||
:vertical-compact="true"
|
||||
:margin="[10, 10]"
|
||||
:use-css-transforms="true"
|
||||
>
|
||||
<grid-item v-for="item in layouts" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
|
||||
<div class="w100 h100 flex">
|
||||
<span class="flex-margin font14">{{ item.i }}</span>
|
||||
</div>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FunGridLayout',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
layouts: [
|
||||
{ x: 0, y: 0, w: 2, h: 2, i: '0' },
|
||||
{ x: 2, y: 0, w: 2, h: 4, i: '1' },
|
||||
{ x: 4, y: 0, w: 2, h: 5, i: '2' },
|
||||
{ x: 6, y: 0, w: 2, h: 3, i: '3' },
|
||||
{ x: 8, y: 0, w: 2, h: 3, i: '4' },
|
||||
{ x: 10, y: 0, w: 2, h: 3, i: '5' },
|
||||
{ x: 0, y: 5, w: 2, h: 5, i: '6' },
|
||||
],
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.grid-layout-container {
|
||||
.vue-grid-item {
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div ref="printRef">
|
||||
<el-card shadow="hover" header="打印演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<el-button @click="onPrintJs" size="default" type="primary">
|
||||
<SvgIcon name="iconfont icon-dayin" />
|
||||
点击打印演示
|
||||
</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent } from 'vue';
|
||||
import printJs from 'print-js';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funPrintJs',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
printRef: null as null | HTMLDivElement,
|
||||
});
|
||||
// 打印点击
|
||||
const onPrintJs = () => {
|
||||
printJs({
|
||||
printable: state.printRef,
|
||||
type: 'html',
|
||||
css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', '//unpkg.com/element-plus/dist/index.css'],
|
||||
scanStyles: false,
|
||||
style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
|
||||
});
|
||||
};
|
||||
return {
|
||||
onPrintJs,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="qrcode-container">
|
||||
<el-card shadow="hover" header="qrcodejs2 二维码生成">
|
||||
<el-alert
|
||||
title="感谢优秀的 `qrcodejs2`，项目地址：https://github.com/davidshimjs/qrcodejs"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<div class="qrcode-img-warp">
|
||||
<div class="mb30 mt30 qrcode-img">
|
||||
<div class="qrcode" ref="qrcodeRef"></div>
|
||||
</div>
|
||||
<el-button type="primary" size="default" @click="onInitQrcode">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重新生成
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent } from 'vue';
|
||||
import QRCode from 'qrcodejs2-fixes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funQrcode',
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const state = reactive({
|
||||
qrcode: '',
|
||||
});
|
||||
// 初始化生成二维码
|
||||
const initQrcode = () => {
|
||||
new QRCode(proxy.$refs.qrcodeRef, {
|
||||
text: `https://lyt-top.gitee.io/vue-next-admin-preview/#/login?t=${new Date().getTime()}`,
|
||||
width: 125,
|
||||
height: 125,
|
||||
colorDark: '#000000',
|
||||
colorLight: '#ffffff',
|
||||
});
|
||||
};
|
||||
// 重新生成
|
||||
const onInitQrcode = () => {
|
||||
proxy.$refs.qrcodeRef.innerHTML = '';
|
||||
initQrcode();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initQrcode();
|
||||
});
|
||||
return {
|
||||
onInitQrcode,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.qrcode-container {
|
||||
.qrcode-img-warp {
|
||||
text-align: center;
|
||||
.qrcode-img {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 125px;
|
||||
.qrcode {
|
||||
margin: auto;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="splitpanes-container">
|
||||
<el-card shadow="hover" header="splitpanes 窗格拆分器">
|
||||
<el-alert
|
||||
title="感谢优秀的 `splitpanes`，项目地址：https://github.com/antoniandre/splitpanes"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<splitpanes class="default-theme" @resize="paneSize = $event[0].size" style="height: 500px">
|
||||
<pane :size="32"> 1 </pane>
|
||||
<pane :size="36">
|
||||
<splitpanes class="default-theme" :horizontal="true">
|
||||
<pane :size="100"> 2 </pane>
|
||||
<pane :size="100"> 3 </pane>
|
||||
</splitpanes>
|
||||
</pane>
|
||||
<pane :size="32"> 4 </pane>
|
||||
</splitpanes>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
import { Splitpanes, Pane } from 'splitpanes';
|
||||
import 'splitpanes/dist/splitpanes.css';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funSplitpanes',
|
||||
components: { Splitpanes, Pane },
|
||||
setup() {
|
||||
const state = reactive({
|
||||
paneSize: 50,
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.splitpanes__pane {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: 70px;
|
||||
color: var(--el-color-primary-light-5);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
background-color: var(--el-color-primary) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="fun-tagsview">
|
||||
<NoticeBar
|
||||
text="已删除非当前页 tagsView 演示，后续有时间可以再加回来！，tagsview 支持多标签（参数不同）、单标签共用（参数不同）"
|
||||
background="#ecf5ff"
|
||||
color="#409eff"
|
||||
/>
|
||||
<el-card shadow="hover" header="tagsView 当前页演示" class="mt15">
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default" @click="refreshCurrentTagsView">
|
||||
<el-icon>
|
||||
<ele-RefreshRight />
|
||||
</el-icon>
|
||||
刷新当前页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default" @click="closeCurrentTagsView">
|
||||
<el-icon>
|
||||
<ele-Close />
|
||||
</el-icon>
|
||||
关闭当前页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="warning" size="default" @click="closeOtherTagsView">
|
||||
<el-icon>
|
||||
<ele-CircleClose />
|
||||
</el-icon>
|
||||
关闭其它
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default" @click="closeAllTagsView">
|
||||
<el-icon>
|
||||
<ele-FolderDelete />
|
||||
</el-icon>
|
||||
全部关闭
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="default" @click="openCurrenFullscreen">
|
||||
<el-icon>
|
||||
<ele-FullScreen />
|
||||
</el-icon>
|
||||
当前页全屏
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { getCurrentInstance, reactive, toRefs, defineComponent } from 'vue';
|
||||
import NoticeBar from '/@/components/noticeBar/index.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funTagsView',
|
||||
components: { NoticeBar },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const route = useRoute();
|
||||
const state = reactive({});
|
||||
// 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
|
||||
// 1、刷新当前 tagsView
|
||||
const refreshCurrentTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 0, ...route }));
|
||||
};
|
||||
// 2、关闭当前 tagsView
|
||||
const closeCurrentTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
|
||||
};
|
||||
// 3、关闭其它 tagsView
|
||||
const closeOtherTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 2, ...route }));
|
||||
};
|
||||
// 4、关闭全部 tagsView
|
||||
const closeAllTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 3, ...route }));
|
||||
};
|
||||
// 5、开启当前页面全屏
|
||||
const openCurrenFullscreen = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 4, ...route }));
|
||||
};
|
||||
return {
|
||||
refreshCurrentTagsView,
|
||||
closeCurrentTagsView,
|
||||
closeOtherTagsView,
|
||||
closeAllTagsView,
|
||||
openCurrenFullscreen,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.fun-tagsview {
|
||||
.fun-tagsview-from-item {
|
||||
:deep(.el-form-item__content) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<el-form ref="loginForm" size="large" class="login-content-form" :model="ruleForm" :rules="formRules">
|
||||
<el-form-item class="login-animation1" prop="username">
|
||||
<el-input
|
||||
type="text"
|
||||
:placeholder="$t('message.account.accountPlaceholder1')"
|
||||
v-model="ruleForm.username"
|
||||
clearable autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><ele-User /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation2" prop="password">
|
||||
<el-input
|
||||
:type="isShowPassword ? 'text' : 'password'"
|
||||
:placeholder="$t('message.account.accountPlaceholder2')"
|
||||
v-model="ruleForm.password"
|
||||
autocomplete="off"
|
||||
@keyup.enter="onSignIn"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<i
|
||||
class="iconfont el-input__icon login-content-password"
|
||||
:class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
>
|
||||
</i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation3" prop="verifyCode">
|
||||
<el-col :span="15">
|
||||
<el-input
|
||||
type="text"
|
||||
maxlength="4"
|
||||
:placeholder="$t('message.account.accountPlaceholder3')"
|
||||
v-model="ruleForm.verifyCode"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
@keyup.enter="onSignIn"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><ele-Position /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="1"></el-col>
|
||||
<el-col :span="8">
|
||||
<div class="login-content-code">
|
||||
<img
|
||||
class="login-content-code-img"
|
||||
@click="getCaptcha"
|
||||
width="130"
|
||||
height="38"
|
||||
:src="captchaSrc"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation4">
|
||||
<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
|
||||
<span>{{ $t('message.account.accountBtnText') }}</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
toRefs,
|
||||
reactive,
|
||||
defineComponent,
|
||||
computed,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
ref, unref
|
||||
} from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import Cookies from 'js-cookie';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
|
||||
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
||||
import { Session } from '/@/utils/storage';
|
||||
import { formatAxis } from '/@/utils/formatTime';
|
||||
import { NextLoading } from '/@/utils/loading';
|
||||
import {login,captcha} from "/@/api/login";
|
||||
export default defineComponent({
|
||||
name: 'loginAccount',
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
const {proxy} = <any>getCurrentInstance();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const loginForm = ref(null)
|
||||
const state = reactive({
|
||||
isShowPassword: false,
|
||||
ruleForm: {
|
||||
username: 'demo',
|
||||
password: '123456',
|
||||
verifyCode: '',
|
||||
verifyKey:''
|
||||
},
|
||||
formRules:{
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "用户名不能为空" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "密码不能为空" }
|
||||
],
|
||||
verifyCode: [{ required: true, trigger: "blur", message: "验证码不能为空" }]
|
||||
},
|
||||
loading: {
|
||||
signIn: false,
|
||||
},
|
||||
captchaSrc:'',
|
||||
});
|
||||
onMounted(() => {
|
||||
getCaptcha();
|
||||
});
|
||||
const getCaptcha = () => {
|
||||
captcha().then((res:any)=>{
|
||||
state.captchaSrc = res.data.img
|
||||
state.ruleForm.verifyKey = res.data.key
|
||||
})
|
||||
};
|
||||
// 时间获取
|
||||
const currentTime = computed(() => {
|
||||
return formatAxis(new Date());
|
||||
});
|
||||
// 登录
|
||||
const onSignIn = async () => {
|
||||
if(state.loading.signIn){
|
||||
return
|
||||
}
|
||||
const formWrap = unref(loginForm) as any;
|
||||
if (!formWrap) return;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if(valid){
|
||||
state.loading.signIn = true;
|
||||
login(state.ruleForm).then(async (res:any)=>{
|
||||
const userInfo = res.data.userInfo
|
||||
userInfo.avatar = proxy.getUpFileUrl(userInfo.avatar)
|
||||
// 存储 token 到浏览器缓存
|
||||
Session.set('token', res.data.token);
|
||||
// 存储用户信息到浏览器缓存
|
||||
Session.set('userInfo', userInfo);
|
||||
// 设置用户菜单
|
||||
Session.set('userMenu',res.data.menuList)
|
||||
// 设置按钮权限
|
||||
Session.set('permissions',res.data.permissions)
|
||||
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
|
||||
Cookies.set('username', state.ruleForm.username);
|
||||
if (!themeConfig.value.isRequestRoutes) {
|
||||
// 前端控制路由，2、请注意执行顺序
|
||||
await initFrontEndControlRoutes();
|
||||
signInSuccess();
|
||||
} else {
|
||||
// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
|
||||
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
|
||||
await initBackEndControlRoutes();
|
||||
// 执行完 initBackEndControlRoutes，再执行 signInSuccess
|
||||
signInSuccess();
|
||||
}
|
||||
}).catch(()=>{
|
||||
state.loading.signIn = false;
|
||||
getCaptcha();
|
||||
})
|
||||
}
|
||||
})
|
||||
};
|
||||
// 登录成功后的跳转
|
||||
const signInSuccess = () => {
|
||||
// 初始化登录成功时间问候语
|
||||
let currentTimeInfo = currentTime.value;
|
||||
// 登录成功，跳到转首页
|
||||
// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
|
||||
if (route.query?.redirect) {
|
||||
router.push({
|
||||
path: <string>route.query?.redirect,
|
||||
query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
|
||||
});
|
||||
} else {
|
||||
router.push('/');
|
||||
}
|
||||
// 登录成功提示
|
||||
// 关闭 loading
|
||||
state.loading.signIn = true;
|
||||
const signInText = t('message.signInText');
|
||||
ElMessage.success(`${currentTimeInfo}，${signInText}`);
|
||||
// 添加 loading，防止第一次进入界面时出现短暂空白
|
||||
NextLoading.start();
|
||||
};
|
||||
return {
|
||||
onSignIn,
|
||||
getCaptcha,
|
||||
loginForm,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-content-form {
|
||||
margin-top: 20px;
|
||||
@for $i from 1 through 4 {
|
||||
.login-animation#{$i} {
|
||||
opacity: 0;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i/10) + s;
|
||||
}
|
||||
}
|
||||
.login-content-password {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
.login-content-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.login-content-code-img {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid rgb(220, 223, 230);
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
&:hover {
|
||||
border-color: #c0c4cc;
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-content-submit {
|
||||
width: 100%;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 300;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<el-form size="large" class="login-content-form">
|
||||
<el-form-item class="login-animation1">
|
||||
<el-input type="text" :placeholder="$t('message.mobile.placeholder1')" v-model="ruleForm.userName" clearable autocomplete="off">
|
||||
<template #prefix>
|
||||
<i class="iconfont icon-dianhua el-input__icon"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation2">
|
||||
<el-col :span="15">
|
||||
<el-input type="text" maxlength="4" :placeholder="$t('message.mobile.placeholder2')" v-model="ruleForm.code" clearable autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><ele-Position /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="1"></el-col>
|
||||
<el-col :span="8">
|
||||
<el-button class="login-content-code">{{ $t('message.mobile.codeText') }}</el-button>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation3">
|
||||
<el-button round type="primary" class="login-content-submit">
|
||||
<span>{{ $t('message.mobile.btnText') }}</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<div class="font12 mt30 login-animation4 login-msg">{{ $t('message.mobile.msgText') }}</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface LoginMobileState {
|
||||
userName: any;
|
||||
code: string | number | undefined;
|
||||
}
|
||||
|
||||
// 定义对象与类型
|
||||
const ruleForm: LoginMobileState = {
|
||||
userName: '',
|
||||
code: '',
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'loginMobile',
|
||||
setup() {
|
||||
const state = reactive({ ruleForm });
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-content-form {
|
||||
margin-top: 20px;
|
||||
@for $i from 1 through 4 {
|
||||
.login-animation#{$i} {
|
||||
opacity: 0;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i/10) + s;
|
||||
}
|
||||
}
|
||||
.login-content-code {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.login-content-submit {
|
||||
width: 100%;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 300;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.login-msg {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="login-scan-container">
|
||||
<div ref="qrcodeRef"></div>
|
||||
<div class="font12 mt20 login-msg">{{ $t('message.scan.text') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent, onMounted } from 'vue';
|
||||
import QRCode from 'qrcodejs2-fixes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'loginScan',
|
||||
setup() {
|
||||
const qrcodeRef = ref<HTMLElement | null>(null);
|
||||
// 初始化生成二维码
|
||||
const initQrcode = () => {
|
||||
(qrcodeRef.value as HTMLElement).innerHTML = '';
|
||||
new QRCode(qrcodeRef.value, {
|
||||
text: `https://qm.qq.com/cgi-bin/qm/qr?k=CDO9yYdygFMKdQihlUXj4-Y0RDEhPTsh&authKey=vw/uQT5H4L/Kb0zT1gj7dd0PVtUDm9RdWqz4cztJb/QmPaSdyS/yeRHhjZaUj43v&noverify=0`,
|
||||
width: 260,
|
||||
height: 260,
|
||||
colorDark: '#000000',
|
||||
colorLight: '#ffffff',
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initQrcode();
|
||||
});
|
||||
return { qrcodeRef };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-scan-animation {
|
||||
opacity: 0;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.login-scan-container {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
@extend .login-scan-animation;
|
||||
animation-delay: 0.1s;
|
||||
:deep(img) {
|
||||
margin: auto;
|
||||
}
|
||||
.login-msg {
|
||||
color: var(--el-text-color-placeholder);
|
||||
@extend .login-scan-animation;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-content-out">
|
||||
<div class="login-content">
|
||||
<div class="login-content-main">
|
||||
<div class="login-icon-group">
|
||||
<div class="login-icon-group-title">
|
||||
<img :src="logoMini" />
|
||||
<div class="login-icon-group-title-text font25">{{ getThemeConfig.globalViceTitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isScan">
|
||||
<el-tabs v-model="tabsActiveName">
|
||||
<el-tab-pane :label="$t('message.label.one1')" name="account">
|
||||
<Account />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('message.label.two2')" name="mobile">
|
||||
<Mobile />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<Scan v-if="isScan" />
|
||||
<div class="login-content-main-sacn" @click="isScan = !isScan">
|
||||
<i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
|
||||
<div class="login-content-main-sacn-delta"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-footer">
|
||||
<div class="login-footer-content mt15">
|
||||
<div class="login-footer-content-warp">
|
||||
<div>Copyright © 2021-2023 g-fast.cn All Rights Reserved.</div>
|
||||
<div class="mt5">云南奇讯科技有限公司版权所有</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import logoMini from '/@/assets/logo-mini.svg';
|
||||
import loginIconTwo from '/@/assets/login-icon-two.svg';
|
||||
import { NextLoading } from '/@/utils/loading';
|
||||
import Account from '/@/views/login/component/account.vue';
|
||||
import Mobile from '/@/views/login/component/mobile.vue';
|
||||
import Scan from '/@/views/login/component/scan.vue';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface LoginState {
|
||||
tabsActiveName: string;
|
||||
isScan: boolean;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'loginIndex',
|
||||
components: { Account, Mobile, Scan },
|
||||
setup() {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const state = reactive<LoginState>({
|
||||
tabsActiveName: 'account',
|
||||
isScan: false,
|
||||
});
|
||||
// 获取布局配置信息
|
||||
const getThemeConfig = computed(() => {
|
||||
return themeConfig.value;
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
NextLoading.done();
|
||||
});
|
||||
return {
|
||||
logoMini,
|
||||
loginIconTwo,
|
||||
getThemeConfig,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-image: url("/@/assets/bg.jpg");
|
||||
background-size: cover;
|
||||
.login-icon-group {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.login-icon-group-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 80px;
|
||||
height: 70px;
|
||||
}
|
||||
&-text {
|
||||
padding-left: 5px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
&-icon {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.login-content-out {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.login-content {
|
||||
width: 500px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
background-color: var(--el-color-white);
|
||||
border: 5px solid var(--el-color-primary-light-8);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
.login-content-main {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
.login-content-title {
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
letter-spacing: 4px;
|
||||
margin: 15px 0 30px;
|
||||
white-space: nowrap;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.login-content-main-sacn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.3s;
|
||||
color: var(--el-text-color-primary);
|
||||
&-delta {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
height: 70px;
|
||||
z-index: 2;
|
||||
top: 2px;
|
||||
right: 21px;
|
||||
background: var(--el-color-white);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
transition: all ease 0.3s;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
i {
|
||||
width: 47px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
font-size: 48px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-footer{
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
width: 100%;
|
||||
&-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
&-warp {
|
||||
margin: auto;
|
||||
color: #e0e3e9;
|
||||
text-align: center;
|
||||
animation: error-num 1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="notice-bar-container">
|
||||
<el-card shadow="hover" header="滚动通知栏：默认">
|
||||
<NoticeBar
|
||||
text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
|
||||
的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="滚动通知栏：设置样式" class="mt15">
|
||||
<NoticeBar
|
||||
text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
|
||||
的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
|
||||
leftIcon="iconfont icon-tongzhi2"
|
||||
rightIcon="ele-ArrowRight"
|
||||
background="#ecf5ff"
|
||||
color="#409eff"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="滚动通知栏：搭配 NoticeBar 和 Carousel 走马灯 组件可以实现垂直滚动的效果" class="mt15">
|
||||
<NoticeBar :scrollable="true">
|
||||
<el-carousel height="40px" direction="vertical" :autoplay="true" indicator-position="none" :interval="3000">
|
||||
<el-carousel-item v-for="v in noticeList" :key="v">{{ v }} </el-carousel-item>
|
||||
</el-carousel>
|
||||
</NoticeBar>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="滚动通知栏：参数" class="mt15">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="a1" label="参数"> </el-table-column>
|
||||
<el-table-column prop="a2" label="说明"> </el-table-column>
|
||||
<el-table-column prop="a3" label="类型"> </el-table-column>
|
||||
<el-table-column prop="a4" label="可选值"> </el-table-column>
|
||||
<el-table-column prop="a5" label="默认值"> </el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="图标选择器(宽度自动)：事件" class="mt15">
|
||||
<el-table :data="tableData1" style="width: 100%">
|
||||
<el-table-column prop="a1" label="事件名称"> </el-table-column>
|
||||
<el-table-column prop="a2" label="说明"> </el-table-column>
|
||||
<el-table-column prop="a3" label="类型"> </el-table-column>
|
||||
<el-table-column prop="a4" label="回调参数"> </el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
import NoticeBar from '/@/components/noticeBar/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'makeNoticeBar',
|
||||
components: { NoticeBar },
|
||||
setup() {
|
||||
const state = reactive({
|
||||
noticeList: [
|
||||
'🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等',
|
||||
'适配手机、平板、pc的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）',
|
||||
'仓库地址：https://gitee.com/lyt-top/vue-next-admin',
|
||||
'演示地址：https://lyt-top.gitee.io/vue-next-admin-preview/#/login',
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
a1: 'mode',
|
||||
a2: '通知栏模式，用于右侧 icon 图标点击',
|
||||
a3: 'string',
|
||||
a4: 'closeable / link',
|
||||
a5: '',
|
||||
},
|
||||
{
|
||||
a1: 'text',
|
||||
a2: '通知文本内容，scrollable 为 false 时生效',
|
||||
a3: 'string',
|
||||
a4: '',
|
||||
a5: '',
|
||||
},
|
||||
{
|
||||
a1: 'color',
|
||||
a2: '通知文本颜色',
|
||||
a3: 'string',
|
||||
a4: '',
|
||||
a5: '#e6a23c',
|
||||
},
|
||||
{
|
||||
a1: 'background',
|
||||
a2: '通知背景色',
|
||||
a3: 'string',
|
||||
a4: '',
|
||||
a5: '#fdf6ec',
|
||||
},
|
||||
{
|
||||
a1: 'size',
|
||||
a2: '字体大小，单位px',
|
||||
a3: 'number / string',
|
||||
a4: '',
|
||||
a5: '14',
|
||||
},
|
||||
{
|
||||
a1: 'height',
|
||||
a2: '通知栏高度，单位px',
|
||||
a3: 'number / string',
|
||||
a4: '',
|
||||
a5: '40',
|
||||
},
|
||||
{
|
||||
a1: 'delay',
|
||||
a2: '动画延迟时间 (s)',
|
||||
a3: 'number / string',
|
||||
a4: '',
|
||||
a5: '1',
|
||||
},
|
||||
{
|
||||
a1: 'speed',
|
||||
a2: '滚动速率 (px/s)',
|
||||
a3: 'number / string',
|
||||
a4: '',
|
||||
a5: '100',
|
||||
},
|
||||
{
|
||||
a1: 'scrollable',
|
||||
a2: '是否开启垂直滚动',
|
||||
a3: 'boolean',
|
||||
a4: 'true',
|
||||
a5: 'false',
|
||||
},
|
||||
{
|
||||
a1: 'leftIcon',
|
||||
a2: '自定义左侧图标',
|
||||
a3: 'string',
|
||||
a4: '',
|
||||
a5: '',
|
||||
},
|
||||
{
|
||||
a1: 'rightIcon',
|
||||
a2: '自定义右侧图标',
|
||||
a3: 'string',
|
||||
a4: '',
|
||||
a5: '',
|
||||
},
|
||||
],
|
||||
tableData1: [
|
||||
{
|
||||
a1: 'close',
|
||||
a2: '通知栏模式（mode）closeable 时回调事件',
|
||||
a3: 'function',
|
||||
a4: '',
|
||||
},
|
||||
{
|
||||
a1: 'link',
|
||||
a2: '通知栏模式（mode）link 时回调事件',
|
||||
a3: 'function',
|
||||
a4: '',
|
||||
},
|
||||
],
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="selector-container">
|
||||
<el-card shadow="hover" header="图标选择器(宽度自动)：">
|
||||
<IconSelector @get="onGetIcon" @clear="onClearIcon" v-model="modelIcon" />
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="图标选择器(宽度自动)：参数" class="mt15">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="a1" label="参数"> </el-table-column>
|
||||
<el-table-column prop="a2" label="说明"> </el-table-column>
|
||||
<el-table-column prop="a3" label="类型"> </el-table-column>
|
||||
<el-table-column prop="a4" label="可选值"> </el-table-column>
|
||||
<el-table-column prop="a5" label="默认值"> </el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="图标选择器(宽度自动)：事件" class="mt15">
|
||||
<el-table :data="tableData1" style="width: 100%">
|
||||
<el-table-column prop="a1" label="事件名称"> </el-table-column>
|
||||
<el-table-column prop="a2" label="说明"> </el-table-column>
|
||||
<el-table-column prop="a3" label="类型"> </el-table-column>
|
||||
<el-table-column prop="a4" label="回调参数"> </el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
import IconSelector from '/@/components/iconSelector/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'makeSelector',
|
||||
components: { IconSelector },
|
||||
setup() {
|
||||
const state = reactive({
|
||||
modelIcon: '',
|
||||
tableData: [
|
||||
{
|
||||
a1: 'prepend',
|
||||
a2: '输入框前置内容，只能字体图标',
|
||||
a3: 'string',
|
||||
a4: '',
|
||||
a5: 'ele-Pointer',
|
||||
},
|
||||
{
|
||||
a1: 'placeholder',
|
||||
a2: '输入框占位文本',
|
||||
a3: 'string',
|
||||
a4: '',
|
||||
a5: '请输入内容搜索图标或者选择图标',
|
||||
},
|
||||
{
|
||||
a1: 'size',
|
||||
a2: '尺寸',
|
||||
a3: 'string',
|
||||
a4: 'large / default / small',
|
||||
a5: 'default',
|
||||
},
|
||||
{
|
||||
a1: 'title',
|
||||
a2: '弹窗标题',
|
||||
a3: 'string',
|
||||
a4: '',
|
||||
a5: '请选择图标',
|
||||
},
|
||||
{
|
||||
a1: 'type',
|
||||
a2: 'icon 图标类型',
|
||||
a3: 'string',
|
||||
a4: 'ali / ele / awe / all',
|
||||
a5: 'ele',
|
||||
},
|
||||
{
|
||||
a1: 'disabled',
|
||||
a2: '禁用',
|
||||
a3: 'boolean',
|
||||
a4: 'true',
|
||||
a5: 'false',
|
||||
},
|
||||
{
|
||||
a1: 'clearable',
|
||||
a2: '是否可清空',
|
||||
a3: 'boolean',
|
||||
a4: 'false',
|
||||
a5: 'true',
|
||||
},
|
||||
{
|
||||
a1: 'emptyDescription',
|
||||
a2: '自定义空状态描述文字',
|
||||
a3: 'String',
|
||||
a4: '',
|
||||
a5: '无相关图标',
|
||||
},
|
||||
],
|
||||
tableData1: [
|
||||
{
|
||||
a1: 'get',
|
||||
a2: '获取当前点击的 icon 图标',
|
||||
a3: 'function',
|
||||
a4: '(icon: string)',
|
||||
},
|
||||
{
|
||||
a1: 'clear',
|
||||
a2: '清空当前点击的 icon 图标',
|
||||
a3: 'function',
|
||||
a4: '(icon: string)',
|
||||
},
|
||||
],
|
||||
});
|
||||
// 获取当前点击的 icon 图标
|
||||
const onGetIcon = (icon: string) => {
|
||||
console.log(icon);
|
||||
};
|
||||
// 清空当前点击的 icon 图标
|
||||
const onClearIcon = (icon: string) => {
|
||||
console.log(icon);
|
||||
};
|
||||
return {
|
||||
onGetIcon,
|
||||
onClearIcon,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="svg-demo-container">
|
||||
<el-card shadow="hover" header="svgIcon：演示（支持本地svg）">
|
||||
<SvgIcon name="iconfont icon-shuju1" color="red" :size="30" />
|
||||
<SvgIcon name="ele-Trophy" color="var(--el-color-primary)" :size="30" />
|
||||
<SvgIcon name="fa fa-flag-checkered" color="#09f" :size="30" />
|
||||
<SvgIcon :name="logoMini" color="#09f" :size="30" />
|
||||
</el-card>
|
||||
<el-card shadow="hover" header="svgIcon：参数" class="mt15">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="a1" label="参数"> </el-table-column>
|
||||
<el-table-column prop="a2" label="说明"> </el-table-column>
|
||||
<el-table-column prop="a3" label="类型"> </el-table-column>
|
||||
<el-table-column prop="a4" label="可选值"> </el-table-column>
|
||||
<el-table-column prop="a5" label="默认值"> </el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
import logoMini from '/@/assets/logo-mini.svg';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'makeSvgDemo',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tableData: [
|
||||
{
|
||||
a1: 'name',
|
||||
a2: 'svg 图标组件名字 / svg 路径 url',
|
||||
a3: 'string',
|
||||
a4: '',
|
||||
a5: '',
|
||||
},
|
||||
{
|
||||
a1: 'size',
|
||||
a2: 'svg 大小',
|
||||
a3: 'number',
|
||||
a4: '',
|
||||
a5: 14,
|
||||
},
|
||||
{
|
||||
a1: 'color',
|
||||
a2: 'svg 颜色',
|
||||
a3: 'string',
|
||||
a4: '',
|
||||
a5: '',
|
||||
},
|
||||
],
|
||||
});
|
||||
return {
|
||||
logoMini,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input v-model="val" placeholder="menu11：请输入内容测试路由缓存"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'menu11',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
val: '',
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input v-model="val" placeholder="menu121：请输入内容测试路由缓存"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'menu121',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
val: '',
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input v-model="val" placeholder="menu122：请输入内容测试路由缓存"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'menu122',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
val: '',
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input v-model="val" placeholder="menu13：请输入内容测试路由缓存"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onActivated, onMounted, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'menu13',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
val: '',
|
||||
});
|
||||
onMounted(() => {
|
||||
console.log(2222);
|
||||
});
|
||||
onActivated(() => {
|
||||
console.log(1111);
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input v-model="val" placeholder="menu2：请输入内容测试路由缓存"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'menu2',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
val: '',
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="awesome-container">
|
||||
<el-card shadow="hover" :header="`fontawesome 字体图标(自动载入)：${sheetsIconList.length - 24}个`">
|
||||
<el-row class="iconfont-row">
|
||||
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
|
||||
<div class="iconfont-warp">
|
||||
<div class="flex-margin">
|
||||
<div class="iconfont-warp-value">
|
||||
<i :class="v" class="fa"></i>
|
||||
</div>
|
||||
<div class="iconfont-warp-label mt10">{{ v }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
|
||||
import initIconfont from '/@/utils/getStyleSheets';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesAwesome',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
sheetsIconList: [],
|
||||
});
|
||||
// 初始化获取 css 样式，这里使用fontawesome的图标(记得加上前缀 `fa`)，其它第三方请自行做判断
|
||||
const initGetStyleSheets = () => {
|
||||
initIconfont.awe().then((res: any) => (state.sheetsIconList = res));
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initGetStyleSheets();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.awesome-container {
|
||||
.iconfont-row {
|
||||
border-top: 1px solid var(--next-border-color-light);
|
||||
border-left: 1px solid var(--next-border-color-light);
|
||||
.iconfont-warp {
|
||||
text-align: center;
|
||||
border-right: 1px solid var(--next-border-color-light);
|
||||
border-bottom: 1px solid var(--next-border-color-light);
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: #606266;
|
||||
font-size: 32px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: #99a9bf;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="drag-container">
|
||||
<el-card shadow="hover" header="拖动指令效果（v-drag）作用于 Dialog 对话框">
|
||||
<el-button type="primary" @click="dialogVisible = true" size="default">
|
||||
<el-icon>
|
||||
<ele-Pointer />
|
||||
</el-icon>
|
||||
点击打开 Dialog
|
||||
</el-button>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="自定义div" class="mt15">
|
||||
<div class="drag-dom">
|
||||
<div class="drag-header">
|
||||
<el-button type="success" size="default" v-drag="['.drag-container .drag-dom', '.drag-container .drag-header']">
|
||||
<el-icon>
|
||||
<ele-Pointer />
|
||||
</el-icon>
|
||||
按住进行拖动测试
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="dialogVisible" width="769px">
|
||||
<template #header>
|
||||
<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']">拖动指令效果（v-drag）</div>
|
||||
</template>
|
||||
<p>鼠标放标题头进行 Dialog 对话框拖动</p>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false" size="default">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesDrag',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
dialogVisible: false,
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drag-container {
|
||||
.drag-dom {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
.drag-header {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="dynamic-form-container">
|
||||
<el-card shadow="hover" header="动态复杂表单">
|
||||
<el-form :model="form" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col
|
||||
:xs="val.xs"
|
||||
:sm="val.sm"
|
||||
:md="val.md"
|
||||
:lg="val.md"
|
||||
:xl="val.xl"
|
||||
class="mb20"
|
||||
v-show="val.isShow"
|
||||
v-for="(val, key) in formData"
|
||||
:key="key"
|
||||
>
|
||||
<template v-if="val.type !== ''">
|
||||
<el-form-item
|
||||
:label="val.label"
|
||||
:prop="val.prop"
|
||||
:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
|
||||
v-if="val.type !== ''"
|
||||
>
|
||||
<el-input
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
clearable
|
||||
v-if="val.type === 'input'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
></el-input>
|
||||
<el-date-picker
|
||||
v-model="form[val.prop]"
|
||||
type="date"
|
||||
:placeholder="val.placeholder"
|
||||
v-else-if="val.type === 'date'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-select
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
v-else-if="val.type === 'select'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
>
|
||||
<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
clearable
|
||||
v-if="val.type === 'textarea'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-row :gutter="35" v-for="(v, k) in form.list" :key="k">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="年度" :prop="`list[${k}].year`" :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
|
||||
<template #label>
|
||||
<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
|
||||
<el-icon>
|
||||
<ele-Plus />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<span class="ml10">年度</span>
|
||||
</template>
|
||||
<el-input v-model="form.list[k].year" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="月度" :prop="`list[${k}].month`" :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
|
||||
<el-input v-model="form.list[k].month" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="日度" :prop="`list[${k}].day`" :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
|
||||
<el-input v-model="form.list[k].day" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-row class="flex mt15">
|
||||
<div class="flex-margin">
|
||||
<el-button size="default" @click="onResetForm">
|
||||
<el-icon>
|
||||
<ele-RefreshRight />
|
||||
</el-icon>
|
||||
重置表单
|
||||
</el-button>
|
||||
<el-button size="default" type="primary" @click="onSubmitForm">
|
||||
<SvgIcon name="iconfont icon-shuxing" />
|
||||
验证表单
|
||||
</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent } from 'vue';
|
||||
import { formData } from './mock';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface FormDataOptions {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
interface FormDataState {
|
||||
label: string;
|
||||
prop: string;
|
||||
placeholder: string;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
required: boolean;
|
||||
type: string;
|
||||
i18n: boolean;
|
||||
i18nText: string;
|
||||
isShow: boolean;
|
||||
xs: number;
|
||||
sm: number;
|
||||
md: number;
|
||||
lg: number;
|
||||
xl: number;
|
||||
options?: FormDataOptions[];
|
||||
}
|
||||
interface DynamicFormState {
|
||||
formData: FormDataState[];
|
||||
form: any;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesDynamicForm',
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const state = reactive<DynamicFormState>({
|
||||
formData,
|
||||
form: {
|
||||
name: '',
|
||||
email: '',
|
||||
autograph: '',
|
||||
occupation: '',
|
||||
list: [
|
||||
{
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
},
|
||||
],
|
||||
remarks: '',
|
||||
},
|
||||
});
|
||||
// 新增行
|
||||
const onAddRow = () => {
|
||||
state.form.list.push({
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
});
|
||||
};
|
||||
// 删除行
|
||||
const onDelRow = (k: number) => {
|
||||
state.form.list.splice(k, 1);
|
||||
};
|
||||
// 表单验证
|
||||
const onSubmitForm = () => {
|
||||
proxy.$refs.formRulesOneRef.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
proxy.$message.success('验证成功');
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 重置表单
|
||||
const onResetForm = () => {
|
||||
proxy.$refs.formRulesOneRef.resetFields();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {});
|
||||
return {
|
||||
onAddRow,
|
||||
onDelRow,
|
||||
onSubmitForm,
|
||||
onResetForm,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,119 @@
|
||||
// 表单数据选项(自行扩展)
|
||||
export const formData = [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name',
|
||||
placeholder: '请输入姓名',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'input',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
prop: 'email',
|
||||
placeholder: '请输入用户邮箱',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'input',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '登陆时间',
|
||||
prop: 'autograph',
|
||||
placeholder: '选择时间',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'date',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '职务',
|
||||
prop: 'occupation',
|
||||
placeholder: '请选择职务',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'select',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
options: [
|
||||
{
|
||||
label: '计算机 / 互联网 / 通信',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '生产 / 工艺 / 制造',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '医疗 / 护理 / 制药',
|
||||
value: '3',
|
||||
},
|
||||
],
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
prop: '',
|
||||
placeholder: '',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: '',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 24,
|
||||
lg: 24,
|
||||
xl: 24,
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remarks',
|
||||
placeholder: '请输入',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'textarea',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 24,
|
||||
lg: 24,
|
||||
xl: 24,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="element-container">
|
||||
<el-card shadow="hover" :header="`element plus 字体图标(自动载入，增加了 ele- 前缀，使用时：ele-Aim)：${sheetsIconList.length}个`">
|
||||
<el-row class="iconfont-row">
|
||||
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
|
||||
<div class="iconfont-warp">
|
||||
<div class="flex-margin">
|
||||
<div class="iconfont-warp-value">
|
||||
<SvgIcon :name="v" :size="30" />
|
||||
</div>
|
||||
<div class="iconfont-warp-label mt10">{{ v }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
|
||||
import initIconfont from '/@/utils/getStyleSheets';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesElement',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
sheetsIconList: [],
|
||||
});
|
||||
// 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 ele- 前缀，使用时：ele-Aim
|
||||
const initGetStyleSheets = () => {
|
||||
initIconfont.ele().then((res: any) => {
|
||||
state.sheetsIconList = res;
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initGetStyleSheets();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.element-container {
|
||||
.iconfont-row {
|
||||
border-top: 1px solid var(--next-border-color-light);
|
||||
border-left: 1px solid var(--next-border-color-light);
|
||||
.iconfont-warp {
|
||||
text-align: center;
|
||||
border-right: 1px solid var(--next-border-color-light);
|
||||
border-bottom: 1px solid var(--next-border-color-light);
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: #606266;
|
||||
font-size: 32px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: #99a9bf;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
|
||||
<div class="layout-view-bg-white">
|
||||
<div class="w100 h100 flex">
|
||||
<div class="flex-margin color-primary">filtering-details 测试界面</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFilteringDetails',
|
||||
setup() {
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
return {
|
||||
initTagViewHeight,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
|
||||
<div class="layout-view-bg-white">
|
||||
<div class="w100 h100 flex">
|
||||
<div class="flex-margin color-primary">测试界面</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFilteringDetails1',
|
||||
setup() {
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
return {
|
||||
initTagViewHeight,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="filtering">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="filtering-list br-top-no"
|
||||
v-loading="tableData.loading"
|
||||
element-loading-text="加载中..."
|
||||
element-loading-background="rgba(255, 255, 255, 0.1)"
|
||||
:class="{ 'min-h-360': tableData.data.length <= 0 }"
|
||||
>
|
||||
<div
|
||||
v-for="(val, key) in filtering"
|
||||
:key="key"
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) dlRefs[key] = el;
|
||||
}
|
||||
"
|
||||
class="filtering-list-flex"
|
||||
>
|
||||
<div class="filtering-list-title">{{ val.title }}</div>
|
||||
<div class="filtering-list-item" :style="{ height: val.isMore ? 'auto' : '50px' }">
|
||||
<span class="span" :class="v.active ? 'dd-active' : ''" v-for="(v, k) in val.children" :key="k" @click="onSelItem(val, v)">{{
|
||||
v.label
|
||||
}}</span>
|
||||
<div class="dd-more" v-if="val.isShowMore" @click="val.isMore = !val.isMore">
|
||||
<span>{{ val.isMore ? '收起' : '展开' }}</span>
|
||||
<i :class="val.isMore ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp mt15 mb15" v-if="tableData.data.length > 0">
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="item-img">
|
||||
<img :src="v.img" />
|
||||
</div>
|
||||
<div class="item-txt">
|
||||
<div class="item-txt-title">{{ v.title }}</div>
|
||||
<div class="item-txt-other">
|
||||
<div style="width: 100%">
|
||||
<div class="item-txt-msg mb10">
|
||||
<span>评价 {{ v.evaluate }}</span>
|
||||
<span class="ml10">收藏 {{ v.collection }}</span>
|
||||
</div>
|
||||
<div class="item-txt-msg item-txt-price">
|
||||
<span class="font-price">
|
||||
<span>￥</span>
|
||||
<span class="font">{{ v.price }}</span>
|
||||
</span>
|
||||
<span>月销{{ v.monSales }}笔</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-else class="filtering-no-data">
|
||||
<div class="no-data-box">
|
||||
<i class="el-icon-search"></i>
|
||||
<div class="no-txt">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="tableData.data.length > 0">
|
||||
<el-pagination
|
||||
style="text-align: right"
|
||||
background
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:current-page="tableData.param.pageNum"
|
||||
:page-size="tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, toRefs, reactive, onMounted, nextTick, defineComponent } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { filtering, filterList } from './mock';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFiltering',
|
||||
setup() {
|
||||
const dlRefs: any = ref([]);
|
||||
const router = useRouter();
|
||||
const state = reactive({
|
||||
filtering,
|
||||
tableData: {
|
||||
data: filterList,
|
||||
total: 99,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initBtnToggle();
|
||||
window.onresize = () => {
|
||||
initBtnToggle();
|
||||
};
|
||||
});
|
||||
// 初始化 `收起、展开` 按钮
|
||||
const initBtnToggle = () => {
|
||||
nextTick(() => {
|
||||
const els = dlRefs.value;
|
||||
els.map((v: any, k: number) => {
|
||||
v.scrollHeight < v.lastChild.scrollHeight ? (state.filtering[k].isShowMore = true) : (state.filtering[k].isShowMore = false);
|
||||
});
|
||||
});
|
||||
};
|
||||
// 过滤当前选中的数据
|
||||
const onSelItem = (val: any, v: any) => {
|
||||
val.children.map((v: any) => (v.active = false));
|
||||
v.active = true;
|
||||
let arr = [];
|
||||
state.filtering.map((item: any) => {
|
||||
item.children.map((chil: any) => {
|
||||
if (chil.active) {
|
||||
arr.push({
|
||||
...item,
|
||||
children: [{ ...chil }],
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
state.tableData.loading = true;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 当前列表项点击
|
||||
const onTableItemClick = (v: any) => {
|
||||
if (v.id === 1) {
|
||||
router.push({
|
||||
path: '/pages/filtering/details',
|
||||
query: { id: v.id },
|
||||
});
|
||||
} else {
|
||||
router.push({
|
||||
path: '/pages/filtering/details1',
|
||||
query: { id: v.id },
|
||||
});
|
||||
}
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
return {
|
||||
dlRefs,
|
||||
onSelItem,
|
||||
onTableItemClick,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.filtering {
|
||||
.filtering-list {
|
||||
overflow: hidden;
|
||||
border-bottom: none !important;
|
||||
.filtering-list-flex {
|
||||
&:last-of-type {
|
||||
.filtering-list-item {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
.filtering-list-title {
|
||||
float: left;
|
||||
width: 64px;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
color: #909399;
|
||||
margin: 15px 0;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: 1px solid #909399;
|
||||
border-width: 0 1px 1px 0;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
transform: rotate(-45deg) translateY(-50%);
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
.filtering-list-item {
|
||||
border-bottom: 1px dotted var(--next-border-color-light);
|
||||
margin-left: 64px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.span {
|
||||
color: #8d8d91;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
padding: 0 15px;
|
||||
margin: 15px 0;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.dd-active {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.dd-more {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 16px;
|
||||
color: #a5a5a5;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #8d8d91;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.br-top-no {
|
||||
border-top: none;
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
.flex-warp-item-box {
|
||||
border: 1px solid var(--next-border-color-light);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
|
||||
.item-txt-title {
|
||||
color: var(--el-color-primary) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.item-img {
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
transform: translateZ(0) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 215px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-txt {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.item-txt-title {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
text-decoration: underline;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.item-txt-other {
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
.item-txt-msg {
|
||||
font-size: 12px;
|
||||
color: #8d8d91;
|
||||
}
|
||||
.item-txt-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.font-price {
|
||||
color: #ff5000;
|
||||
.font {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
height: 100%;
|
||||
.filtering-no-data {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.no-data-box {
|
||||
color: #cccccc;
|
||||
margin: auto;
|
||||
i {
|
||||
font-size: 70px;
|
||||
}
|
||||
.no-txt {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.min-h-360 {
|
||||
height: 360px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
// 导航数据
|
||||
export const filtering = [
|
||||
{
|
||||
title: '权限',
|
||||
isMore: false,
|
||||
isShowMore: false,
|
||||
id: 0,
|
||||
children: [
|
||||
{
|
||||
id: '01',
|
||||
label: '全部',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
label: '普通用户',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: '03',
|
||||
label: '管理员',
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '布局',
|
||||
isMore: false,
|
||||
isShowMore: false,
|
||||
id: 1,
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
label: '全部',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
label: '默认',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
label: '经典',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
label: '横向',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
label: '分栏',
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '配置',
|
||||
isMore: false,
|
||||
isShowMore: false,
|
||||
id: 2,
|
||||
children: [
|
||||
{
|
||||
id: 21,
|
||||
label: '全部',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
label: '开启 Breadcrumb',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
label: '开启 Tags-View',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
label: '固定 Header',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
label: '侧边栏 Logo',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
label: '开启折叠 NavMenu',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
label: '开启一个 NavMenu 展开',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
label: '登录用户头像',
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// 列表数据
|
||||
export const filterList = [
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2020-08/14/9d9c9a60-f0af-41aa-b617-683b07c87642.jpg',
|
||||
title: '嘉陵江2020年第1号洪水”在嘉陵江支流涪江形成',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/news/pic/2020-08/13/0ea47d3c-feb9-4bd7-8597-a8a373aa6340c6ec12c7-3b33-4528-91a6-85ec8ca1df67_watermark.png',
|
||||
title: '让《民法典》走近群众 盐田街道开展人民调解宣传活动',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/12/a08d6eb0-1d53-4f76-a313-ad3e5d701f98.jpg',
|
||||
title: '记者手记：可可西里，“挪”向“藏羚羊大产房”的14个半小时',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/11/43cc0e14-9bca-45b9-9a8b-342e09d6a4c7.jpg',
|
||||
title: '以优异成绩庆祝深圳经济特区建立40周年',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/11/a4dc322b-68ec-40e6-8906-3124142c3e49.jpg',
|
||||
title: '草原上的“太阳姑娘”',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/zhuanti/pic/2020-08/07/57f087b4-4812-46cc-adb9-ead73621284e.png',
|
||||
title: '奇观天下|带你走进非洲野生动物观光第一目的地',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2020-09/02/t2_(101X54X600X335)7cd39301-d9cf-45f1-91c3-9575b1e5ce0e.jpg.2',
|
||||
title: '五角大楼发布“中国军力报告” 华春莹： 罔顾事实，充满偏见',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2020-09/02/b8b41d9c-0508-4498-8d37-6e597493769f.jpg',
|
||||
title: '最新地铁消息汇总：4号线北延、2号线三期、8号线一期等今年通车',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/10/1635374c-f4d6-475c-ac47-1334176f365d.png',
|
||||
title: '9月1日深圳新增5例无症状感染者！钟南山这段话冲上热搜！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/news/pic/2020-08/13/646e5458-92b7-4636-9940-9b0799babfe1.png',
|
||||
title: '全能“小福宝” 为文明社区建设添砖加瓦',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="表单自适应演示(改变窗口查看效果)">
|
||||
<el-form :model="form" size="default" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="用户归属部门">
|
||||
<el-input v-model="form.email" placeholder="请输入用户归属部门" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="登陆账户名">
|
||||
<el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="职务">
|
||||
<el-select v-model="form.occupation" placeholder="请选择职务" clearable class="w100">
|
||||
<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
|
||||
<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
|
||||
<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="手机">
|
||||
<el-input v-model="form.phone" placeholder="请输入手机" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="form.sex" placeholder="请选择性别" clearable class="w100">
|
||||
<el-option label="男" value="1"></el-option>
|
||||
<el-option label="女" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="登录密码">
|
||||
<el-input v-model="form.phone1" placeholder="请输入登录密码" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="权限角色">
|
||||
<el-input v-model="form.phone2" placeholder="请输入权限角色" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="创建用户">
|
||||
<el-input v-model="form.phone3" placeholder="请输入创建用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="修改用户">
|
||||
<el-input v-model="form.phone4" placeholder="请输入修改用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="所属用户">
|
||||
<el-input v-model="form.phone5" placeholder="请输入所属用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="所属部门">
|
||||
<el-input v-model="form.phone6" placeholder="请输入所属部门" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item>
|
||||
<el-button type="primary">
|
||||
<SvgIcon name="iconfont icon-biaodan" />
|
||||
更新个人信息
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormAdapt',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
form: {
|
||||
name: '',
|
||||
email: '',
|
||||
autograph: '',
|
||||
occupation: '',
|
||||
phone: '',
|
||||
sex: '',
|
||||
phone1: '',
|
||||
phone2: '',
|
||||
phone3: '',
|
||||
phone4: '',
|
||||
phone5: '',
|
||||
phone6: '',
|
||||
},
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="form-i18n-container">
|
||||
<el-card shadow="hover" header="表单国际化演示(不适用于动态项 form-item)">
|
||||
<div style="text-align: center; margin-top: 15px">
|
||||
<el-radio-group v-model="radio" size="default" @change="onRadioChange">
|
||||
<el-radio-button label="zh-cn">中文简体</el-radio-button>
|
||||
<el-radio-button label="en">英文</el-radio-button>
|
||||
<el-radio-button label="zh-tw">中文繁体</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<el-form :model="form" size="default" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
|
||||
<el-form-item :label="$t('message.formI18nLabel.name')">
|
||||
<el-input v-model="form.name" :placeholder="$t('message.formI18nPlaceholder.name')" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
|
||||
<el-form-item :label="$t('message.formI18nLabel.email')">
|
||||
<el-input v-model="form.email" :placeholder="$t('message.formI18nPlaceholder.email')" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
|
||||
<el-form-item :label="$t('message.formI18nLabel.autograph')">
|
||||
<el-input v-model="form.autograph" :placeholder="$t('message.formI18nPlaceholder.autograph')" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent, getCurrentInstance } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormI18n',
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const state = reactive({
|
||||
radio: 'zh-cn',
|
||||
form: {
|
||||
name: '',
|
||||
email: '',
|
||||
autograph: '',
|
||||
},
|
||||
});
|
||||
// 单选框改变时
|
||||
const onRadioChange = () => {
|
||||
proxy.$i18n.locale = state.radio;
|
||||
};
|
||||
return {
|
||||
onRadioChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="form-rules-one-container">
|
||||
<el-form :model="form" :rules="rules" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入用户邮箱" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="登陆账户名" prop="autograph">
|
||||
<el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="职务" prop="occupation">
|
||||
<el-select v-model="form.occupation" placeholder="请选择职务" clearable class="w100">
|
||||
<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
|
||||
<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
|
||||
<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormRulesOne',
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const state = reactive({
|
||||
form: { name: '', email: '', autograph: '', occupation: '' },
|
||||
rules: {
|
||||
name: { required: true, message: '请输入姓名', trigger: 'blur' },
|
||||
email: { required: true, message: '请输入用户邮箱', trigger: 'blur' },
|
||||
autograph: { required: true, message: '请输入登陆账户名', trigger: 'blur' },
|
||||
occupation: { required: true, message: '请选择职务', trigger: 'change' },
|
||||
},
|
||||
});
|
||||
// 赋值回显
|
||||
const initForm = () => {
|
||||
state.form = <any>props.data;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initForm();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="form-rules-three-container">
|
||||
<el-form :model="form" :rules="rules" ref="formRulesThreeRef" size="default" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="创建用户" prop="createUser">
|
||||
<el-input v-model="form.createUser" placeholder="请输入创建用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="修改用户" prop="editUser">
|
||||
<el-input v-model="form.editUser" placeholder="请输入修改用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="所属用户" prop="user">
|
||||
<el-input v-model="form.user" placeholder="请输入所属用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="所属部门" prop="department">
|
||||
<el-input v-model="form.department" placeholder="请输入所属部门" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormRulesThree',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
form: { createUser: '', editUser: '', user: '', department: '' },
|
||||
rules: {
|
||||
createUser: { required: true, message: '请输入创建用户', trigger: 'blur' },
|
||||
editUser: { required: true, message: '请输入修改用户', trigger: 'blur' },
|
||||
user: { required: true, message: '请输入所属用户', trigger: 'blur' },
|
||||
department: { required: true, message: '请输入所属部门', trigger: 'blur' },
|
||||
},
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="form-rules-two-container">
|
||||
<el-form :model="form" :rules="rules" ref="formRulesTwoRef" size="default" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="手机" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入手机" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="form.sex" placeholder="请选择性别" clearable class="w100">
|
||||
<el-option label="男" value="1"></el-option>
|
||||
<el-option label="女" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="登录密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="请输入登录密码" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="权限角色" prop="auth">
|
||||
<el-input v-model="form.auth" placeholder="请输入权限角色" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormRulesTwo',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
form: { phone: '', sex: '', password: '', auth: '' },
|
||||
rules: {
|
||||
phone: { required: true, message: '请输入手机', trigger: 'blur' },
|
||||
password: { required: true, message: '请输入登录密码', trigger: 'blur' },
|
||||
auth: { required: true, message: '请输入权限角色', trigger: 'blur' },
|
||||
},
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="form-rules-container">
|
||||
<el-card shadow="hover" header="表单组件1"> <FormRulesOne :data="formRulesOneData" ref="pagesFormRulesOneRef" /></el-card>
|
||||
<el-card shadow="hover" header="表单组件2" class="mt15"><FormRulesTwo ref="pagesFormRulesTwoRef" /> </el-card>
|
||||
<el-card shadow="hover" header="表单组件3" class="mt15"> <FormRulesThree ref="pagesFormRulesThreeRef" /></el-card>
|
||||
<el-row class="flex mt15">
|
||||
<div class="flex-margin">
|
||||
<el-button size="default" @click="onResetForm">
|
||||
<SvgIcon name="ele-RefreshRight" />
|
||||
重置表单
|
||||
</el-button>
|
||||
<el-button size="default" type="primary" @click="onSubmitForm">
|
||||
<SvgIcon name="iconfont icon-shuxing" />
|
||||
验证表单
|
||||
</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent, getCurrentInstance } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import FormRulesOne from '/@/views/pages/formRules/component/formRulesOne.vue';
|
||||
import FormRulesTwo from '/@/views/pages/formRules/component/formRulesTwo.vue';
|
||||
import FormRulesThree from '/@/views/pages/formRules/component/formRulesThree.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormRules',
|
||||
components: {
|
||||
FormRulesOne,
|
||||
FormRulesTwo,
|
||||
FormRulesThree,
|
||||
},
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const state = reactive({
|
||||
formRulesOneData: {
|
||||
name: 'lyt',
|
||||
email: 'lyt123@.com',
|
||||
autograph: 'lyt123456',
|
||||
occupation: '1',
|
||||
},
|
||||
});
|
||||
// 表单组件验证
|
||||
const formRulesValidate = (pageRef: string, sonRef: string) => {
|
||||
return new Promise((resolve) => {
|
||||
proxy.$refs[pageRef].$refs[sonRef].validate((valid: boolean) => {
|
||||
if (valid) resolve(valid);
|
||||
});
|
||||
});
|
||||
};
|
||||
// 表单组件重置
|
||||
const formRulesResetFields = () => {
|
||||
proxy.$refs.pagesFormRulesOneRef.$refs.formRulesOneRef.resetFields();
|
||||
proxy.$refs.pagesFormRulesTwoRef.$refs.formRulesTwoRef.resetFields();
|
||||
proxy.$refs.pagesFormRulesThreeRef.$refs.formRulesThreeRef.resetFields();
|
||||
};
|
||||
// 验证表单
|
||||
const onSubmitForm = () => {
|
||||
Promise.all([
|
||||
formRulesValidate('pagesFormRulesOneRef', 'formRulesOneRef'),
|
||||
formRulesValidate('pagesFormRulesTwoRef', 'formRulesTwoRef'),
|
||||
formRulesValidate('pagesFormRulesThreeRef', 'formRulesThreeRef'),
|
||||
]).then(() => {
|
||||
ElMessage.success('表单全部验证成功');
|
||||
});
|
||||
};
|
||||
// 重置表单
|
||||
const onResetForm = () => {
|
||||
formRulesResetFields();
|
||||
};
|
||||
return {
|
||||
onSubmitForm,
|
||||
onResetForm,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="iconfont-container">
|
||||
<el-card shadow="hover" :header="`iconfont 字体图标(自动载入)：${sheetsIconList.length}个`">
|
||||
<el-row class="iconfont-row">
|
||||
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
|
||||
<div class="iconfont-warp">
|
||||
<div class="flex-margin">
|
||||
<div class="iconfont-warp-value">
|
||||
<i :class="v" class="iconfont"></i>
|
||||
</div>
|
||||
<div class="iconfont-warp-label mt10">{{ v }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
|
||||
import initIconfont from '/@/utils/getStyleSheets';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesIocnfont',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
sheetsIconList: [],
|
||||
});
|
||||
// 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
|
||||
const initGetStyleSheets = () => {
|
||||
initIconfont.ali().then((res: any) => (state.sheetsIconList = res));
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initGetStyleSheets();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.iconfont-container {
|
||||
.iconfont-row {
|
||||
border-top: 1px solid var(--next-border-color-light);
|
||||
border-left: 1px solid var(--next-border-color-light);
|
||||
.iconfont-warp {
|
||||
text-align: center;
|
||||
border-right: 1px solid var(--next-border-color-light);
|
||||
border-bottom: 1px solid var(--next-border-color-light);
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: #606266;
|
||||
font-size: 32px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: #99a9bf;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="lazy-img-container">
|
||||
<el-card shadow="hover" header="图片懒加载演示（F12 切换到 Network Img下进行图片加载查看）">
|
||||
<div class="flex-warp" v-if="tableData.data.length > 0">
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="item-img" v-loading="v.loading">
|
||||
<img :data-img="v.img" :data-key="k" :data-lazy-img-list="k" />
|
||||
</div>
|
||||
<div class="item-txt">
|
||||
<div class="item-txt-title">{{ v.title }}</div>
|
||||
<div class="item-txt-other">
|
||||
<div style="width: 100%">
|
||||
<div class="item-txt-msg mb10">
|
||||
<span>评价 {{ v.evaluate }}</span>
|
||||
<span class="ml10">收藏 {{ v.collection }}</span>
|
||||
</div>
|
||||
<div class="item-txt-msg item-txt-price">
|
||||
<span class="font-price">
|
||||
<span>￥</span>
|
||||
<span class="font">{{ v.price }}</span>
|
||||
</span>
|
||||
<span>月销{{ v.monSales }}笔</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-empty v-else description="暂无数据"></el-empty>
|
||||
<template v-if="tableData.data.length > 0">
|
||||
<el-pagination
|
||||
style="text-align: right"
|
||||
background
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:current-page="tableData.param.pageNum"
|
||||
:page-size="tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import other from '/@/utils/other';
|
||||
import { filterList } from './mock';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesListAdapt',
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: filterList,
|
||||
total: 99,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 当前列表项点击
|
||||
const onTableItemClick = (v: any) => {
|
||||
router.push({
|
||||
path: '/pages/filteringDetails',
|
||||
query: { id: v.id },
|
||||
});
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
other.lazyImg('[data-lazy-img-list]', state.tableData.data);
|
||||
});
|
||||
return {
|
||||
onTableItemClick,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.lazy-img-container {
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
.flex-warp-item-box {
|
||||
border: 1px solid var(--next-border-color-light);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
|
||||
.item-txt-title {
|
||||
color: var(--el-color-primary) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.item-img {
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
transform: translateZ(0) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 215px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-txt {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.item-txt-title {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
text-decoration: underline;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.item-txt-other {
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
.item-txt-msg {
|
||||
font-size: 12px;
|
||||
color: #8d8d91;
|
||||
}
|
||||
.item-txt-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.font-price {
|
||||
color: #ff5000;
|
||||
.font {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,313 @@
|
||||
// 列表数据
|
||||
export const filterList = [
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
|
||||
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
|
||||
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
|
||||
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
|
||||
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
|
||||
title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
|
||||
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
|
||||
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
|
||||
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
|
||||
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
|
||||
title: '深圳湾公园一女子落水，三名男子接力及时施救',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/653/w930h523/20210704/d5d2-krwipas6444058.jpg',
|
||||
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/766/w930h636/20210704/b1ae-krwipas6332914.jpg',
|
||||
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/2886-krwipas6264821.jpg',
|
||||
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/767c-krwipas6387862.jpg',
|
||||
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/111/w1024h687/20210704/1f65-krwipas5871436.jpg',
|
||||
title: '盛夏的那考河湿地公园！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/657/w930h527/20210704/7eae-krwipas5866609.jpg',
|
||||
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/760/w930h630/20210703/124e-krwipas5596390.jpg',
|
||||
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/27/w930h697/20210703/9630-krwipas5514972.jpg',
|
||||
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/2fe3-krwipas5388050.jpg',
|
||||
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/724/w930h594/20210703/98b6-krwipas5234060.jpg',
|
||||
title: '深圳湾公园一女子落水，三名男子接力及时施救',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/f765-krwipas5194727.jpg',
|
||||
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5dde-krwipas4724976.jpg',
|
||||
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f45e-krwipas4566804.jpg',
|
||||
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5579-krwipas4551382.jpg',
|
||||
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/7c75-krwipas4543661.jpg',
|
||||
title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/653/w930h523/20210702/ece2-krwipas4411140.jpg',
|
||||
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f5c2-krwipas4215211.jpg',
|
||||
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/720/w930h590/20210701/eabc-krwipas3509204.jpg',
|
||||
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/797/w930h667/20210701/4667-krwipas3365057.jpg',
|
||||
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/750/w930h620/20210701/baea-krwipas2976622.jpg',
|
||||
title: '民众前往中共一大纪念馆参观',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210630/617/w850h567/20210630/5c96-krwipas1819108.jpg',
|
||||
title: '延吉灯光秀美轮美奂 市民徜徉璀璨夜景',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div class="list-adapt-container">
|
||||
<el-card shadow="hover" header="列表自适应演示(改变窗口查看效果)">
|
||||
<div class="flex-warp" v-if="tableData.data.length > 0">
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="item-img">
|
||||
<img :src="v.img" />
|
||||
</div>
|
||||
<div class="item-txt">
|
||||
<div class="item-txt-title">{{ v.title }}</div>
|
||||
<div class="item-txt-other">
|
||||
<div style="width: 100%">
|
||||
<div class="item-txt-msg mb10">
|
||||
<span>评价 {{ v.evaluate }}</span>
|
||||
<span class="ml10">收藏 {{ v.collection }}</span>
|
||||
</div>
|
||||
<div class="item-txt-msg item-txt-price">
|
||||
<span class="font-price">
|
||||
<span>￥</span>
|
||||
<span class="font">{{ v.price }}</span>
|
||||
</span>
|
||||
<span>月销{{ v.monSales }}笔</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-empty v-else description="暂无数据"></el-empty>
|
||||
<template v-if="tableData.data.length > 0">
|
||||
<el-pagination
|
||||
style="text-align: right"
|
||||
background
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:current-page="tableData.param.pageNum"
|
||||
:page-size="tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { filterList } from './mock';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface ListAdaptRow {
|
||||
img: string;
|
||||
title: string;
|
||||
evaluate: string;
|
||||
collection: string;
|
||||
price: string;
|
||||
monSales: string;
|
||||
id: number;
|
||||
}
|
||||
interface TableDataState {
|
||||
tableData: {
|
||||
data: Array<ListAdaptRow>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesListAdapt',
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const state = reactive<TableDataState>({
|
||||
tableData: {
|
||||
data: filterList,
|
||||
total: 99,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 当前列表项点击
|
||||
const onTableItemClick = (v: ListAdaptRow) => {
|
||||
router.push({
|
||||
path: '/pages/filteringDetails',
|
||||
query: { id: v.id },
|
||||
});
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
return {
|
||||
onTableItemClick,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
.flex-warp-item-box {
|
||||
border: 1px solid var(--next-border-color-light);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
|
||||
.item-txt-title {
|
||||
color: var(--el-color-primary) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.item-img {
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
transform: translateZ(0) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 215px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-txt {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.item-txt-title {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
text-decoration: underline;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.item-txt-other {
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
.item-txt-msg {
|
||||
font-size: 12px;
|
||||
color: #8d8d91;
|
||||
}
|
||||
.item-txt-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.font-price {
|
||||
color: #ff5000;
|
||||
.font {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
// 列表数据
|
||||
export const filterList = [
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
|
||||
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
|
||||
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
|
||||
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
|
||||
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
|
||||
title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
|
||||
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
|
||||
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
|
||||
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
|
||||
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
|
||||
title: '深圳湾公园一女子落水，三名男子接力及时施救',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="preview-container">
|
||||
<el-card shadow="hover" header="element-plus 大图预览">
|
||||
<el-image style="width: 100px; height: 100px; border-radius: 5px" :src="url" :preview-src-list="srcList" title="点击查看大图预览"> </el-image>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesPreview',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
url: 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
|
||||
srcList: [
|
||||
'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
|
||||
'https://img2.baidu.com/it/u=2370931438,70387529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
|
||||
],
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="steps-container">
|
||||
<el-card shadow="hover" header="element-plus 步骤条">
|
||||
<el-steps :active="stepsActive">
|
||||
<el-step title="第一步">
|
||||
<template #icon>
|
||||
<SvgIcon name="iconfont icon-0_round_solid" :size="20" />
|
||||
</template>
|
||||
</el-step>
|
||||
<el-step title="第二步">
|
||||
<template #icon>
|
||||
<SvgIcon name="iconfont icon-2_round_solid" :size="20" />
|
||||
</template>
|
||||
</el-step>
|
||||
<el-step title="第三步">
|
||||
<template #icon>
|
||||
<SvgIcon name="iconfont icon-3_round_solid" :size="20" />
|
||||
</template>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
<el-result icon="success" title="成功提示" subTitle="请根据提示进行操作" v-if="stepsActive === 1"> </el-result>
|
||||
<el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 2"> </el-result>
|
||||
<el-result icon="error" title="错误提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 3"> </el-result>
|
||||
<el-button @click="onNextSteps" size="default" class="mt15" type="primary">
|
||||
<SvgIcon name="iconfont icon-step" />
|
||||
下一步
|
||||
</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesSteps',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
stepsActive: 1,
|
||||
});
|
||||
// 下一步点击
|
||||
const onNextSteps = () => {
|
||||
if (state.stepsActive++ > 2) state.stepsActive = 1;
|
||||
};
|
||||
return {
|
||||
onNextSteps,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<el-card shadow="hover" header="表单表格验证">
|
||||
<el-form ref="tableRulesRef" :model="tableData" size="default">
|
||||
<el-table :data="tableData.data" border class="module-table-uncollected">
|
||||
<el-table-column
|
||||
v-for="(item, index) in tableData.header"
|
||||
:key="index"
|
||||
show-overflow-tooltip
|
||||
:prop="item.prop"
|
||||
:width="item.width"
|
||||
:label="item.label"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<span v-if="item.isRequired" class="color-danger">*</span>
|
||||
<span class="pl5">{{ item.label }}</span>
|
||||
<el-tooltip v-if="item.isTooltip" effect="dark" content="这是tooltip" placement="top">
|
||||
<i class="iconfont icon-quanxian" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<el-form-item
|
||||
:prop="`data.${scope.$index}.${item.prop}`"
|
||||
:rules="[{ required: item.isRequired, message: '不能为空', trigger: `${item.type}` == 'input' ? 'blur' : 'change' }]"
|
||||
>
|
||||
<el-select v-if="item.type === 'select'" v-model="scope.row[item.prop]" placeholder="请选择">
|
||||
<el-option v-for="sel in tableData.option" :key="sel.id" :label="sel.label" :value="sel.value" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-else-if="item.type === 'date'"
|
||||
v-model="scope.row[item.prop]"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<el-input v-else-if="item.type === 'input'" v-model="scope.row[item.prop]" placeholder="请输入内容" />
|
||||
<el-input v-else-if="item.type === 'dialog'" v-model="scope.row[item.prop]" readonly placeholder="请输入内容">
|
||||
<template v-slot:suffix>
|
||||
<i class="iconfont icon-shouye_dongtaihui" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
<el-row class="flex mt15">
|
||||
<div class="flex-margin">
|
||||
<el-button size="default" type="success" @click="onValidate">表格验证</el-button>
|
||||
<el-button size="default" type="primary" @click="onAddRow">新增一行</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableHeader {
|
||||
prop: string;
|
||||
width: string | number;
|
||||
label: string;
|
||||
isRequired?: boolean;
|
||||
isTooltip?: boolean;
|
||||
type: string;
|
||||
}
|
||||
interface TableRulesState {
|
||||
tableData: {
|
||||
data: any[];
|
||||
header: TableHeader[];
|
||||
option: any[];
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesTableRules',
|
||||
setup() {
|
||||
const tableRulesRef = ref();
|
||||
const state = reactive<TableRulesState>({
|
||||
tableData: {
|
||||
data: [],
|
||||
header: [
|
||||
{ prop: 'a1', width: '', label: '一级分类', isRequired: true, type: 'select' },
|
||||
{ prop: 'a2', width: '', label: '二级分类', isRequired: true, type: 'select' },
|
||||
{ prop: 'a3', width: '', label: '三级分类', isRequired: true, type: 'select' },
|
||||
{ prop: 'a4', width: '', label: '四级分类', isRequired: true, type: 'date' },
|
||||
{ prop: 'a5', width: '', label: '五级分类', isRequired: true, type: 'input' },
|
||||
{ prop: 'a6', width: '', label: '六级分类', isTooltip: true, type: 'dialog' },
|
||||
{ prop: 'a7', width: '', label: '演示级分类', type: 'input' },
|
||||
{ prop: 'a8', width: '', label: '颜色是分类', type: 'input' },
|
||||
],
|
||||
option: [
|
||||
{ value: '选项1', label: '黄金糕' },
|
||||
{ value: '选项2', label: '双皮奶' },
|
||||
{ value: '选项3', label: '蚵仔煎' },
|
||||
],
|
||||
},
|
||||
});
|
||||
// 表格验证
|
||||
const onValidate = () => {
|
||||
if (state.tableData.data.length <= 0) return ElMessage.warning('请先点击增加一行');
|
||||
tableRulesRef.value.validate((valid: any) => {
|
||||
if (!valid) return ElMessage.warning('表格项必填未填');
|
||||
ElMessage.success('全部验证通过');
|
||||
});
|
||||
};
|
||||
// 新增一行
|
||||
const onAddRow = () => {
|
||||
state.tableData.data.push({
|
||||
a1: '',
|
||||
a2: '',
|
||||
a3: '',
|
||||
a4: '',
|
||||
a5: '',
|
||||
a6: '',
|
||||
a7: '',
|
||||
a8: '',
|
||||
});
|
||||
};
|
||||
return {
|
||||
onValidate,
|
||||
onAddRow,
|
||||
tableRulesRef,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="tree-container">
|
||||
<el-card shadow="hover" header="element plus Tree 树形控件改成表格">
|
||||
<div v-loading="treeLoading">
|
||||
<div class="tree-head">
|
||||
<div class="tree-head-check"><el-checkbox v-model="treeCheckAll" @change="onCheckAllChange"></el-checkbox></div>
|
||||
<div class="tree-head-one">商品 ID</div>
|
||||
<div style="flex: 1; display: flex">
|
||||
<div class="tree-head-two">商品名称</div>
|
||||
<div class="tree-head-three">描述</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-tree :data="treeTableData" show-checkbox node-key="id" ref="treeTable" :props="treeDefaultProps" @check="onCheckTree">
|
||||
<template #default="{ node, data }">
|
||||
<span class="tree-custom-node">
|
||||
<span style="flex: 1">{{ node.label }}</span>
|
||||
<span v-if="data.isShow" style="flex: 1; display: flex">
|
||||
<span type="text" size="default" style="flex: 1">{{ data.label1 }}</span>
|
||||
<span type="text" size="default" style="flex: 1">{{ data.label2 }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<el-button @click="onSelect" class="mt15" size="default" type="primary">
|
||||
<SvgIcon name="iconfont icon-shuxingtu" />
|
||||
选择元素
|
||||
</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onBeforeMount, getCurrentInstance, defineComponent } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TreeDataState {
|
||||
id: number;
|
||||
label: string;
|
||||
label1: string;
|
||||
label2: string;
|
||||
isShow: boolean;
|
||||
children?: TreeDataState[];
|
||||
}
|
||||
interface TreeSate {
|
||||
treeCheckAll: boolean;
|
||||
treeLoading: boolean;
|
||||
treeTableData: TreeDataState[];
|
||||
treeDefaultProps: {
|
||||
children: string;
|
||||
label: string;
|
||||
};
|
||||
treeSelArr: TreeDataState[];
|
||||
treeLength: number;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesTree',
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const state = reactive<TreeSate>({
|
||||
treeCheckAll: false,
|
||||
treeLoading: false,
|
||||
treeTableData: [],
|
||||
treeDefaultProps: {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
},
|
||||
treeSelArr: [],
|
||||
treeLength: 0,
|
||||
});
|
||||
// 初始化树的长度
|
||||
const initTreeLengh = (arr: TreeDataState[]) => {
|
||||
let count = 0;
|
||||
arr.map((item) => {
|
||||
if (item.children) {
|
||||
count += item.children.length;
|
||||
}
|
||||
});
|
||||
state.treeLength = count + arr.length;
|
||||
};
|
||||
// 全选改变时
|
||||
const onCheckAllChange = () => {
|
||||
if (state.treeCheckAll) {
|
||||
proxy.$refs.treeTable.setCheckedNodes(state.treeTableData);
|
||||
} else {
|
||||
proxy.$refs.treeTable.setCheckedKeys([]);
|
||||
}
|
||||
};
|
||||
// 节点选中状态发生变化时的回调
|
||||
const onCheckTree = () => {
|
||||
state.treeSelArr = [];
|
||||
state.treeSelArr = proxy.$refs.treeTable.getCheckedNodes();
|
||||
state.treeSelArr.length == state.treeLength ? (state.treeCheckAll = true) : (state.treeCheckAll = false);
|
||||
};
|
||||
// 选择元素按钮
|
||||
const onSelect = () => {
|
||||
let treeArr = proxy.$refs.treeTable.getCheckedNodes();
|
||||
if (treeArr.length <= 0) {
|
||||
ElMessage.warning('请选择元素');
|
||||
return;
|
||||
} else {
|
||||
// console.log(proxy.$refs.treeTable.getCheckedNodes());
|
||||
}
|
||||
};
|
||||
// 初始化树模拟数据
|
||||
const getTreeData = () => {
|
||||
state.treeTableData = [
|
||||
{
|
||||
id: 1,
|
||||
label: '12987121',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: true,
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
label: '一级 1-1',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
label: '一级 1-2',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '12987122',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: true,
|
||||
children: [
|
||||
{
|
||||
id: 21,
|
||||
label: '二级 2-1',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
label: '二级 2-2',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: '12987123',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: true,
|
||||
children: [
|
||||
{
|
||||
id: 31,
|
||||
label: '二级 3-1',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
label: '二级 3-2',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
label: '二级 3-3',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
initTreeLengh(state.treeTableData);
|
||||
};
|
||||
// 页面加载前
|
||||
onBeforeMount(() => {
|
||||
getTreeData();
|
||||
});
|
||||
return {
|
||||
getTreeData,
|
||||
onCheckAllChange,
|
||||
onCheckTree,
|
||||
onSelect,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tree-container {
|
||||
.tree-head {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
border: 1px solid var(--next-border-color-light);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
padding-right: 8px;
|
||||
font-weight: bold;
|
||||
color: #909399;
|
||||
.tree-head-check {
|
||||
width: 38px;
|
||||
text-align: right;
|
||||
}
|
||||
.tree-head-one,
|
||||
.tree-head-two,
|
||||
.tree-head-three {
|
||||
flex: 1;
|
||||
}
|
||||
.tree-head-one {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
.el-tree {
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid var(--next-border-color-light);
|
||||
.tree-custom-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
&:deep(.el-tree-node) {
|
||||
border: 1px solid var(--next-border-color-light);
|
||||
border-bottom: none;
|
||||
color: #606266;
|
||||
.el-tree-node__content {
|
||||
line-height: 57px !important;
|
||||
height: 57px !important;
|
||||
}
|
||||
.el-tree-node__children {
|
||||
.el-tree-node {
|
||||
border: none;
|
||||
}
|
||||
.el-tree-node__content {
|
||||
border-top: 1px solid var(--next-border-color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="waterfall-container">
|
||||
<el-card shadow="hover" header="瀑布屏（布局一）" class="mb15">
|
||||
<div class="waterfall-first">
|
||||
<div class="waterfall-first-item" v-for="v in 30" :key="v" v-waves>
|
||||
<div class="w100 h100 flex">
|
||||
<span class="flex-margin">{{ v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" header="瀑布屏（布局二）">
|
||||
<div class="waterfall-last">
|
||||
<div class="waterfall-last-item" v-for="v in 30" :key="v" v-waves="'light'">
|
||||
<div class="w100 h100 flex">
|
||||
<span class="flex-margin">{{ v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWaterfall',
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.waterfall-container {
|
||||
.waterfall-first {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
|
||||
grid-gap: 0.25em;
|
||||
grid-auto-flow: row dense;
|
||||
grid-auto-rows: 20px;
|
||||
.waterfall-first-item {
|
||||
width: 100%;
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
&:nth-of-type(3n + 1) {
|
||||
grid-row: auto / span 5;
|
||||
}
|
||||
&:nth-of-type(3n + 2) {
|
||||
grid-row: auto / span 6;
|
||||
}
|
||||
&:nth-of-type(3n + 3) {
|
||||
grid-row: auto / span 8;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.waterfall-last {
|
||||
display: grid;
|
||||
grid-gap: 0.25em;
|
||||
grid-auto-flow: row dense;
|
||||
grid-auto-rows: minmax(188px, 20vmin);
|
||||
grid-template-columns: 1fr;
|
||||
.waterfall-last-item {
|
||||
height: 100%;
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.waterfall-last {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
.waterfall-last-item {
|
||||
&:nth-of-type(9n + 9) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 8) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 7) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(9n + 6) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 5) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(9n + 4) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 3) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(9n + 2) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 1) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) and (min-width: 1024px) {
|
||||
.waterfall-last {
|
||||
grid-template-columns: repeat(14, 1fr);
|
||||
.waterfall-last-item {
|
||||
&:nth-of-type(15n + 15) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 14) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 13) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(15n + 12) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 11) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 10) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(15n + 9) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 8) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 7) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 6) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 5) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 4) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 3) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 2) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 1) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="preview-container">
|
||||
<el-card shadow="hover" header="波浪指令效果（v-waves）作用于 btn">
|
||||
<el-row class="mb10" style="color: #808080">可选参数 v-waves=" |light|red|orange|purple|green|teal"</el-row>
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button size="default" v-waves>
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
默认效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default" v-waves="'light'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
light 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="default" v-waves="'red'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
red 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default" v-waves="'orange'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
orange 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="warning" size="default" v-waves="'purple'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
purple 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default" v-waves="'green'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
green 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default" v-waves="'teal'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
teal 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" header="波浪指令效果（v-waves）作用于 div" class="mt15">
|
||||
<div class="waterfall-first">
|
||||
<div class="waterfall-first-item" v-for="v in 12" :key="v" v-waves>
|
||||
<div class="w100 h100 flex">
|
||||
<span class="flex-margin">{{ v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWaves',
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.preview-container {
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.waterfall-first {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
|
||||
grid-gap: 0.25em;
|
||||
grid-auto-flow: row dense;
|
||||
grid-auto-rows: 20px;
|
||||
.waterfall-first-item {
|
||||
width: 100%;
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
&:nth-of-type(3n + 1) {
|
||||
grid-row: auto / span 5;
|
||||
}
|
||||
&:nth-of-type(3n + 2) {
|
||||
grid-row: auto / span 6;
|
||||
}
|
||||
&:nth-of-type(3n + 3) {
|
||||
grid-row: auto / span 8;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
|
||||
role="tooltip"
|
||||
data-popper-placement="bottom"
|
||||
:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
|
||||
:key="Math.random()"
|
||||
v-show="isShow"
|
||||
>
|
||||
<ul class="el-dropdown-menu">
|
||||
<li
|
||||
v-for="(v, k) in dropdownList"
|
||||
class="el-dropdown-menu__item"
|
||||
aria-disabled="false"
|
||||
tabindex="-1"
|
||||
:key="k"
|
||||
@click="onCurrentClick(v.contextMenuClickId)"
|
||||
>
|
||||
<SvgIcon :name="v.icon" />
|
||||
<span>{{ v.txt }}{{ item.type === 'line' ? '线' : '节点' }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="el-popper__arrow" style="left: 10px"></div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowContextmenu',
|
||||
props: {
|
||||
dropdown: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const state = reactive({
|
||||
isShow: false,
|
||||
dropdownList: [
|
||||
{ contextMenuClickId: 0, txt: '删除', icon: 'ele-Delete' },
|
||||
{ contextMenuClickId: 1, txt: '编辑', icon: 'ele-Edit' },
|
||||
],
|
||||
item: {
|
||||
type: 'node',
|
||||
},
|
||||
conn: {},
|
||||
});
|
||||
// 父级传过来的坐标 x,y 值
|
||||
const dropdowns = computed(() => {
|
||||
return <any>props.dropdown;
|
||||
});
|
||||
// 当前项菜单点击
|
||||
const onCurrentClick = (contextMenuClickId: number) => {
|
||||
emit('current', Object.assign({}, { contextMenuClickId }, state.item), state.conn);
|
||||
};
|
||||
// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
|
||||
const openContextmenu = (item: any, conn = {}) => {
|
||||
state.item = item;
|
||||
state.conn = conn;
|
||||
closeContextmenu();
|
||||
setTimeout(() => {
|
||||
state.isShow = true;
|
||||
}, 10);
|
||||
};
|
||||
// 关闭右键菜单
|
||||
const closeContextmenu = () => {
|
||||
state.isShow = false;
|
||||
};
|
||||
// 监听页面监听进行右键菜单的关闭
|
||||
onMounted(() => {
|
||||
document.body.addEventListener('click', closeContextmenu);
|
||||
document.body.addEventListener('contextmenu', closeContextmenu);
|
||||
});
|
||||
// 页面卸载时，移除右键菜单监听事件
|
||||
onUnmounted(() => {
|
||||
document.body.removeEventListener('click', closeContextmenu);
|
||||
document.body.removeEventListener('contextmenu', closeContextmenu);
|
||||
});
|
||||
return {
|
||||
dropdowns,
|
||||
openContextmenu,
|
||||
closeContextmenu,
|
||||
onCurrentClick,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-contextmenu {
|
||||
transform-origin: center top;
|
||||
z-index: 2190;
|
||||
position: fixed;
|
||||
.el-dropdown-menu__item {
|
||||
font-size: 12px !important;
|
||||
white-space: nowrap;
|
||||
i {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer :title="`${nodeData.type === 'line' ? '线' : '节点'}操作`" v-model="isOpen" size="320px">
|
||||
<el-scrollbar>
|
||||
<Line v-if="nodeData.type === 'line'" @change="onLineChange" @close="close" ref="lineRef" />
|
||||
<Node v-else @submit="onNodeSubmit" @close="close" ref="nodeRef" />
|
||||
</el-scrollbar>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref, nextTick } from 'vue';
|
||||
import Line from './line.vue';
|
||||
import Node from './node.vue';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface WorkflowDrawerState {
|
||||
isOpen: boolean;
|
||||
nodeData: {
|
||||
type: string;
|
||||
};
|
||||
jsplumbConn: any;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowDrawer',
|
||||
components: { Line, Node },
|
||||
setup(props, { emit }) {
|
||||
const lineRef = ref();
|
||||
const nodeRef = ref();
|
||||
const state = reactive<WorkflowDrawerState>({
|
||||
isOpen: false,
|
||||
nodeData: {
|
||||
type: 'node',
|
||||
},
|
||||
jsplumbConn: {},
|
||||
});
|
||||
// 打开抽屉
|
||||
const open = (item: any, conn: any) => {
|
||||
state.isOpen = true;
|
||||
state.jsplumbConn = conn;
|
||||
state.nodeData = item;
|
||||
nextTick(() => {
|
||||
if (item.type === 'line') lineRef.value.getParentData(item);
|
||||
else nodeRef.value.getParentData(item);
|
||||
});
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
state.isOpen = false;
|
||||
};
|
||||
// 线 label 内容改变时
|
||||
const onLineChange = (label: any) => {
|
||||
state.jsplumbConn.label = label;
|
||||
emit('label', state.jsplumbConn);
|
||||
};
|
||||
// 节点内容改变时
|
||||
const onNodeSubmit = (data: object) => {
|
||||
emit('node', data);
|
||||
};
|
||||
return {
|
||||
lineRef,
|
||||
nodeRef,
|
||||
open,
|
||||
close,
|
||||
onLineChange,
|
||||
onNodeSubmit,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="pt15 pr15 pb15 pl15">
|
||||
<el-form :model="line" size="default" label-width="50px">
|
||||
<el-form-item label="来往">
|
||||
<el-input v-model="line.contact" placeholder="来往" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-input v-model="line.type" placeholder="类型" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="label">
|
||||
<el-input v-model="line.label" placeholder="请输入label内容" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onLineTextReset">
|
||||
<SvgIcon name="ele-RefreshRight" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button @click="onLineTextChange" type="primary">
|
||||
<SvgIcon name="ele-Check" />
|
||||
保存
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs } from 'vue';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface WorkflowDrawerLineState {
|
||||
line: any;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowDrawerLine',
|
||||
setup(props, { emit }) {
|
||||
const state = reactive<WorkflowDrawerLineState>({
|
||||
line: {},
|
||||
});
|
||||
// 获取父组件数据
|
||||
const getParentData = (data: object) => {
|
||||
state.line = data;
|
||||
};
|
||||
// 重置
|
||||
const onLineTextReset = () => {
|
||||
state.line.label = '';
|
||||
};
|
||||
// 保存
|
||||
const onLineTextChange = () => {
|
||||
emit('change', state.line.label);
|
||||
emit('close');
|
||||
};
|
||||
return {
|
||||
getParentData,
|
||||
onLineTextReset,
|
||||
onLineTextChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div class="workflow-drawer-node">
|
||||
<el-tabs type="border-card" v-model="tabsActive">
|
||||
<!-- 节点编辑 -->
|
||||
<el-tab-pane label="节点编辑" name="1">
|
||||
<el-scrollbar>
|
||||
<el-form :model="node" :rules="nodeRules" ref="nodeFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
|
||||
<el-form-item label="数据id" prop="id">
|
||||
<el-input v-model="node.id" placeholder="请输入数据id" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="节点id" prop="nodeId">
|
||||
<el-input v-model="node.nodeId" placeholder="请输入节点id" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-input v-model="node.type" placeholder="请输入类型" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="left坐标" prop="left">
|
||||
<el-input v-model="node.left" placeholder="请输入left坐标" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="top坐标" prop="top">
|
||||
<el-input v-model="node.top" placeholder="请输入top坐标" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="icon图标" prop="icon">
|
||||
<el-input v-model="node.icon" placeholder="请输入icon图标" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="node.name" placeholder="请输入名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="mb15" @click="onNodeRefresh">
|
||||
<SvgIcon name="ele-RefreshRight" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button type="primary" class="mb15" @click="onNodeSubmit">
|
||||
<SvgIcon name="ele-Check" />
|
||||
保存
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 扩展表单 -->
|
||||
<el-tab-pane label="扩展表单" name="2">
|
||||
<el-scrollbar>
|
||||
<el-form :model="form" ref="extendFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
|
||||
<el-form-item
|
||||
:label="val.label"
|
||||
:prop="val.prop"
|
||||
v-for="(val, key) in node.from"
|
||||
:key="key"
|
||||
:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: 'blur' }]"
|
||||
>
|
||||
<el-input
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
clearable
|
||||
v-if="val.type === 'input'"
|
||||
:disabled="val.disabled"
|
||||
></el-input>
|
||||
<el-select v-model="form[val.prop]" placeholder="请选择" v-if="val.type === 'select'" clearable :disabled="val.disabled">
|
||||
<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
<el-checkbox-group v-model="form[val.prop]" v-if="val.type === 'checkbox'" :disabled="val.disabled">
|
||||
<el-checkbox label="美食推荐" name="type"></el-checkbox>
|
||||
<el-checkbox label="统计分析" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="mb15" @click="onExtendRefresh">
|
||||
<SvgIcon name="ele-RefreshRight" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button type="primary" class="mb15" @click="onExtendSubmit" :loading="loading.extend">
|
||||
<SvgIcon name="ele-Check" />
|
||||
保存
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 图表可视化 -->
|
||||
<el-tab-pane label="图表可视化" name="3">
|
||||
<el-scrollbar>
|
||||
<div class="flex-content-right">
|
||||
<div style="height: 200px; width: 320px" ref="chartsMonitorRef"></div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref, nextTick, getCurrentInstance } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface WorkflowDrawerNodeState {
|
||||
node: { [key: string]: any };
|
||||
nodeRules: any;
|
||||
form: any;
|
||||
tabsActive: string;
|
||||
loading: {
|
||||
extend: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowDrawerNode',
|
||||
setup(props, { emit }) {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const nodeFormRef = ref();
|
||||
const extendFormRef = ref();
|
||||
const chartsMonitorRef = ref();
|
||||
const state = reactive<WorkflowDrawerNodeState>({
|
||||
node: {},
|
||||
nodeRules: {
|
||||
id: [{ required: true, message: '请输入数据id', trigger: 'blur' }],
|
||||
nodeId: [{ required: true, message: '请输入节点id', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
|
||||
left: [{ required: true, message: '请输入left坐标', trigger: 'blur' }],
|
||||
top: [{ required: true, message: '请输入top坐标', trigger: 'blur' }],
|
||||
icon: [{ required: true, message: '请输入icon图标', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
},
|
||||
form: {
|
||||
module: [],
|
||||
},
|
||||
tabsActive: '1',
|
||||
loading: {
|
||||
extend: false,
|
||||
},
|
||||
});
|
||||
// 获取父组件数据
|
||||
const getParentData = (data: object) => {
|
||||
state.tabsActive = '1';
|
||||
state.node = data;
|
||||
initChartsMonitor();
|
||||
};
|
||||
// 节点编辑-重置
|
||||
const onNodeRefresh = () => {
|
||||
state.node.icon = '';
|
||||
state.node.name = '';
|
||||
};
|
||||
// 节点编辑-保存
|
||||
const onNodeSubmit = () => {
|
||||
nodeFormRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
emit('submit', state.node);
|
||||
emit('close');
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 扩展表单-重置
|
||||
const onExtendRefresh = () => {
|
||||
extendFormRef.value.resetFields();
|
||||
};
|
||||
// 扩展表单-保存
|
||||
const onExtendSubmit = () => {
|
||||
extendFormRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
state.loading.extend = true;
|
||||
setTimeout(() => {
|
||||
state.loading.extend = false;
|
||||
ElMessage.success('保存成功');
|
||||
emit('close');
|
||||
}, 1000);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 图表可视化-初始化
|
||||
const initChartsMonitor = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
|
||||
const numsOne = [];
|
||||
const numsTwo = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
numsOne.push(`${Math.floor(Math.random() * 52 + 10)}:${Math.floor(Math.random() * 52 + 1)}`);
|
||||
numsTwo.push(Math.floor(Math.random() * 52 + 1));
|
||||
}
|
||||
const option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 30,
|
||||
bottom: 30,
|
||||
left: 50,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: numsOne,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
itemStyle: {
|
||||
color: '#289df5',
|
||||
borderColor: '#289df5',
|
||||
areaStyle: {
|
||||
type: 'default',
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
data: numsTwo,
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
nextTick(() => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
return {
|
||||
nodeFormRef,
|
||||
extendFormRef,
|
||||
chartsMonitorRef,
|
||||
getParentData,
|
||||
onNodeRefresh,
|
||||
onNodeSubmit,
|
||||
onExtendRefresh,
|
||||
onExtendSubmit,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.workflow-drawer-node {
|
||||
:deep {
|
||||
.el-tabs {
|
||||
box-shadow: unset;
|
||||
border: unset;
|
||||
.el-tabs__nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.el-tabs__item {
|
||||
flex: 1;
|
||||
padding: unset;
|
||||
text-align: center;
|
||||
&:first-of-type.is-active {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&:last-of-type.is-active {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-tabs__content {
|
||||
padding: 0;
|
||||
height: calc(100vh - 90px);
|
||||
.el-tab-pane {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="workflow-tool-help">
|
||||
<el-dialog v-model="isShow" width="769px">
|
||||
<template #header>
|
||||
<div v-drag="['.workflow-tool-help .el-dialog', '.workflow-tool-help .el-dialog__header']">使用帮助</div>
|
||||
</template>
|
||||
<div>1、拖入：鼠标移入左侧导航中，鼠标形状改变时拖动到右侧网格状的视图中。</div>
|
||||
<div class="mt10">2、移动：鼠标移入到视图中的某个节点元素，鼠标形状改变时拖动改变位置。</div>
|
||||
<div class="mt10">3、连线：鼠标移入到视图中的某个节点元素的icon(图标)，鼠标形状改变（变成"+"），按下鼠标左键进行拖线连接。</div>
|
||||
<div class="mt10">4、节点：鼠标移入到视图中的某个节点元素，点击鼠标右键可进行删除、编辑节点。</div>
|
||||
<div class="mt10 mb10">5、线条：鼠标移入到视图中的某个线条，线条颜色改变时，点击鼠标右键可进行删除、编辑线条。</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs } from 'vue';
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowToolHelp',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
isShow: false,
|
||||
});
|
||||
// 打开弹窗
|
||||
const open = () => {
|
||||
state.isShow = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
state.isShow = false;
|
||||
};
|
||||
return {
|
||||
open,
|
||||
close,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="workflow-tool">
|
||||
<div class="pl15">{{ setToolTitle }}</div>
|
||||
<div class="workflow-tool-right">
|
||||
<div class="workflow-tool-icon" v-for="(v, k) in toolList" :key="k" :title="v.title" @click="onToolClick(v.fnName)">
|
||||
<SvgIcon :name="v.icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, reactive, toRefs } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowTool',
|
||||
setup(props, { emit }) {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const state = reactive({
|
||||
toolList: [
|
||||
{ icon: 'ele-Help', title: '帮助', fnName: 'help' },
|
||||
{ icon: 'ele-Download', title: '下载', fnName: 'download' },
|
||||
{ icon: 'ele-Check', title: '提交', fnName: 'submit' },
|
||||
{ icon: 'ele-DocumentCopy', title: '复制', fnName: 'copy' },
|
||||
{ icon: 'ele-Delete', title: '删除', fnName: 'del' },
|
||||
{ icon: 'ele-FullScreen', title: '全屏', fnName: 'fullscreen' },
|
||||
],
|
||||
});
|
||||
// 设置 tool 标题
|
||||
const setToolTitle = computed(() => {
|
||||
let { globalTitle } = themeConfig.value;
|
||||
return `${globalTitle}工作流`;
|
||||
});
|
||||
// 顶部工具栏
|
||||
const onToolClick = (fnName: string) => {
|
||||
emit('tool', fnName);
|
||||
};
|
||||
return {
|
||||
setToolTitle,
|
||||
onToolClick,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.workflow-tool {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
color: var(--el-text-color-primary);
|
||||
.workflow-tool-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&-icon {
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
color: var(--next-bg-topBarColor);
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
i {
|
||||
display: inline-block;
|
||||
animation: logoAnimation 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,693 @@
|
||||
<template>
|
||||
<div class="workflow-container">
|
||||
<div class="workflow-mask" v-if="isShow"></div>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="workflow">
|
||||
<!-- 顶部工具栏 -->
|
||||
<Tool @tool="onToolClick" />
|
||||
|
||||
<!-- 左侧导航区 -->
|
||||
<div class="workflow-content">
|
||||
<div class="workflow-left">
|
||||
<el-scrollbar>
|
||||
<div
|
||||
ref="leftNavRefs"
|
||||
v-for="(val, key) in leftNavList"
|
||||
:key="val.id"
|
||||
:style="{ height: val.isOpen ? 'auto' : '50px', overflow: 'hidden' }"
|
||||
class="workflow-left-id"
|
||||
>
|
||||
<div class="workflow-left-title" @click="onTitleClick(val)">
|
||||
<span>{{ val.title }}</span>
|
||||
<SvgIcon :name="val.isOpen ? 'ele-ArrowDown' : 'ele-ArrowRight'" />
|
||||
</div>
|
||||
<div class="workflow-left-item" v-for="(v, k) in val.children" :key="k" :data-name="v.name" :data-icon="v.icon" :data-id="v.id">
|
||||
<div class="workflow-left-item-icon">
|
||||
<SvgIcon :name="v.icon" class="workflow-icon-drag" />
|
||||
<div class="font10 pl5 name">{{ v.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<!-- 右侧绘画区 -->
|
||||
<div class="workflow-right" ref="workflowRightRef">
|
||||
<div
|
||||
v-for="(v, k) in jsplumbData.nodeList"
|
||||
:key="v.nodeId"
|
||||
:id="v.nodeId"
|
||||
:data-node-id="v.nodeId"
|
||||
:class="v.class"
|
||||
:style="{ left: v.left, top: v.top }"
|
||||
@click="onItemCloneClick(k)"
|
||||
@contextmenu.prevent="onContextmenu(v, k, $event)"
|
||||
>
|
||||
<div class="workflow-right-box" :class="{ 'workflow-right-active': jsPlumbNodeIndex === k }">
|
||||
<div class="workflow-left-item-icon">
|
||||
<SvgIcon :name="v.icon" class="workflow-icon-drag" />
|
||||
<div class="font10 pl5 name">{{ v.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 节点右键菜单 -->
|
||||
<Contextmenu :dropdown="dropdownNode" ref="contextmenuNodeRef" @current="onCurrentNodeClick" />
|
||||
<!-- 线右键菜单 -->
|
||||
<Contextmenu :dropdown="dropdownLine" ref="contextmenuLineRef" @current="onCurrentLineClick" />
|
||||
<!-- 抽屉表单、线 -->
|
||||
<Drawer ref="drawerRef" @label="setLineLabel" @node="setNodeContent" />
|
||||
|
||||
<!-- 顶部工具栏-帮助弹窗 -->
|
||||
<Help ref="helpRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, computed, onMounted, onUnmounted, nextTick, ref } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { jsPlumb } from 'jsplumb';
|
||||
import Sortable from 'sortablejs';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
import Tool from './component/tool/index.vue';
|
||||
import Help from './component/tool/help.vue';
|
||||
import Contextmenu from './component/contextmenu/index.vue';
|
||||
import Drawer from './component/drawer/index.vue';
|
||||
import commonFunction from '/@/utils/commonFunction';
|
||||
import { leftNavList } from './js/mock';
|
||||
import { jsplumbDefaults, jsplumbMakeSource, jsplumbMakeTarget, jsplumbConnect } from './js/config';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface NodeListState {
|
||||
id: string | number;
|
||||
nodeId: string | undefined;
|
||||
class: HTMLElement | string;
|
||||
left: number | string;
|
||||
top: number | string;
|
||||
icon: string;
|
||||
name: string;
|
||||
}
|
||||
interface LineListState {
|
||||
sourceId: string;
|
||||
targetId: string;
|
||||
label: string;
|
||||
}
|
||||
interface XyState {
|
||||
x: string | number;
|
||||
y: string | number;
|
||||
}
|
||||
interface WorkflowState {
|
||||
workflowRightRef: HTMLDivElement | null;
|
||||
leftNavRefs: any[];
|
||||
leftNavList: any[];
|
||||
dropdownNode: XyState;
|
||||
dropdownLine: XyState;
|
||||
isShow: boolean;
|
||||
jsPlumb: any;
|
||||
jsPlumbNodeIndex: null | number;
|
||||
jsplumbDefaults: any;
|
||||
jsplumbMakeSource: any;
|
||||
jsplumbMakeTarget: any;
|
||||
jsplumbConnect: any;
|
||||
jsplumbData: {
|
||||
nodeList: Array<NodeListState>;
|
||||
lineList: Array<LineListState>;
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflow',
|
||||
components: { Tool, Contextmenu, Drawer, Help },
|
||||
setup() {
|
||||
const contextmenuNodeRef = ref();
|
||||
const contextmenuLineRef = ref();
|
||||
const drawerRef = ref();
|
||||
const helpRef = ref();
|
||||
const stores = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(stores);
|
||||
const { copyText } = commonFunction();
|
||||
const state = reactive<WorkflowState>({
|
||||
workflowRightRef: null as HTMLDivElement | null,
|
||||
leftNavRefs: [],
|
||||
leftNavList: [],
|
||||
dropdownNode: { x: '', y: '' },
|
||||
dropdownLine: { x: '', y: '' },
|
||||
isShow: false,
|
||||
jsPlumb: null,
|
||||
jsPlumbNodeIndex: null,
|
||||
jsplumbDefaults,
|
||||
jsplumbMakeSource,
|
||||
jsplumbMakeTarget,
|
||||
jsplumbConnect,
|
||||
jsplumbData: {
|
||||
nodeList: [],
|
||||
lineList: [],
|
||||
},
|
||||
});
|
||||
// 设置 view 的高度
|
||||
const setViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// 设置 宽度小于 768，不支持操
|
||||
const setClientWidth = () => {
|
||||
const clientWidth = document.body.clientWidth;
|
||||
clientWidth < 768 ? (state.isShow = true) : (state.isShow = false);
|
||||
};
|
||||
// 左侧导航-数据初始化
|
||||
const initLeftNavList = () => {
|
||||
state.leftNavList = leftNavList;
|
||||
state.jsplumbData = {
|
||||
nodeList: [
|
||||
{ nodeId: 'huej738hbji', left: '148px', top: '93px', class: 'workflow-right-clone', icon: 'iconfont icon-gongju', name: '引擎', id: '11' },
|
||||
{
|
||||
nodeId: '52kcszzyxrd',
|
||||
left: '458px',
|
||||
top: '203px',
|
||||
class: 'workflow-right-clone',
|
||||
icon: 'iconfont icon-shouye_dongtaihui',
|
||||
name: '模版',
|
||||
id: '12',
|
||||
},
|
||||
{
|
||||
nodeId: 'nltskl6k4me',
|
||||
left: '164px',
|
||||
top: '350px',
|
||||
class: 'workflow-right-clone',
|
||||
icon: 'iconfont icon-zhongduancanshuchaxun',
|
||||
name: '名称',
|
||||
id: '13',
|
||||
},
|
||||
],
|
||||
lineList: [
|
||||
{ sourceId: 'huej738hbji', targetId: '52kcszzyxrd', label: '传送' },
|
||||
{ sourceId: 'huej738hbji', targetId: 'nltskl6k4me', label: '' },
|
||||
],
|
||||
};
|
||||
};
|
||||
// 左侧导航-初始化拖动
|
||||
const initSortable = () => {
|
||||
state.leftNavRefs.forEach((v) => {
|
||||
Sortable.create(v as HTMLDivElement, {
|
||||
group: {
|
||||
name: 'vue-next-admin-1',
|
||||
pull: 'clone',
|
||||
put: false,
|
||||
},
|
||||
animation: 0,
|
||||
sort: false,
|
||||
draggable: '.workflow-left-item',
|
||||
forceFallback: true,
|
||||
onEnd: function (evt: any) {
|
||||
const { name, icon, id } = evt.clone.dataset;
|
||||
const { layerX, layerY, clientX, clientY } = evt.originalEvent;
|
||||
const el = state.workflowRightRef!;
|
||||
const { x, y, width, height } = el.getBoundingClientRect();
|
||||
if (clientX < x || clientX > width + x || clientY < y || y > y + height) {
|
||||
ElMessage.warning('请把节点拖入到画布中');
|
||||
} else {
|
||||
// 节点id（唯一）
|
||||
const nodeId = Math.random().toString(36).substr(2, 12);
|
||||
// 处理节点数据
|
||||
const node = {
|
||||
nodeId,
|
||||
left: `${layerX - 40}px`,
|
||||
top: `${layerY - 15}px`,
|
||||
class: 'workflow-right-clone',
|
||||
name,
|
||||
icon,
|
||||
id,
|
||||
};
|
||||
// 右侧视图内容数组
|
||||
state.jsplumbData.nodeList.push(node);
|
||||
// 元素加载完毕时
|
||||
nextTick(() => {
|
||||
// 整个节点作为source或者target
|
||||
state.jsPlumb.makeSource(nodeId, state.jsplumbMakeSource);
|
||||
// // 整个节点作为source或者target
|
||||
state.jsPlumb.makeTarget(nodeId, state.jsplumbMakeTarget, jsplumbConnect);
|
||||
// 设置节点可以拖拽（此处为id值，非class）
|
||||
state.jsPlumb.draggable(nodeId, {
|
||||
containment: 'parent',
|
||||
stop: (el: any) => {
|
||||
state.jsplumbData.nodeList.forEach((v) => {
|
||||
if (v.nodeId === el.el.id) {
|
||||
// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
|
||||
v.left = `${el.pos[0]}px`;
|
||||
v.top = `${el.pos[1]}px`;
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
// 初始化 jsPlumb
|
||||
const initJsPlumb = () => {
|
||||
(<any>jsPlumb).ready(() => {
|
||||
state.jsPlumb = (<any>jsPlumb).getInstance({
|
||||
detachable: false,
|
||||
Container: 'workflow-right',
|
||||
});
|
||||
state.jsPlumb.fire('jsPlumbDemoLoaded', state.jsPlumb);
|
||||
// 导入默认配置
|
||||
state.jsPlumb.importDefaults(state.jsplumbDefaults);
|
||||
// 会使整个jsPlumb立即重绘。
|
||||
state.jsPlumb.setSuspendDrawing(false, true);
|
||||
// 初始化节点、线的链接
|
||||
initJsPlumbConnection();
|
||||
// 点击线弹出右键菜单
|
||||
state.jsPlumb.bind('contextmenu', (conn: any, originalEvent: MouseEvent) => {
|
||||
originalEvent.preventDefault();
|
||||
const { sourceId, targetId } = conn;
|
||||
const { clientX, clientY } = originalEvent;
|
||||
state.dropdownLine.x = clientX;
|
||||
state.dropdownLine.y = clientY;
|
||||
const v: any = state.jsplumbData.nodeList.find((v) => v.nodeId === targetId);
|
||||
const line: any = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
|
||||
v.type = 'line';
|
||||
v.label = line.label;
|
||||
contextmenuLineRef.value.openContextmenu(v, conn);
|
||||
});
|
||||
// 连线之前
|
||||
state.jsPlumb.bind('beforeDrop', (conn: any) => {
|
||||
const { sourceId, targetId } = conn;
|
||||
const item = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
|
||||
if (item) {
|
||||
ElMessage.warning('关系已存在，不可重复连接');
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
// 连线时
|
||||
state.jsPlumb.bind('connection', (conn: any) => {
|
||||
const { sourceId, targetId } = conn;
|
||||
state.jsplumbData.lineList.push({
|
||||
sourceId,
|
||||
targetId,
|
||||
label: '',
|
||||
});
|
||||
});
|
||||
// 删除连线时回调函数
|
||||
state.jsPlumb.bind('connectionDetached', (conn: any) => {
|
||||
const { sourceId, targetId } = conn;
|
||||
state.jsplumbData.lineList = state.jsplumbData.lineList.filter((line) => {
|
||||
if (line.sourceId == sourceId && line.targetId == targetId) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
// 初始化节点、线的链接
|
||||
const initJsPlumbConnection = () => {
|
||||
// 节点
|
||||
state.jsplumbData.nodeList.forEach((v) => {
|
||||
// 整个节点作为source或者target
|
||||
state.jsPlumb.makeSource(v.nodeId, state.jsplumbMakeSource);
|
||||
// 整个节点作为source或者target
|
||||
state.jsPlumb.makeTarget(v.nodeId, state.jsplumbMakeTarget, jsplumbConnect);
|
||||
// 设置节点可以拖拽（此处为id值，非class）
|
||||
state.jsPlumb.draggable(v.nodeId, {
|
||||
containment: 'parent',
|
||||
stop: (el: any) => {
|
||||
state.jsplumbData.nodeList.forEach((v) => {
|
||||
if (v.nodeId === el.el.id) {
|
||||
// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
|
||||
v.left = `${el.pos[0]}px`;
|
||||
v.top = `${el.pos[1]}px`;
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
// 线
|
||||
state.jsplumbData.lineList.forEach((v) => {
|
||||
state.jsPlumb.connect(
|
||||
{
|
||||
source: v.sourceId,
|
||||
target: v.targetId,
|
||||
label: v.label,
|
||||
},
|
||||
state.jsplumbConnect
|
||||
);
|
||||
});
|
||||
};
|
||||
// 左侧导航-菜单标题点击
|
||||
const onTitleClick = (val: any) => {
|
||||
val.isOpen = !val.isOpen;
|
||||
};
|
||||
// 右侧内容区-当前项点击
|
||||
const onItemCloneClick = (k: number) => {
|
||||
state.jsPlumbNodeIndex = k;
|
||||
};
|
||||
// 右侧内容区-当前项右键菜单点击
|
||||
const onContextmenu = (v: any, k: number, e: MouseEvent) => {
|
||||
state.jsPlumbNodeIndex = k;
|
||||
const { clientX, clientY } = e;
|
||||
state.dropdownNode.x = clientX;
|
||||
state.dropdownNode.y = clientY;
|
||||
v.type = 'node';
|
||||
v.label = '';
|
||||
let item: any = {};
|
||||
state.leftNavList.forEach((l) => {
|
||||
if (l.children) if (l.children.find((c: any) => c.id === v.id)) item = l.children.find((c: any) => c.id === v.id);
|
||||
});
|
||||
v.from = item.form;
|
||||
contextmenuNodeRef.value.openContextmenu(v);
|
||||
};
|
||||
// 右侧内容区-当前项右键菜单点击回调(节点)
|
||||
const onCurrentNodeClick = (item: any) => {
|
||||
const { contextMenuClickId, nodeId } = item;
|
||||
if (contextMenuClickId === 0) {
|
||||
const nodeIndex = state.jsplumbData.nodeList.findIndex((item) => item.nodeId === nodeId);
|
||||
state.jsplumbData.nodeList.splice(nodeIndex, 1);
|
||||
state.jsPlumb.removeAllEndpoints(nodeId);
|
||||
state.jsPlumbNodeIndex = null;
|
||||
} else if (contextMenuClickId === 1) {
|
||||
drawerRef.value.open(item);
|
||||
}
|
||||
};
|
||||
// 右侧内容区-当前项右键菜单点击回调(线)
|
||||
const onCurrentLineClick = (item: any, conn: any) => {
|
||||
const { contextMenuClickId } = item;
|
||||
const { endpoints } = conn;
|
||||
const intercourse: any = [];
|
||||
endpoints.forEach((v: any) => {
|
||||
intercourse.push({
|
||||
id: v.element.id,
|
||||
innerText: v.element.innerText,
|
||||
});
|
||||
});
|
||||
item.contact = `${intercourse[0].innerText}(${intercourse[0].id}) => ${intercourse[1].innerText}(${intercourse[1].id})`;
|
||||
if (contextMenuClickId === 0) state.jsPlumb.deleteConnection(conn);
|
||||
else if (contextMenuClickId === 1) drawerRef.value.open(item, conn);
|
||||
};
|
||||
// 设置线的 label
|
||||
const setLineLabel = (obj: any) => {
|
||||
const { sourceId, targetId, label } = obj;
|
||||
const conn = state.jsPlumb.getConnections({
|
||||
source: sourceId,
|
||||
target: targetId,
|
||||
})[0];
|
||||
conn.setLabel(label);
|
||||
if (!label || label === '') {
|
||||
conn.addClass('workflow-right-empty-label');
|
||||
} else {
|
||||
conn.removeClass('workflow-right-empty-label');
|
||||
conn.addClass('workflow-right-label');
|
||||
}
|
||||
state.jsplumbData.lineList.forEach((v) => {
|
||||
if (v.sourceId === sourceId && v.targetId === targetId) v.label = label;
|
||||
});
|
||||
};
|
||||
// 设置节点内容
|
||||
const setNodeContent = (obj: any) => {
|
||||
const { nodeId, name, icon } = obj;
|
||||
// 设置节点 name 与 icon
|
||||
state.jsplumbData.nodeList.forEach((v) => {
|
||||
if (v.nodeId === nodeId) {
|
||||
v.name = name;
|
||||
v.icon = icon;
|
||||
}
|
||||
});
|
||||
// 重绘
|
||||
nextTick(() => {
|
||||
state.jsPlumb.setSuspendDrawing(false, true);
|
||||
});
|
||||
};
|
||||
// 顶部工具栏-当前项点击
|
||||
const onToolClick = (fnName: String) => {
|
||||
switch (fnName) {
|
||||
case 'help':
|
||||
onToolHelp();
|
||||
break;
|
||||
case 'download':
|
||||
onToolDownload();
|
||||
break;
|
||||
case 'submit':
|
||||
onToolSubmit();
|
||||
break;
|
||||
case 'copy':
|
||||
onToolCopy();
|
||||
break;
|
||||
case 'del':
|
||||
onToolDel();
|
||||
break;
|
||||
case 'fullscreen':
|
||||
onToolFullscreen();
|
||||
break;
|
||||
}
|
||||
};
|
||||
// 顶部工具栏-帮助
|
||||
const onToolHelp = () => {
|
||||
nextTick(() => {
|
||||
helpRef.value.open();
|
||||
});
|
||||
};
|
||||
// 顶部工具栏-下载
|
||||
const onToolDownload = () => {
|
||||
const { globalTitle } = themeConfig.value;
|
||||
const href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(state.jsplumbData, null, '\t'));
|
||||
const aLink = document.createElement('a');
|
||||
aLink.setAttribute('href', href);
|
||||
aLink.setAttribute('download', `${globalTitle}工作流.json`);
|
||||
aLink.click();
|
||||
aLink.remove();
|
||||
ElMessage.success('下载成功');
|
||||
};
|
||||
// 顶部工具栏-提交
|
||||
const onToolSubmit = () => {
|
||||
// console.log(state.jsplumbData);
|
||||
ElMessage.success('数据提交成功');
|
||||
};
|
||||
// 顶部工具栏-复制
|
||||
const onToolCopy = () => {
|
||||
copyText(JSON.stringify(state.jsplumbData));
|
||||
};
|
||||
// 顶部工具栏-删除
|
||||
const onToolDel = () => {
|
||||
ElMessageBox.confirm('此操作将清空画布，是否继续？', '提示', {
|
||||
confirmButtonText: '清空',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
.then(() => {
|
||||
state.jsplumbData.nodeList.forEach((v) => {
|
||||
state.jsPlumb.removeAllEndpoints(v.nodeId);
|
||||
});
|
||||
nextTick(() => {
|
||||
state.jsplumbData = {
|
||||
nodeList: [],
|
||||
lineList: [],
|
||||
};
|
||||
ElMessage.success('清空画布成功');
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 顶部工具栏-全屏
|
||||
const onToolFullscreen = () => {
|
||||
stores.setCurrenFullscreen(true);
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(async () => {
|
||||
await initLeftNavList();
|
||||
initSortable();
|
||||
initJsPlumb();
|
||||
setClientWidth();
|
||||
window.addEventListener('resize', setClientWidth);
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', setClientWidth);
|
||||
});
|
||||
return {
|
||||
setViewHeight,
|
||||
setClientWidth,
|
||||
setLineLabel,
|
||||
setNodeContent,
|
||||
onTitleClick,
|
||||
onItemCloneClick,
|
||||
onContextmenu,
|
||||
onCurrentNodeClick,
|
||||
onCurrentLineClick,
|
||||
contextmenuNodeRef,
|
||||
contextmenuLineRef,
|
||||
drawerRef,
|
||||
helpRef,
|
||||
onToolClick,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.workflow-container {
|
||||
position: relative;
|
||||
.workflow {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
.workflow-content {
|
||||
display: flex;
|
||||
height: calc(100% - 35px);
|
||||
.workflow-left {
|
||||
width: 220px;
|
||||
height: 100%;
|
||||
border-right: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
:deep(.el-collapse-item__content) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.workflow-left-title {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-top: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
color: var(--el-text-color-primary);
|
||||
cursor: default;
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.workflow-left-item {
|
||||
display: inline-block;
|
||||
width: calc(50% - 15px);
|
||||
position: relative;
|
||||
cursor: move;
|
||||
margin: 0 0 10px 10px;
|
||||
.workflow-left-item-icon {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
padding: 5px 10px;
|
||||
border: 1px dashed transparent;
|
||||
background: var(--next-bg-color);
|
||||
border-radius: 3px;
|
||||
i,
|
||||
.name {
|
||||
color: var(--el-text-color-secondary);
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
&:hover {
|
||||
transition: all 0.3s ease;
|
||||
border: 1px dashed var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
border-radius: 5px;
|
||||
i,
|
||||
.name {
|
||||
transition: all 0.3s ease;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .workflow-left-id:first-of-type {
|
||||
.workflow-left-title {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.workflow-right {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(90deg, rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%),
|
||||
linear-gradient(rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%);
|
||||
background-size: 10px 10px;
|
||||
.workflow-right-clone {
|
||||
position: absolute;
|
||||
.workflow-right-box {
|
||||
height: 35px;
|
||||
align-items: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 0 10px;
|
||||
border-radius: 3px;
|
||||
cursor: move;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 94.5px;
|
||||
background: var(--el-color-white);
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
.workflow-left-item-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
}
|
||||
&:hover {
|
||||
border: 1px dashed var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
transition: all 0.3s ease;
|
||||
color: var(--el-color-primary);
|
||||
i {
|
||||
cursor: Crosshair;
|
||||
}
|
||||
}
|
||||
}
|
||||
.workflow-right-active {
|
||||
border: 1px dashed var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
:deep(.jtk-overlay):not(.aLabel) {
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5) !important;
|
||||
color: var(--el-text-color-secondary) !important;
|
||||
background: var(--el-color-white) !important;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
:deep(.jtk-overlay.workflow-right-empty-label) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.workflow-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
&::after {
|
||||
content: '手机版不支持 jsPlumb 操作';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
// jsplumb 默认配置
|
||||
export const jsplumbDefaults = {
|
||||
// 多个锚点 [源锚点，目标锚点]
|
||||
Anchors: [
|
||||
'Top',
|
||||
'TopCenter',
|
||||
'TopRight',
|
||||
'TopLeft',
|
||||
'Right',
|
||||
'RightMiddle',
|
||||
'Bottom',
|
||||
'BottomCenter',
|
||||
'BottomRight',
|
||||
'BottomLeft',
|
||||
'Left',
|
||||
'LeftMiddle',
|
||||
],
|
||||
// 连线的容器id
|
||||
Container: 'workflow-right',
|
||||
// 设置链接线的形状，如直线或者曲线之类的。anchor可以去设置锚点的位置。可选值"<Bezier|Flowchart|StateMachine|Straight>"
|
||||
Connector: ['Bezier', { curviness: 100 }],
|
||||
// 节点是否可以用鼠标拖动使其断开，默认为true。即用鼠标链接上的连线，也可以使用鼠标拖动让其断开。设置成false，可以让其拖动也不会自动断开
|
||||
ConnectionsDetachable: false,
|
||||
// 删除线的时候节点不删除
|
||||
DeleteEndpointsOnDetach: false,
|
||||
// 每当添加或以其他方式创建 Endpoint 并且 jsPlumb 尚未给出任何明确的 Endpoint 定义时将使用
|
||||
Endpoint: ['Blank', { Overlays: '' }],
|
||||
// 连接中源和目标端点的默认外观
|
||||
EndpointStyle: { fill: '#1879ffa1', outlineWidth: 1 },
|
||||
// jsPlumb 的内部日志记录是否打开
|
||||
LogEnabled: true,
|
||||
// 连接器的默认外观
|
||||
PaintStyle: {
|
||||
stroke: '#E0E3E7',
|
||||
strokeWidth: 1,
|
||||
outlineStroke: 'transparent',
|
||||
outlineWidth: 10,
|
||||
},
|
||||
// 用于配置任何可拖动元素的默认选项jsPlumb.draggable
|
||||
DragOptions: { cursor: 'pointer', zIndex: 2000 },
|
||||
// 添加到连接器和端点的默认叠加层。已弃用：从 4.x 开始，将不支持此功能。并非所有叠加层都可以连接到连接器和端点。
|
||||
Overlays: [
|
||||
[
|
||||
'Arrow',
|
||||
{
|
||||
width: 10, // 箭头尾部的宽度
|
||||
length: 8, // 从箭头的尾部到头部的距离
|
||||
location: 1, // 位置，建议使用0～1之间
|
||||
direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
|
||||
foldback: 0.623, // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
|
||||
},
|
||||
],
|
||||
[
|
||||
'Label',
|
||||
{
|
||||
label: '',
|
||||
location: 0.5,
|
||||
cssClass: 'aLabel',
|
||||
},
|
||||
],
|
||||
],
|
||||
// 默认渲染模式 svg、canvas
|
||||
RenderMode: 'svg',
|
||||
// 悬停状态下连接的默认外观
|
||||
HoverPaintStyle: { stroke: '#b0b2b5', strokeWidth: 1 },
|
||||
// 悬停状态下端点的默认外观
|
||||
EndpointHoverStyle: { fill: 'red' },
|
||||
// 端点和连接的默认范围。范围提供了对哪些端点可以连接到哪些其他端点的基本控制
|
||||
Scope: 'jsPlumb_DefaultScope',
|
||||
};
|
||||
|
||||
// 整个节点作为source或者target
|
||||
export const jsplumbMakeSource = {
|
||||
// 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
|
||||
filter: '.workflow-icon-drag',
|
||||
filterExclude: false,
|
||||
anchor: 'Continuous',
|
||||
// 是否允许自己连接自己
|
||||
allowLoopback: true,
|
||||
maxConnections: -1,
|
||||
};
|
||||
|
||||
// 整个节点作为source或者target
|
||||
export const jsplumbMakeTarget = {
|
||||
filter: '.workflow-icon-drag',
|
||||
filterExclude: false,
|
||||
// 是否允许自己连接自己
|
||||
anchor: 'Continuous',
|
||||
allowLoopback: true,
|
||||
dropOptions: { hoverClass: 'ef-drop-hover' },
|
||||
};
|
||||
|
||||
// 连线参数
|
||||
export const jsplumbConnect = {
|
||||
isSource: true,
|
||||
isTarget: true,
|
||||
// 动态锚点、提供了4个方向 Continuous、AutoDefault
|
||||
anchor: 'Continuous',
|
||||
};
|
||||
@@ -0,0 +1,262 @@
|
||||
// 左侧菜单导航数据
|
||||
export const leftNavList = [
|
||||
{
|
||||
title: '工作流',
|
||||
icon: 'iconfont icon-shouye',
|
||||
isOpen: true,
|
||||
id: '1',
|
||||
children: [
|
||||
{
|
||||
icon: 'iconfont icon-gongju',
|
||||
name: '引擎',
|
||||
id: '11',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '客户姓名',
|
||||
prop: 'name',
|
||||
placeholder: '请输入客户姓名',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '性别',
|
||||
prop: 'sex',
|
||||
placeholder: '请选择性别',
|
||||
required: true,
|
||||
disabled: false,
|
||||
options: [
|
||||
{
|
||||
value: '0',
|
||||
label: '女',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '男',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '员工编号',
|
||||
prop: 'number',
|
||||
placeholder: '请输入员工编号',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '办公电话',
|
||||
prop: 'mobile',
|
||||
placeholder: '请输入办公电话',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '权限分配',
|
||||
prop: 'role',
|
||||
placeholder: '请选择性别',
|
||||
required: true,
|
||||
disabled: false,
|
||||
options: [
|
||||
{
|
||||
value: '0',
|
||||
label: '编辑权限',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '删除权限',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: '模块选择',
|
||||
prop: 'module',
|
||||
placeholder: '请选择模块',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-shouye_dongtaihui',
|
||||
name: '模版',
|
||||
id: '12',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '等级',
|
||||
prop: 'grade',
|
||||
placeholder: '请输入等级',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '登记密码',
|
||||
prop: 'password',
|
||||
placeholder: '请输入登记密码',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-zhongduancanshuchaxun',
|
||||
name: '名称',
|
||||
id: '13',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '数据表',
|
||||
prop: 'dataSheet',
|
||||
placeholder: '请输入数据表',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '字段配置',
|
||||
prop: 'field',
|
||||
placeholder: '请输入字段配置',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-zhongduancanshu',
|
||||
name: '版本',
|
||||
id: '14',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '发布模板',
|
||||
prop: 'publish',
|
||||
placeholder: '请输入发布模板',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-bolangnengshiyanchang',
|
||||
name: '建模',
|
||||
id: '15',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '内容模板',
|
||||
prop: 'content',
|
||||
placeholder: '请输入内容模板',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-xingqiu',
|
||||
name: '节点',
|
||||
id: '16',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称6',
|
||||
prop: 'name16',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '流程',
|
||||
isOpen: true,
|
||||
icon: 'iconfont icon-caijian',
|
||||
id: '2',
|
||||
children: [
|
||||
{
|
||||
icon: 'iconfont icon-fuwenben',
|
||||
name: '实例',
|
||||
id: '21',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称7',
|
||||
prop: 'name21',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-fuwenbenkuang',
|
||||
name: '轨迹',
|
||||
id: '22',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称8',
|
||||
prop: 'name22',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-shangchuan',
|
||||
name: '数据',
|
||||
id: '23',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称9',
|
||||
prop: 'name23',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '任务',
|
||||
isOpen: true,
|
||||
icon: 'iconfont icon-shuju',
|
||||
id: '3',
|
||||
children: [
|
||||
{
|
||||
icon: 'iconfont icon-icon-',
|
||||
name: '参与人',
|
||||
id: '31',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称1',
|
||||
prop: 'name31',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-gerenzhongxin',
|
||||
name: '执行人',
|
||||
id: '32',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称2',
|
||||
prop: 'name32',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-fangkuang',
|
||||
name: '工单',
|
||||
id: '33',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称3',
|
||||
prop: 'name33',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="flex-margin color-primary">
|
||||
<div>paramsCommonDetails</div>
|
||||
<div class="mt10 mb10">路径：path: {{ params.path }}</div>
|
||||
<div>参数：query: {{ params.query }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'paramsCommonDetails',
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state = reactive({
|
||||
params: {
|
||||
path: '',
|
||||
query: '',
|
||||
},
|
||||
});
|
||||
// 设置 view 的高度
|
||||
const setViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
state.params = <any>route;
|
||||
});
|
||||
return {
|
||||
setViewHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="flex-margin" style="width: 400px">
|
||||
<el-result icon="success" title="普通路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
|
||||
<template #extra>
|
||||
<el-alert type="success" :closable="false" class="mb30">
|
||||
<template #default>
|
||||
<div>1、设置非国际化：格式：tagsViewName=xxx</div>
|
||||
<br />
|
||||
<div>2、设置国际化：格式：tagsViewName=JSON.stringify({"zh-cn":"测试用","en":"test+page","zh-tw":"測試用"})</div>
|
||||
<br />
|
||||
<div>3、设置国际化后，去顶栏切换语言查看演示效果</div>
|
||||
<br />
|
||||
<div>
|
||||
4、 <a href="https://gitee.com/q7but" target="_black">感谢@q7but</a>、
|
||||
<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/22/files" target="_black">!22 add 添加自定义 tagVIewName 拓展,支持国际化</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15" style="width: 400px"></el-input>
|
||||
<el-input v-model="value" placeholder="请输入路由参数 id 值" clearable style="width: 400px"></el-input>
|
||||
<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
|
||||
<SvgIcon name="iconfont icon-putong" />
|
||||
普通路由传参
|
||||
</el-button>
|
||||
<el-button type="primary" size="default" class="mt15" @click="onChangeI18n">
|
||||
<SvgIcon name="iconfont icon-fuhao-zhongwen" />
|
||||
{{ tagsViewNameIsI18n ? '普通的演示' : '国际化演示' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, defineComponent } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'paramsCommon',
|
||||
setup() {
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
tagsViewName: '',
|
||||
tagsViewNameIsI18n: false,
|
||||
});
|
||||
const router = useRouter();
|
||||
// 设置 view 的高度
|
||||
const setViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// 跳转到详情
|
||||
/**
|
||||
* 设置 tagsView 名称：
|
||||
* 传不同的 tagsViewName 值
|
||||
*/
|
||||
const onGoDetailsClick = () => {
|
||||
const params: any = { id: state.value };
|
||||
if (state.tagsViewName) params.tagsViewName = state.tagsViewName;
|
||||
router.push({
|
||||
path: '/params/common/details',
|
||||
query: params,
|
||||
});
|
||||
state.value = '';
|
||||
};
|
||||
const onChangeI18n = () => {
|
||||
state.tagsViewNameIsI18n = !state.tagsViewNameIsI18n;
|
||||
if (state.tagsViewNameIsI18n) {
|
||||
state.tagsViewName = JSON.stringify({
|
||||
'zh-cn': '测试用',
|
||||
en: 'test page',
|
||||
'zh-tw': '測試用',
|
||||
});
|
||||
} else {
|
||||
state.tagsViewName = '我是普通路由测试tagsViewName(非国际化)';
|
||||
}
|
||||
};
|
||||
return {
|
||||
setViewHeight,
|
||||
onGoDetailsClick,
|
||||
onChangeI18n,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="flex-margin color-primary">
|
||||
<div>paramsDynamicDetails</div>
|
||||
<div class="mt10 mb10">路径：path: {{ params.path }}</div>
|
||||
<div>参数：params: {{ params.params }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'paramsDynamicDetails',
|
||||
setup() {
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const route = useRoute();
|
||||
const state = reactive({
|
||||
params: {
|
||||
path: '',
|
||||
params: '',
|
||||
},
|
||||
});
|
||||
// 设置 view 的高度
|
||||
const setViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
state.params = <any>route;
|
||||
});
|
||||
return {
|
||||
setViewHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="flex-margin" style="width: 400px">
|
||||
<el-result icon="warning" title="动态路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
|
||||
<template #extra>
|
||||
<el-alert type="success" :closable="false" class="mb30">
|
||||
<template #default>
|
||||
<div>1、设置非国际化：格式：tagsViewName=xxx</div>
|
||||
<br />
|
||||
<div>2、设置国际化：格式：tagsViewName=JSON.stringify({"zh-cn":"测试用","en":"test+page","zh-tw":"測試用"})</div>
|
||||
<br />
|
||||
<div>3、设置国际化后，去顶栏切换语言查看演示效果</div>
|
||||
<br />
|
||||
<div>
|
||||
4、 <a href="https://gitee.com/q7but" target="_black">感谢@q7but</a>、
|
||||
<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/22/files" target="_black">!22 add 添加自定义 tagVIewName 拓展,支持国际化</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15" style="width: 400px"></el-input>
|
||||
<el-input v-model="value" placeholder="请输入路由参数id值" clearable style="width: 400px"></el-input>
|
||||
<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
|
||||
<SvgIcon name="iconfont icon-dongtai" />
|
||||
动态路由传参
|
||||
</el-button>
|
||||
<el-button type="primary" size="default" class="mt15" @click="onChangeI18n">
|
||||
<SvgIcon name="iconfont icon-fuhao-zhongwen" />
|
||||
{{ tagsViewNameIsI18n ? '普通的演示' : '国际化演示' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'paramsDynamic',
|
||||
setup() {
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
tagsViewName: '',
|
||||
tagsViewNameIsI18n: false,
|
||||
});
|
||||
const router = useRouter();
|
||||
// 设置 view 的高度
|
||||
const setViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// 跳转到详情
|
||||
const onGoDetailsClick = () => {
|
||||
if (!state.tagsViewName) return ElMessage.warning('动态路由tagsViewName为必填，因为路由配置了');
|
||||
if (!state.value) return ElMessage.warning('路由参数id值为必填');
|
||||
// name 值为路由中的 name
|
||||
router.push({
|
||||
name: 'paramsDynamicDetails',
|
||||
params: {
|
||||
t: 'gfast3.2后台管理系统',
|
||||
id: state.value,
|
||||
tagsViewName: state.tagsViewName,
|
||||
},
|
||||
});
|
||||
state.value = '';
|
||||
};
|
||||
const onChangeI18n = () => {
|
||||
state.tagsViewNameIsI18n = !state.tagsViewNameIsI18n;
|
||||
if (state.tagsViewNameIsI18n) {
|
||||
state.tagsViewName = JSON.stringify({
|
||||
'zh-cn': '我是动态路由',
|
||||
en: 'Im dynamic routing',
|
||||
'zh-tw': '我是動態路由',
|
||||
});
|
||||
} else {
|
||||
state.tagsViewName = '我是动态路由测试tagsViewName(非国际化)';
|
||||
}
|
||||
};
|
||||
return {
|
||||
setViewHeight,
|
||||
onGoDetailsClick,
|
||||
onChangeI18n,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div class="personal">
|
||||
<el-row>
|
||||
<!-- 个人信息 -->
|
||||
<el-col :xs="24" :sm="16">
|
||||
<el-card shadow="hover" header="个人信息">
|
||||
<div class="personal-user">
|
||||
<div class="personal-user-left">
|
||||
<el-upload class="h100 personal-user-left-upload" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1">
|
||||
<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="personal-user-right">
|
||||
<el-row>
|
||||
<el-col :span="24" class="personal-title mb18">{{ currentTime }}，admin，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="8" class="personal-item mb6">
|
||||
<div class="personal-item-label">昵称：</div>
|
||||
<div class="personal-item-value">小柒</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="16" class="personal-item mb6">
|
||||
<div class="personal-item-label">身份：</div>
|
||||
<div class="personal-item-value">超级管理</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="8" class="personal-item mb6">
|
||||
<div class="personal-item-label">登录IP：</div>
|
||||
<div class="personal-item-value">192.168.1.1</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="16" class="personal-item mb6">
|
||||
<div class="personal-item-label">登录时间：</div>
|
||||
<div class="personal-item-value">2021-02-05 18:47:26</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 消息通知 -->
|
||||
<el-col :xs="24" :sm="8" class="pl15 personal-info">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<span>消息通知</span>
|
||||
<span class="personal-info-more">更多</span>
|
||||
</template>
|
||||
<div class="personal-info-box">
|
||||
<ul class="personal-info-ul">
|
||||
<li v-for="(v, k) in newsInfoList" :key="k" class="personal-info-li">
|
||||
<a :href="v.link" target="_block" class="personal-info-li-title">{{ v.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 营销推荐 -->
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover" class="mt15" header="营销推荐">
|
||||
<el-row :gutter="15" class="personal-recommend-row">
|
||||
<el-col :sm="6" v-for="(v, k) in recommendList" :key="k" class="personal-recommend-col">
|
||||
<div class="personal-recommend" :style="{ 'background-color': v.bg }">
|
||||
<SvgIcon :name="v.icon" :size="70" :style="{ color: v.iconColor }" />
|
||||
<div class="personal-recommend-auto">
|
||||
<div>{{ v.title }}</div>
|
||||
<div class="personal-recommend-msg">{{ v.msg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 更新信息 -->
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
|
||||
<div class="personal-edit-title">基本信息</div>
|
||||
<el-form :model="personalForm" size="default" label-width="40px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="昵称">
|
||||
<el-input v-model="personalForm.name" placeholder="请输入昵称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="personalForm.email" placeholder="请输入邮箱" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="签名">
|
||||
<el-input v-model="personalForm.autograph" placeholder="请输入签名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="职业">
|
||||
<el-select v-model="personalForm.occupation" placeholder="请选择职业" clearable class="w100">
|
||||
<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
|
||||
<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
|
||||
<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="手机">
|
||||
<el-input v-model="personalForm.phone" placeholder="请输入手机" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="personalForm.sex" placeholder="请选择性别" clearable class="w100">
|
||||
<el-option label="男" value="1"></el-option>
|
||||
<el-option label="女" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item>
|
||||
<el-button type="primary">
|
||||
<el-icon>
|
||||
<ele-Position />
|
||||
</el-icon>
|
||||
更新个人信息
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="personal-edit-title mb15">账号安全</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">账户密码</div>
|
||||
<div class="personal-edit-safe-item-left-value">当前密码强度：强</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即修改</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">密保手机</div>
|
||||
<div class="personal-edit-safe-item-left-value">已绑定手机：132****4108</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即修改</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">密保问题</div>
|
||||
<div class="personal-edit-safe-item-left-value">已设置密保问题，账号安全大幅度提升</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即设置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">绑定QQ</div>
|
||||
<div class="personal-edit-safe-item-left-value">已绑定QQ：110****566</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即设置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, defineComponent } from 'vue';
|
||||
import { formatAxis } from '/@/utils/formatTime';
|
||||
import { newsInfoList, recommendList } from './mock';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface PersonalState {
|
||||
newsInfoList: any;
|
||||
recommendList: any;
|
||||
personalForm: any;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'personal',
|
||||
setup() {
|
||||
const state = reactive<PersonalState>({
|
||||
newsInfoList,
|
||||
recommendList,
|
||||
personalForm: {
|
||||
name: '',
|
||||
email: '',
|
||||
autograph: '',
|
||||
occupation: '',
|
||||
phone: '',
|
||||
sex: '',
|
||||
},
|
||||
});
|
||||
// 当前时间提示语
|
||||
const currentTime = computed(() => {
|
||||
return formatAxis(new Date());
|
||||
});
|
||||
return {
|
||||
currentTime,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '../../theme/mixins/index.scss' as *;
|
||||
.personal {
|
||||
.personal-user {
|
||||
height: 130px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.personal-user-left {
|
||||
width: 100px;
|
||||
height: 130px;
|
||||
border-radius: 3px;
|
||||
:deep(.el-upload) {
|
||||
height: 100%;
|
||||
}
|
||||
.personal-user-left-upload {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&:hover {
|
||||
img {
|
||||
animation: logoAnimation 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-user-right {
|
||||
flex: 1;
|
||||
padding: 0 15px;
|
||||
.personal-title {
|
||||
font-size: 18px;
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
.personal-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
.personal-item-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
.personal-item-value {
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-info {
|
||||
.personal-info-more {
|
||||
float: right;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.personal-info-box {
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
.personal-info-ul {
|
||||
list-style: none;
|
||||
.personal-info-li {
|
||||
font-size: 13px;
|
||||
padding-bottom: 10px;
|
||||
.personal-info-li-title {
|
||||
display: inline-block;
|
||||
@include text-ellipsis(1);
|
||||
color: var(--el-text-color-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
& a:hover {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-recommend-row {
|
||||
.personal-recommend-col {
|
||||
.personal-recommend {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.personal-recommend-auto {
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5%;
|
||||
color: var(--next-color-white);
|
||||
.personal-recommend-msg {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-edit {
|
||||
.personal-edit-title {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
color: var(--el-text-color-regular);
|
||||
&::after {
|
||||
content: '';
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.personal-edit-safe-box {
|
||||
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
padding: 15px 0;
|
||||
.personal-edit-safe-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.personal-edit-safe-item-left {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.personal-edit-safe-item-left-label {
|
||||
color: var(--el-text-color-regular);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.personal-edit-safe-item-left-value {
|
||||
color: var(--el-text-color-secondary);
|
||||
@include text-ellipsis(1);
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* 消息通知
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const newsInfoList: Array<object> = [
|
||||
{
|
||||
title: '[发布] 2021年02月28日发布基于 vue3.x + vite v1.0.0 版本',
|
||||
date: '02/28',
|
||||
link: 'https://gitee.com/lyt-top/vue-next-admin',
|
||||
},
|
||||
{
|
||||
title: '[发布] 2021年04月15日发布 vue2.x + webpack 重构版本',
|
||||
date: '04/15',
|
||||
link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
|
||||
},
|
||||
{
|
||||
title: '[重构] 2021年04月10日 重构 vue2.x + webpack v1.0.0 版本',
|
||||
date: '04/10',
|
||||
link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
|
||||
},
|
||||
{
|
||||
title: '[预览] 2020年12月08日，基于 vue3.x 版本后台模板的预览',
|
||||
date: '12/08',
|
||||
link: 'http://lyt-top.gitee.io/vue-next-admin-preview/#/login',
|
||||
},
|
||||
{
|
||||
title: '[预览] 2020年11月15日，基于 vue2.x 版本后台模板的预览',
|
||||
date: '11/15',
|
||||
link: 'https://lyt-top.gitee.io/vue-prev-admin-preview/#/login',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 营销推荐
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const recommendList: Array<object> = [
|
||||
{
|
||||
title: '优惠券',
|
||||
msg: '现金券、折扣券、营销必备',
|
||||
icon: 'ele-Food',
|
||||
bg: '#48D18D',
|
||||
iconColor: '#64d89d',
|
||||
},
|
||||
{
|
||||
title: '多人拼团',
|
||||
msg: '社交电商、开辟流量',
|
||||
icon: 'ele-ShoppingCart',
|
||||
bg: '#F95959',
|
||||
iconColor: '#F86C6B',
|
||||
},
|
||||
{
|
||||
title: '分销中心',
|
||||
msg: '轻松招募分销员，成功推广奖励',
|
||||
icon: 'ele-School',
|
||||
bg: '#8595F4',
|
||||
iconColor: '#92A1F4',
|
||||
},
|
||||
{
|
||||
title: '秒杀',
|
||||
msg: '超低价抢购引导更多销量',
|
||||
icon: 'ele-AlarmClock',
|
||||
bg: '#FEBB50',
|
||||
iconColor: '#FDC566',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="system-edit-dic-container">
|
||||
<el-dialog :title="(ruleForm.configId!==0?'修改':'添加')+'参数'" v-model="isShowDialog" width="769px">
|
||||
<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input v-model="ruleForm.configName" placeholder="请输入参数名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参数键名" prop="configKey">
|
||||
<el-input v-model="ruleForm.configKey" placeholder="请输入参数键名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参数键值" prop="configValue">
|
||||
<el-input v-model="ruleForm.configValue" placeholder="请输入参数键值" />
|
||||
</el-form-item>
|
||||
<el-form-item label="系统内置" prop="configType">
|
||||
<el-radio-group v-model="ruleForm.configType">
|
||||
<el-radio
|
||||
v-for="dict in sysYesNoOptions"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.configId!==0?'修 改':'添 加'}}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
|
||||
import {ElMessage} from "element-plus";
|
||||
import {addConfig, editConfig, getConfig} from "/@/api/system/config";
|
||||
interface RuleFormState {
|
||||
configId: number;
|
||||
configName: string;
|
||||
configKey: string;
|
||||
configValue: string;
|
||||
configType: string;
|
||||
remark: string
|
||||
}
|
||||
interface DicState {
|
||||
isShowDialog: boolean;
|
||||
ruleForm: RuleFormState;
|
||||
rules:{}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditDicData',
|
||||
props:{
|
||||
sysYesNoOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
setup(prop,{emit}) {
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const state = reactive<DicState>({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
configId: 0,
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configValue: '',
|
||||
configType: '0',
|
||||
remark: '',
|
||||
},
|
||||
rules: {
|
||||
configName: [
|
||||
{ required: true, message: "参数名称不能为空", trigger: "blur" }
|
||||
],
|
||||
configKey: [
|
||||
{ required: true, message: "参数键名不能为空", trigger: "blur" }
|
||||
],
|
||||
configValue: [
|
||||
{ required: true, message: "参数键值不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row: RuleFormState|null) => {
|
||||
resetForm();
|
||||
if (row){
|
||||
getConfig(row.configId).then((res:any)=>{
|
||||
const data:RuleFormState = res.data.data
|
||||
data.configType = String(data.configType)
|
||||
state.ruleForm = data
|
||||
})
|
||||
state.ruleForm = row;
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
const resetForm = ()=>{
|
||||
state.ruleForm = {
|
||||
configId: 0,
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configValue: '',
|
||||
configType: '0',
|
||||
remark: '',
|
||||
}
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 新增
|
||||
const onSubmit = () => {
|
||||
const formWrap = unref(formRef) as any;
|
||||
if (!formWrap) return;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
if(state.ruleForm.configId!==0){
|
||||
//修改
|
||||
editConfig(state.ruleForm).then(()=>{
|
||||
ElMessage.success('参数修改成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('dataList')
|
||||
})
|
||||
}else{
|
||||
//添加
|
||||
addConfig(state.ruleForm).then(()=>{
|
||||
ElMessage.success('参数添加成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('dataList')
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
formRef,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div class="system-dic-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input
|
||||
v-model="tableData.param.configName"
|
||||
placeholder="请输入参数名称"
|
||||
clearable
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数键名" prop="configKey">
|
||||
<el-input
|
||||
v-model="tableData.param.configKey"
|
||||
placeholder="请输入参数键名"
|
||||
clearable
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="系统内置" prop="configType" style="width: 200px;">
|
||||
<el-select
|
||||
v-model="tableData.param.configType"
|
||||
placeholder="系统内置"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option v-for="dict in sys_yes_no"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="tableData.param.dateRange"
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="dataList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" @click="resetQuery(queryRef)">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddDic">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增参数
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除参数
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="参数主键" align="center" prop="configId" />
|
||||
<el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="参数键值" align="center" prop="configValue" />
|
||||
<el-table-column label="系统内置" align="center" prop="configType" :formatter="typeFormat" />
|
||||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">修改</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total>0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="dataList"
|
||||
/>
|
||||
</el-card>
|
||||
<EditConfig ref="editDicRef" @dataList="dataList" :sysYesNoOptions="sys_yes_no"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {toRefs,reactive,onMounted,ref,defineComponent,unref,getCurrentInstance} from 'vue';
|
||||
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
|
||||
import EditConfig from '/@/views/system/config/component/editConfig.vue';
|
||||
import {deleteConfig, getConfigList} from "/@/api/system/config";
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableDataRow {
|
||||
configId: number;
|
||||
configName: string;
|
||||
configKey: string;
|
||||
configValue: string,
|
||||
configType: number,
|
||||
remark: string,
|
||||
createdAt: string,
|
||||
}
|
||||
interface TableDataState {
|
||||
ids:number[];
|
||||
tableData: {
|
||||
data: Array<TableDataRow>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
configName:string;
|
||||
configKey:string;
|
||||
configType:string;
|
||||
dateRange:string[];
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemDictDataList',
|
||||
components: { EditConfig },
|
||||
setup() {
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const addDicRef = ref();
|
||||
const editDicRef = ref();
|
||||
const queryRef = ref();
|
||||
const {sys_yes_no} = proxy.useDict('sys_yes_no')
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
dateRange:[],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
configName:'',
|
||||
configKey:'',
|
||||
configType:''
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
dataList()
|
||||
};
|
||||
const dataList=()=>{
|
||||
getConfigList(state.tableData.param).then((res:any)=>{
|
||||
state.tableData.data = res.data.list;
|
||||
state.tableData.total = res.data.total;
|
||||
});
|
||||
};
|
||||
// 打开新增字典弹窗
|
||||
const onOpenAddDic = () => {
|
||||
editDicRef.value.openDialog();
|
||||
};
|
||||
// 打开修改字典弹窗
|
||||
const onOpenEditDic = (row: TableDataRow) => {
|
||||
editDicRef.value.openDialog(row);
|
||||
};
|
||||
// 删除字典
|
||||
const onRowDel = (row: TableDataRow) => {
|
||||
let msg = '你确定要删除所选数据？';
|
||||
let ids:number[] = [] ;
|
||||
if(row){
|
||||
msg = `此操作将永久删除用户：“${row.configName}”，是否继续?`
|
||||
ids = [row.configId]
|
||||
}else{
|
||||
ids = state.ids
|
||||
}
|
||||
if(ids.length===0){
|
||||
ElMessage.error('请选择要删除的数据。');
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteConfig(ids).then(()=>{
|
||||
ElMessage.success('删除成功');
|
||||
dataList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
dataList()
|
||||
};
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection:TableDataRow[])=> {
|
||||
state.ids = selection.map(item => item.configId)
|
||||
};
|
||||
// 参数系统内置字典翻译
|
||||
const typeFormat=(row:TableDataRow) => {
|
||||
return proxy.selectDictLabel(unref(sys_yes_no), row.configType);
|
||||
};
|
||||
return {
|
||||
addDicRef,
|
||||
editDicRef,
|
||||
queryRef,
|
||||
sys_yes_no,
|
||||
onOpenAddDic,
|
||||
onOpenEditDic,
|
||||
onRowDel,
|
||||
dataList,
|
||||
resetQuery,
|
||||
handleSelectionChange,
|
||||
typeFormat,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="system-edit-dept-container">
|
||||
<el-dialog :title="(ruleForm.deptId!==0?'修改':'添加')+'部门'" v-model="isShowDialog" width="769px">
|
||||
<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="上级部门">
|
||||
<el-cascader
|
||||
:options="deptData"
|
||||
:props="{ checkStrictly: true,emitPath: false, value: 'deptId', label: 'deptName' }"
|
||||
placeholder="请选择部门"
|
||||
clearable
|
||||
class="w100"
|
||||
v-model="ruleForm.parentId"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.deptName }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input v-model="ruleForm.deptName" placeholder="请输入部门名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="负责人">
|
||||
<el-input v-model="ruleForm.leader" placeholder="请输入负责人" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="ruleForm.orderNum" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="部门状态">
|
||||
<el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.deptId!==0?'修 改':'添 加'}}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {reactive, toRefs, defineComponent, getCurrentInstance,ref,unref} from 'vue';
|
||||
import {addDept,editDept, getDeptList} from "/@/api/system/dept";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableDataRow {
|
||||
deptName: string;
|
||||
id: number;
|
||||
parentId:number;
|
||||
children?: TableDataRow[];
|
||||
}
|
||||
interface RuleFormState {
|
||||
deptId:number;
|
||||
parentId: number;
|
||||
deptName: string;
|
||||
orderNum: number;
|
||||
leader: string;
|
||||
phone: string | number;
|
||||
email: string;
|
||||
status: number;
|
||||
}
|
||||
interface DeptSate {
|
||||
isShowDialog: boolean;
|
||||
ruleForm: RuleFormState;
|
||||
deptData: Array<TableDataRow>;
|
||||
rules: object;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditDept',
|
||||
setup(prop,{emit}) {
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const state = reactive<DeptSate>({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
deptId:0,
|
||||
parentId: 0, // 上级部门
|
||||
deptName: '', // 部门名称
|
||||
orderNum:0,
|
||||
leader: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
status: 1,
|
||||
},
|
||||
deptData: [], // 部门数据
|
||||
rules: {
|
||||
deptName:[
|
||||
{required: true, message: "部门名称不能为空", trigger: "blur"},
|
||||
]
|
||||
}
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: RuleFormState|number) => {
|
||||
resetForm()
|
||||
getDeptList().then((res:any)=>{
|
||||
state.deptData = proxy.handleTree(res.data.deptList??[], "deptId","parentId");
|
||||
});
|
||||
if(row && typeof row === "object"){
|
||||
state.ruleForm = row;
|
||||
}else if(row && typeof row === 'number'){
|
||||
state.ruleForm.parentId = row
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 新增
|
||||
const onSubmit = () => {
|
||||
const formWrap = unref(formRef) as any;
|
||||
if (!formWrap) return;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
if(state.ruleForm.deptId===0){
|
||||
//添加
|
||||
addDept(state.ruleForm).then(()=>{
|
||||
ElMessage.success('角色添加成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('deptList')
|
||||
});
|
||||
}else{
|
||||
//修改
|
||||
editDept(state.ruleForm).then(()=>{
|
||||
ElMessage.success('角色修改成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('deptList')
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const resetForm = ()=>{
|
||||
state.ruleForm = {
|
||||
deptId:0,
|
||||
parentId: 0, // 上级部门
|
||||
deptName: '', // 部门名称
|
||||
orderNum:0,
|
||||
leader: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
status: 1,
|
||||
}
|
||||
};
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
formRef,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="system-dept-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-dept-search mb15">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="部门名称">
|
||||
<el-input size="default" v-model="tableData.param.deptName" placeholder="请输入部门名称" class="w-50 m-2" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.status" clearable>
|
||||
<el-option label="启用" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="deptList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddDept">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增部门
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData.data"
|
||||
style="width: 100%"
|
||||
row-key="deptId"
|
||||
default-expand-all
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column prop="deptName" label="部门名称" show-overflow-tooltip> </el-table-column>
|
||||
<el-table-column prop="status" label="部门状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenAddDept(scope.row)">新增</el-button>
|
||||
<el-button size="small" text type="primary" @click="onOpenEditDept(scope.row)">修改</el-button>
|
||||
<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<EditDept ref="editDeptRef" @deptList="deptList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, toRefs, reactive, onMounted, defineComponent,getCurrentInstance } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import EditDept from '/@/views/system/dept/component/editDept.vue';
|
||||
import {deleteDept, getDeptList} from "/@/api/system/dept";
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableDataRow {
|
||||
deptId:number;
|
||||
parentId:number;
|
||||
deptName:string;
|
||||
status:number;
|
||||
orderNum:number;
|
||||
createdAt:string;
|
||||
children?:TableDataRow[];
|
||||
}
|
||||
interface TableDataState {
|
||||
tableData: {
|
||||
data: Array<TableDataRow>;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
deptName:string;
|
||||
status:string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemDept',
|
||||
components: { EditDept },
|
||||
setup() {
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const editDeptRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
tableData: {
|
||||
data: [],
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deptName:'',
|
||||
status:''
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
deptList();
|
||||
};
|
||||
const deptList = ()=>{
|
||||
getDeptList(state.tableData.param).then((res:any)=>{
|
||||
state.tableData.data = proxy.handleTree(res.data.deptList??[], "deptId","parentId");
|
||||
});
|
||||
};
|
||||
// 打开新增菜单弹窗
|
||||
const onOpenAddDept = (row?: TableDataRow) => {
|
||||
editDeptRef.value.openDialog(row?.deptId);
|
||||
};
|
||||
// 打开编辑菜单弹窗
|
||||
const onOpenEditDept = (row: TableDataRow) => {
|
||||
editDeptRef.value.openDialog(row);
|
||||
};
|
||||
// 删除当前行
|
||||
const onTabelRowDel = (row: TableDataRow) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除部门：${row.deptName}, 是否继续?`, '提示', {
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteDept(row.deptId).then(()=>{
|
||||
ElMessage.success('删除成功');
|
||||
deptList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
return {
|
||||
editDeptRef,
|
||||
deptList,
|
||||
onOpenAddDept,
|
||||
onOpenEditDept,
|
||||
onTabelRowDel,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="system-edit-dic-container">
|
||||
<el-dialog :title="(ruleForm.dictId!==0?'修改':'添加')+'字典'" v-model="isShowDialog" width="769px">
|
||||
<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
|
||||
<el-form-item label="字典名称" prop="dictName">
|
||||
<el-input v-model="ruleForm.dictName" placeholder="请输入字典名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字典类型" prop="dictType">
|
||||
<el-input v-model="ruleForm.dictType" placeholder="请输入字典类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="ruleForm.status">
|
||||
<el-radio :label="1" >启用</el-radio>
|
||||
<el-radio :label="0" >禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.dictId!==0?'修 改':'添 加'}}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
|
||||
import { getType,addType,editType } from '/@/api/system/dict/type';
|
||||
import {ElMessage} from "element-plus";
|
||||
interface RuleFormState {
|
||||
dictId:number;
|
||||
dictName:string;
|
||||
dictType:string;
|
||||
status:number;
|
||||
remark:string;
|
||||
}
|
||||
interface DicState {
|
||||
isShowDialog: boolean;
|
||||
ruleForm: RuleFormState;
|
||||
rules:{}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditDic',
|
||||
setup(prop,{emit}) {
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const state = reactive<DicState>({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
dictId:0,
|
||||
dictName:'',
|
||||
dictType:'',
|
||||
status:1,
|
||||
remark:''
|
||||
},
|
||||
rules: {
|
||||
dictName: [
|
||||
{ required: true, message: "字典名称不能为空", trigger: "blur" }
|
||||
],
|
||||
dictType: [
|
||||
{ required: true, message: "字典类型不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row: RuleFormState|null) => {
|
||||
resetForm();
|
||||
if (row){
|
||||
getType(row.dictId).then((res:any)=>{
|
||||
state.ruleForm = res.data.dictType
|
||||
})
|
||||
state.ruleForm = row;
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
const resetForm = ()=>{
|
||||
state.ruleForm = {
|
||||
dictId:0,
|
||||
dictName:'',
|
||||
dictType:'',
|
||||
status:1,
|
||||
remark:''
|
||||
}
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 新增
|
||||
const onSubmit = () => {
|
||||
const formWrap = unref(formRef) as any;
|
||||
if (!formWrap) return;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
if(state.ruleForm.dictId!==0){
|
||||
//修改
|
||||
editType(state.ruleForm).then(()=>{
|
||||
ElMessage.success('字典类型修改成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('typeList')
|
||||
})
|
||||
}else{
|
||||
//添加
|
||||
addType(state.ruleForm).then(()=>{
|
||||
ElMessage.success('字典类型添加成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('typeList')
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
formRef,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="system-edit-dic-container">
|
||||
<el-dialog :title="(ruleForm.dictCode!==0?'修改':'添加')+'字典'" v-model="isShowDialog" width="769px">
|
||||
<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
|
||||
<el-form-item label="字典类型">
|
||||
<el-input v-model="ruleForm.dictType" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据标签" prop="dictLabel">
|
||||
<el-input v-model="ruleForm.dictLabel" placeholder="请输入数据标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据键值" prop="dictValue">
|
||||
<el-input v-model="ruleForm.dictValue" placeholder="请输入数据键值" />
|
||||
</el-form-item>
|
||||
<el-form-item label="显示排序" prop="dictSort">
|
||||
<el-input-number v-model="ruleForm.dictSort" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="系统默认">
|
||||
<el-switch v-model="ruleForm.isDefault"
|
||||
active-text="是"
|
||||
inactive-text="否"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="ruleForm.status">
|
||||
<el-radio :label="1" >启用</el-radio>
|
||||
<el-radio :label="0" >禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.dictCode!==0?'修 改':'添 加'}}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
|
||||
import { getData,addData,editData } from '/@/api/system/dict/data';
|
||||
import {ElMessage} from "element-plus";
|
||||
interface RuleFormState {
|
||||
dictCode: number;
|
||||
dictLabel: string;
|
||||
dictValue: string;
|
||||
dictSort:number;
|
||||
isDefault:number;
|
||||
status:number;
|
||||
remark:string;
|
||||
dictType:string;
|
||||
}
|
||||
interface DicState {
|
||||
isShowDialog: boolean;
|
||||
ruleForm: RuleFormState;
|
||||
rules:{}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditDicData',
|
||||
props:{
|
||||
dictType:{
|
||||
type:String,
|
||||
default:()=>''
|
||||
}
|
||||
},
|
||||
setup(prop,{emit}) {
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const state = reactive<DicState>({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
dictCode: 0,
|
||||
dictLabel: '',
|
||||
dictValue: '',
|
||||
dictSort: 0,
|
||||
isDefault:0,
|
||||
status: 1,
|
||||
remark: '',
|
||||
dictType:prop.dictType
|
||||
},
|
||||
rules: {
|
||||
dictLabel: [
|
||||
{ required: true, message: "数据标签不能为空", trigger: "blur" }
|
||||
],
|
||||
dictValue: [
|
||||
{ required: true, message: "数据键值不能为空", trigger: "blur" }
|
||||
],
|
||||
dictSort: [
|
||||
{ required: true, message: "数据顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row: RuleFormState|null) => {
|
||||
resetForm();
|
||||
if (row){
|
||||
getData(row.dictCode).then((res:any)=>{
|
||||
state.ruleForm = res.data.dict
|
||||
})
|
||||
state.ruleForm = row;
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
const resetForm = ()=>{
|
||||
state.ruleForm = {
|
||||
dictCode: 0,
|
||||
dictLabel: '',
|
||||
dictValue: '',
|
||||
dictSort: 0,
|
||||
isDefault:0,
|
||||
status: 1,
|
||||
remark: '',
|
||||
dictType:prop.dictType
|
||||
}
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 新增
|
||||
const onSubmit = () => {
|
||||
const formWrap = unref(formRef) as any;
|
||||
if (!formWrap) return;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
if(state.ruleForm.dictCode!==0){
|
||||
//修改
|
||||
editData(state.ruleForm).then(()=>{
|
||||
ElMessage.success('字典数据修改成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('dataList')
|
||||
})
|
||||
}else{
|
||||
//添加
|
||||
addData(state.ruleForm).then(()=>{
|
||||
ElMessage.success('字典数据添加成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('dataList')
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
formRef,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="system-dic-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
|
||||
<el-form-item label="字典类型" prop="dictType">
|
||||
<el-input
|
||||
v-model="tableData.param.dictType"
|
||||
placeholder="请输入字典类型"
|
||||
clearable
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典标签" prop="dictLabel">
|
||||
<el-input
|
||||
v-model="tableData.param.dictLabel"
|
||||
placeholder="请输入字典标签"
|
||||
clearable
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status" style="width: 200px;">
|
||||
<el-select
|
||||
v-model="tableData.param.status"
|
||||
placeholder="字典状态"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option label="启用" :value="1"/>
|
||||
<el-option label="禁用" :value="0"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="dataList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" @click="resetQuery(queryRef)">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddDic">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增字典
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除字典
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="字典编码" align="center" prop="dictCode" />
|
||||
<el-table-column label="字典标签" align="center" prop="dictLabel" />
|
||||
<el-table-column label="字典键值" align="center" prop="dictValue" />
|
||||
<el-table-column label="字典排序" align="center" prop="dictSort" />
|
||||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180"/>
|
||||
<el-table-column prop="status" label="字典状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">修改</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total>0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="dataList"
|
||||
/>
|
||||
</el-card>
|
||||
<EditDic ref="editDicRef" @dataList="dataList" :dict-type="tableData.param.dictType"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
|
||||
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
|
||||
import EditDic from '/@/views/system/dict/component/editDicData.vue';
|
||||
import {getDataList,deleteData} from "/@/api/system/dict/data";
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableDataRow {
|
||||
dictCode: number;
|
||||
dictSort: number;
|
||||
dictLabel: string;
|
||||
dictValue: string;
|
||||
dictType: string;
|
||||
status: number,
|
||||
remark: string;
|
||||
createdAt: string
|
||||
}
|
||||
interface TableDataState {
|
||||
ids:number[];
|
||||
tableData: {
|
||||
data: Array<TableDataRow>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
dictType: string;
|
||||
dictLabel:string;
|
||||
status: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemDictDataList',
|
||||
components: { EditDic },
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const addDicRef = ref();
|
||||
const editDicRef = ref();
|
||||
const queryRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dictLabel:'',
|
||||
dictType:'',
|
||||
status:''
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
dataList()
|
||||
};
|
||||
const dataList=()=>{
|
||||
getDataList(state.tableData.param).then((res:any)=>{
|
||||
state.tableData.data = res.data.list;
|
||||
state.tableData.total = res.data.total;
|
||||
});
|
||||
};
|
||||
// 打开新增字典弹窗
|
||||
const onOpenAddDic = () => {
|
||||
editDicRef.value.openDialog();
|
||||
};
|
||||
// 打开修改字典弹窗
|
||||
const onOpenEditDic = (row: TableDataRow) => {
|
||||
editDicRef.value.openDialog(row);
|
||||
};
|
||||
// 删除字典
|
||||
const onRowDel = (row: TableDataRow) => {
|
||||
let msg = '你确定要删除所选数据？';
|
||||
let ids:number[] = [] ;
|
||||
if(row){
|
||||
msg = `此操作将永久删除用户：“${row.dictLabel}”，是否继续?`
|
||||
ids = [row.dictCode]
|
||||
}else{
|
||||
ids = state.ids
|
||||
}
|
||||
if(ids.length===0){
|
||||
ElMessage.error('请选择要删除的数据。');
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteData(ids).then(()=>{
|
||||
ElMessage.success('删除成功');
|
||||
dataList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
const dictType = route.params && route.params.dictType;
|
||||
state.tableData.param.dictType = <string>dictType
|
||||
initTableData();
|
||||
});
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
dataList()
|
||||
};
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection:TableDataRow[])=> {
|
||||
state.ids = selection.map(item => item.dictCode)
|
||||
};
|
||||
return {
|
||||
addDicRef,
|
||||
editDicRef,
|
||||
queryRef,
|
||||
onOpenAddDic,
|
||||
onOpenEditDic,
|
||||
onRowDel,
|
||||
dataList,
|
||||
resetQuery,
|
||||
handleSelectionChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="system-dic-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
|
||||
<el-form-item label="字典名称" prop="dictName">
|
||||
<el-input
|
||||
v-model="tableData.param.dictName"
|
||||
placeholder="请输入字典名称"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="typeList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典类型" prop="dictType">
|
||||
<el-input
|
||||
v-model="tableData.param.dictType"
|
||||
placeholder="请输入字典类型"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="typeList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status" style="width: 200px;">
|
||||
<el-select
|
||||
v-model="tableData.param.status"
|
||||
placeholder="字典状态"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option label="启用" :value="1"/>
|
||||
<el-option label="禁用" :value="0"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="tableData.param.dateRange"
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="typeList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" @click="resetQuery(queryRef)">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddDic">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增字典
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除字典
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="字典ID" align="center" prop="dictId" width="120"/>
|
||||
<el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
|
||||
<template #default="scope">
|
||||
<router-link :to="'/system/dict/data/list/' + scope.row.dictType" class="link-type">
|
||||
<span>{{ scope.row.dictType }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="字典状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="字典描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip width="180"></el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">修改</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total>0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="typeList"
|
||||
/>
|
||||
</el-card>
|
||||
<EditDic ref="editDicRef" @typeList="typeList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
|
||||
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
|
||||
import EditDic from '/@/views/system/dict/component/editDic.vue';
|
||||
import {deleteType, getTypeList} from "/@/api/system/dict/type";
|
||||
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableDataRow {
|
||||
dictId:number;
|
||||
dictName: string;
|
||||
dictType: string;
|
||||
status: number;
|
||||
remark:string;
|
||||
createdAt:string;
|
||||
}
|
||||
interface TableDataState {
|
||||
ids:number[];
|
||||
tableData: {
|
||||
data: Array<TableDataRow>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
dictName: string;
|
||||
dictType: string;
|
||||
status: string;
|
||||
dateRange:string[];
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemDic',
|
||||
components: { EditDic },
|
||||
setup() {
|
||||
const addDicRef = ref();
|
||||
const editDicRef = ref();
|
||||
const queryRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dictName:'',
|
||||
dictType:'',
|
||||
status:'',
|
||||
dateRange:[],
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
typeList()
|
||||
};
|
||||
const typeList=()=>{
|
||||
getTypeList(state.tableData.param).then((res:any)=>{
|
||||
state.tableData.data = res.data.dictTypeList;
|
||||
state.tableData.total = res.data.total;
|
||||
});
|
||||
};
|
||||
// 打开新增字典弹窗
|
||||
const onOpenAddDic = () => {
|
||||
editDicRef.value.openDialog();
|
||||
};
|
||||
// 打开修改字典弹窗
|
||||
const onOpenEditDic = (row: TableDataRow) => {
|
||||
editDicRef.value.openDialog(row);
|
||||
};
|
||||
// 删除字典
|
||||
const onRowDel = (row: TableDataRow) => {
|
||||
let msg = '你确定要删除所选数据？';
|
||||
let ids:number[] = [] ;
|
||||
if(row){
|
||||
msg = `此操作将永久删除用户：“${row.dictName}”，是否继续?`
|
||||
ids = [row.dictId]
|
||||
}else{
|
||||
ids = state.ids
|
||||
}
|
||||
if(ids.length===0){
|
||||
ElMessage.error('请选择要删除的数据。');
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteType(ids).then(()=>{
|
||||
ElMessage.success('删除成功');
|
||||
typeList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
typeList()
|
||||
};
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection:TableDataRow[])=> {
|
||||
state.ids = selection.map(item => item.dictId)
|
||||
};
|
||||
return {
|
||||
addDicRef,
|
||||
editDicRef,
|
||||
queryRef,
|
||||
onOpenAddDic,
|
||||
onOpenEditDic,
|
||||
onRowDel,
|
||||
typeList,
|
||||
resetQuery,
|
||||
handleSelectionChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="system-edit-menu-container">
|
||||
<el-dialog :title="(acType==='add'?'新增':'修改')+'菜单'" v-model="isShowDialog"
|
||||
width="769px" :close-on-click-modal="false">
|
||||
<el-form :model="ruleForm" :rules="rules"
|
||||
ref="ruleFormRef" size="default" label-width="80px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-cascader
|
||||
:options="menuData"
|
||||
:props="{ label: 'title',value: 'id',checkStrictly: true,emitPath: false }"
|
||||
placeholder="请选择上级菜单"
|
||||
clearable
|
||||
class="w100"
|
||||
v-model="ruleForm.pid"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.title }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="菜单类型" prop="menuType">
|
||||
<el-radio-group v-model="ruleForm.menuType">
|
||||
<el-radio label="0">目录</el-radio>
|
||||
<el-radio label="1">菜单</el-radio>
|
||||
<el-radio label="2">按钮</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="ruleForm.menuName" placeholder="请填写菜单名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="接口规则" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="后端 aip 地址" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<template v-if="ruleForm.menuType === '0'||ruleForm.menuType === '1'">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="路由路径" prop="path">
|
||||
<el-input v-model="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="重定向">
|
||||
<el-input v-model="ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="菜单图标">
|
||||
<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.icon" type="all" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="组件路径" prop="component">
|
||||
<el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="链接地址">
|
||||
<el-input v-model="ruleForm.linkUrl" placeholder="外链/内嵌时链接地址（http:xxx.com）" clearable :disabled="ruleForm.isLink===0">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="权限标识">
|
||||
<el-select v-model="ruleForm.roles" multiple placeholder="选择角色" clearable class="w100">
|
||||
<el-option v-for="role in roles" :key="'role_'+role.id" :label="role.name" :value="role.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="菜单排序">
|
||||
<el-input-number v-model="ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<template v-if="ruleForm.menuType === '0'||ruleForm.menuType === '1'">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="是否隐藏">
|
||||
<el-radio-group v-model="ruleForm.isHide">
|
||||
<el-radio
|
||||
v-for="dict in visibleOptions"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{ dict.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="页面缓存">
|
||||
<el-radio-group v-model="ruleForm.isKeepAlive">
|
||||
<el-radio :label="1">缓存</el-radio>
|
||||
<el-radio :label="0">不缓存</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="是否固定">
|
||||
<el-radio-group v-model="ruleForm.isAffix">
|
||||
<el-radio :label="1">固定</el-radio>
|
||||
<el-radio :label="0">不固定</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="是否外链">
|
||||
<el-radio-group v-model="ruleForm.isLink" :disabled="ruleForm.isIframe===1">
|
||||
<el-radio :label="1">是</el-radio>
|
||||
<el-radio :label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="是否内嵌">
|
||||
<el-radio-group v-model="ruleForm.isIframe" @change="onSelectIframeChange">
|
||||
<el-radio :label="1">是</el-radio>
|
||||
<el-radio :label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{acType==='add'?'新 增':'修 改'}}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,nextTick } from 'vue';
|
||||
import IconSelector from '/@/components/iconSelector/index.vue';
|
||||
import { refreshBackEndControlRoutes } from "/@/router/backEnd";
|
||||
import {getMenuParams, addMenu, getMenuInfo, updateMenu} from "/@/api/system/menu";
|
||||
import {ElMessage} from "element-plus"
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditMenu',
|
||||
components: { IconSelector },
|
||||
props:{
|
||||
visibleOptions:{
|
||||
type:Array,
|
||||
default:()=>[],
|
||||
},
|
||||
acType:{
|
||||
type:String,
|
||||
default:()=>'add'
|
||||
}
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const ruleFormRef = ref<HTMLElement | null>(null);
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
isShowDialog: false,
|
||||
roles:[],
|
||||
// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
|
||||
ruleForm: {
|
||||
id:undefined,
|
||||
pid: 0, // 上级菜单
|
||||
menuType: '0', // 菜单类型
|
||||
menuName:'', // 菜单名称
|
||||
name: '', // 接口规则
|
||||
component: '', // 组件路径
|
||||
isLink: 0, // 是否外链
|
||||
menuSort: 0, // 菜单排序
|
||||
path: '', // 路由路径
|
||||
redirect: '', // 路由重定向，有子集 children 时
|
||||
icon: '', // 菜单图标
|
||||
roles: [], // 权限标识，取角色管理
|
||||
isHide: '0', // 是否隐藏
|
||||
isKeepAlive: 1, // 是否缓存
|
||||
isAffix: 0, // 是否固定
|
||||
linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
|
||||
isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
parentId: [
|
||||
{required: true, message: "父菜单不能为空", trigger: "blur"},
|
||||
],
|
||||
name:[
|
||||
{required: true, message: "接口规则不能为空", trigger: "blur"},
|
||||
],
|
||||
path:[
|
||||
{required: true, message: "路由地址不能为空", trigger: "blur"},
|
||||
],
|
||||
menuName: [
|
||||
{required: true, message: "菜单名称不能为空", trigger: "blur"},
|
||||
],
|
||||
menuType: [
|
||||
{required: true, message: "菜单类型不能为空", trigger: "blur"},
|
||||
],
|
||||
},
|
||||
menuData: [], // 上级菜单数据
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (row: any) => {
|
||||
initForm();
|
||||
nextTick(()=>{
|
||||
//获取角色信息
|
||||
getMenuParams().then((res:any)=>{
|
||||
state.roles = res.data.roles;
|
||||
const menu = { id: 0, title: '主类目', children: [] };
|
||||
menu.children = proxy.handleTree(res.data.menus, "id","pid");
|
||||
state.menuData=new Array(menu) as any;
|
||||
});
|
||||
if(row) {
|
||||
if (props.acType === 'add') {
|
||||
state.ruleForm.pid = row.id
|
||||
} else if (props.acType === 'edit') {
|
||||
getMenuInfo(row.id).then(res => {
|
||||
const data = res.data.rule;
|
||||
state.ruleForm = {
|
||||
id: data.id,
|
||||
pid: data.pid, // 上级菜单
|
||||
menuType: '' + data.menuType, // 菜单类型
|
||||
menuName: data.title, // 菜单名称
|
||||
name: data.name, // 接口规则
|
||||
component: data.component, // 组件路径
|
||||
isLink: data.isLink, // 是否外链
|
||||
menuSort: data.weigh, // 菜单排序
|
||||
path: data.path, // 路由路径
|
||||
redirect: data.redirect, // 路由重定向，有子集 children 时
|
||||
icon: data.icon, // 菜单图标
|
||||
roles: res.data.roleIds, // 权限标识，取角色管理
|
||||
isHide: '' + data.isHide, // 是否隐藏
|
||||
isKeepAlive: data.isCached, // 是否缓存
|
||||
isAffix: data.isAffix, // 是否固定
|
||||
linkUrl: data.linkUrl, // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
|
||||
isIframe: data.isIframe, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
state.loading = false;
|
||||
})
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 是否内嵌下拉改变
|
||||
const onSelectIframeChange = () => {
|
||||
if (state.ruleForm.isIframe===1) state.ruleForm.isLink = 1;
|
||||
else state.ruleForm.isLink = 0;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 新增
|
||||
const onSubmit = () => {
|
||||
const formWrap = unref(ruleFormRef) as any;
|
||||
if (!formWrap) return;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
state.loading = true;
|
||||
if(props.acType==='add'){
|
||||
//添加
|
||||
addMenu(state.ruleForm).then(()=>{
|
||||
ElMessage.success('菜单添加成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
resetMenuSession()
|
||||
emit('menuList')
|
||||
}).finally(()=>{
|
||||
state.loading = false;
|
||||
})
|
||||
}else{
|
||||
//修改
|
||||
updateMenu(state.ruleForm).then(()=>{
|
||||
ElMessage.success('菜单修改成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
resetMenuSession()
|
||||
emit('menuList')
|
||||
}).finally(()=>{
|
||||
state.loading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
// 重置菜单session
|
||||
const resetMenuSession = () => {
|
||||
refreshBackEndControlRoutes();
|
||||
};
|
||||
const initForm=()=>{
|
||||
state.ruleForm = {
|
||||
id:undefined,
|
||||
pid: 0, // 上级菜单
|
||||
menuType: '0', // 菜单类型
|
||||
menuName:'', // 菜单名称
|
||||
name: '', // 接口规则
|
||||
component: '', // 组件路径
|
||||
isLink: 0, // 是否外链
|
||||
menuSort: 0, // 菜单排序
|
||||
path: '', // 路由路径
|
||||
redirect: '', // 路由重定向，有子集 children 时
|
||||
icon: '', // 菜单图标
|
||||
roles: [], // 权限标识，取角色管理
|
||||
isHide: '0', // 是否隐藏
|
||||
isKeepAlive: 1, // 是否缓存
|
||||
isAffix: 0, // 是否固定
|
||||
linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
|
||||
isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
|
||||
}
|
||||
};
|
||||
return {
|
||||
ruleFormRef,
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onSelectIframeChange,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
resetMenuSession,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="system-menu-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-menu-search mb15">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入菜单名称"
|
||||
clearable
|
||||
class="w-50 m-2"
|
||||
size="default"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="组件路径">
|
||||
<el-input
|
||||
v-model="queryParams.component"
|
||||
placeholder="请输入组件路径"
|
||||
clearable
|
||||
size="default"
|
||||
class="w-50 m-2"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="handleQuery">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddMenu(null)" v-auth="'api/v1/system/menu/add'">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增菜单
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
|
||||
<el-table-column label="菜单名称" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<SvgIcon :name="scope.row.icon" />
|
||||
<span class="ml10">{{ scope.row.title }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="组件路径" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.component }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="api接口" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" show-overflow-tooltip width="80">
|
||||
<template #default="scope">
|
||||
{{ scope.row.weigh }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" show-overflow-tooltip width="80">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.menuType===0?'danger':(scope.row.menuType===1?'success':'warning')"
|
||||
size="small">{{scope.row.menuType===0?'目录':(scope.row.menuType===1?'菜单':'按钮') }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isHide" label="显示状态" :formatter="formatIsHide" width="120"></el-table-column>
|
||||
<el-table-column label="操作" width="240">
|
||||
<template #default="scope">
|
||||
<el-button v-if="scope.row.menuType!==2" size="small" text type="primary" @click="onOpenAddMenu(scope.row)" v-auth="'api/v1/system/menu/add'">新增</el-button>
|
||||
<el-button size="small" text type="primary" @click="onOpenEditMenu(scope.row)" v-auth="'api/v1/system/menu/update'">修改</el-button>
|
||||
<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)" v-auth="'api/v1/system/menu/delete'">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<EditMenu ref="editMenuRef" @menuList="menuList" :visibleOptions="sys_show_hide" :acType="acType"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {ref, toRefs, reactive, onBeforeMount, defineComponent, getCurrentInstance, unref} from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import EditMenu from '/@/views/system/menu/component/editMenu.vue';
|
||||
import {delMenu, getMenuList} from "/@/api/system/menu";
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemAuthMenuList',
|
||||
components: { EditMenu },
|
||||
setup() {
|
||||
const editMenuRef = ref();
|
||||
const state = reactive({
|
||||
queryParams:{
|
||||
title:"",
|
||||
component:""
|
||||
},
|
||||
menuTableData:[],
|
||||
});
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const {sys_show_hide} = proxy.useDict('sys_show_hide')
|
||||
const acType = ref('add')
|
||||
// 打开新增菜单弹窗
|
||||
const onOpenAddMenu = (row:any) => {
|
||||
acType.value = 'add'
|
||||
editMenuRef.value.openDialog(row);
|
||||
};
|
||||
// 打开编辑菜单弹窗
|
||||
const onOpenEditMenu = (row: any) => {
|
||||
acType.value='edit'
|
||||
editMenuRef.value.openDialog(row);
|
||||
};
|
||||
// 删除当前行
|
||||
const onTabelRowDel = (row: any) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除菜单：“${row.title}”, 是否继续?`, '提示', {
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
delMenu(row.id).then(()=>{
|
||||
ElMessage.success('删除成功');
|
||||
proxy.$refs['editMenuRef'].resetMenuSession()
|
||||
menuList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
const formatIsHide = (row:any)=>{
|
||||
return proxy.selectDictLabel(unref(sys_show_hide), ''+row.isHide);
|
||||
};
|
||||
onBeforeMount(()=>{
|
||||
menuList()
|
||||
});
|
||||
const handleQuery=() => {
|
||||
menuList();
|
||||
};
|
||||
const menuList = ()=>{
|
||||
getMenuList(state.queryParams).then(res=>{
|
||||
state.menuTableData = proxy.handleTree(res.data.rules??[], "id","pid");
|
||||
})
|
||||
};
|
||||
return {
|
||||
editMenuRef,
|
||||
onOpenAddMenu,
|
||||
onOpenEditMenu,
|
||||
onTabelRowDel,
|
||||
formatIsHide,
|
||||
menuList,
|
||||
handleQuery,
|
||||
...toRefs(state),
|
||||
sys_show_hide,
|
||||
acType
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div class="system-dic-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
|
||||
<el-form-item label="登录IP" prop="ipaddr">
|
||||
<el-input
|
||||
v-model="tableData.param.ipaddr"
|
||||
placeholder="请输入登录地址"
|
||||
clearable
|
||||
style="width: 180px;"
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="登录地点" prop="loginLocation">
|
||||
<el-input
|
||||
v-model="tableData.param.loginLocation"
|
||||
placeholder="请输入登录地点"
|
||||
clearable
|
||||
style="width: 180px;"
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="tableData.param.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
style="width: 180px;"
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="tableData.param.status"
|
||||
placeholder="登录状态"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 180px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in admin_login_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="登录时间" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="tableData.param.dateRange"
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="dataList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" @click="resetQuery(queryRef)">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除日志
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="onRowClear()">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
清空日志
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="编号" align="center" prop="infoId" />
|
||||
<el-table-column label="登录名称" align="center" prop="loginName" />
|
||||
<el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="浏览器" align="center" prop="browser" />
|
||||
<el-table-column label="操作系统" align="center" prop="os" />
|
||||
<el-table-column label="登录状态" align="center" prop="status" :formatter="statusFormat" />
|
||||
<el-table-column label="操作信息" align="center" prop="msg" />
|
||||
<el-table-column label="登录日期" align="center" prop="loginTime" width="180" />
|
||||
<el-table-column label="登录模块" alian="center" prop="module"></el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total>0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="dataList"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent,getCurrentInstance,unref } from 'vue';
|
||||
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
|
||||
import { logList,deleteLog,clearLog } from '/@/api/system/monitor/loginLog';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableDataRow {
|
||||
infoId:number;
|
||||
loginName:string;
|
||||
ipaddr:string;
|
||||
loginLocation:string;
|
||||
browser:string;
|
||||
os:string;
|
||||
status:number;
|
||||
msg:string;
|
||||
loginTime:string;
|
||||
module:string;
|
||||
}
|
||||
interface TableDataState {
|
||||
ids:number[];
|
||||
tableData: {
|
||||
data: Array<TableDataRow>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
dateRange: string[];
|
||||
status: string;
|
||||
ipaddr:string;
|
||||
loginLocation:string;
|
||||
userName:string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemLoginLogList',
|
||||
setup() {
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const queryRef = ref();
|
||||
const {admin_login_status} = proxy.useDict('admin_login_status')
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dateRange: [],
|
||||
status: '',
|
||||
ipaddr:'',
|
||||
loginLocation:'',
|
||||
userName:''
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
dataList()
|
||||
};
|
||||
const dataList=()=>{
|
||||
logList(state.tableData.param).then((res:any)=>{
|
||||
state.tableData.data = res.data.list;
|
||||
state.tableData.total = res.data.total;
|
||||
});
|
||||
};
|
||||
// 删除日志
|
||||
const onRowDel = (row: TableDataRow) => {
|
||||
let msg = '你确定要删除所选数据？';
|
||||
let ids:number[] = [] ;
|
||||
if(row){
|
||||
msg = `此操作将永久删除：“${row.loginName}”，是否继续?`
|
||||
ids = [row.infoId]
|
||||
}else{
|
||||
ids = state.ids
|
||||
}
|
||||
if(ids.length===0){
|
||||
ElMessage.error('请选择要删除的数据。');
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteLog(ids).then(()=>{
|
||||
ElMessage.success('删除成功');
|
||||
dataList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 清空日志
|
||||
const onRowClear = () => {
|
||||
ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
clearLog().then(()=>{
|
||||
ElMessage.success('清除成功');
|
||||
dataList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
dataList()
|
||||
};
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection:TableDataRow[])=> {
|
||||
state.ids = selection.map(item => item.infoId)
|
||||
};
|
||||
// 登录状态字典翻译
|
||||
const statusFormat = (row:TableDataRow) => {
|
||||
return proxy.selectDictLabel(unref(admin_login_status), row.status);
|
||||
};
|
||||
return {
|
||||
queryRef,
|
||||
onRowDel,
|
||||
dataList,
|
||||
resetQuery,
|
||||
handleSelectionChange,
|
||||
statusFormat,
|
||||
onRowClear,
|
||||
admin_login_status,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<!-- 操作日志详情抽屉 -->
|
||||
<div class="system-sysOperLog-detail">
|
||||
<el-drawer v-model="isShowDialog" size="80%" direction="ltr">
|
||||
<template #header>
|
||||
<h4>操作日志详情</h4>
|
||||
</template>
|
||||
<el-form ref="formRef" :model="formData" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="日志编号">{{ formData.operId }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="系统模块">{{ formData.title }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作方法">{{ formData.method }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="请求方式">{{ proxy.getOptionValue(formData.requestMethod, requestMethodOptions,'value','label') }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作人员">{{ formData.operName }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="部门名称">{{formData.deptName}}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="请求URL">{{ formData.operUrl }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="主机地址">{{ formData.operIp }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作地点">{{ formData.operLocation }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="请求参数">{{ formData.operParam }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="错误消息">{{ formData.errorMsg }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作时间">{{ proxy.parseTime(formData.operTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,getCurrentInstance,computed } from 'vue';
|
||||
import {
|
||||
getSysOperLog
|
||||
} from "/@/api/system/monitor/operLog";
|
||||
import {
|
||||
SysOperLogInfoData,
|
||||
SysOperLogEditState,
|
||||
} from "/@/views/system/monitor/operLog/component/model"
|
||||
export default defineComponent({
|
||||
name:"apiV1SystemSysOperLogDetail",
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
requestMethodOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const {proxy} = <any>getCurrentInstance()
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const menuRef = ref();
|
||||
const state = reactive<SysOperLogEditState>({
|
||||
loading:false,
|
||||
isShowDialog: false,
|
||||
formData: {
|
||||
operId: undefined,
|
||||
title: undefined,
|
||||
businessType: undefined,
|
||||
method: undefined,
|
||||
requestMethod: undefined,
|
||||
operatorType: undefined,
|
||||
operName: undefined,
|
||||
deptName: undefined,
|
||||
operUrl: undefined,
|
||||
operIp: undefined,
|
||||
operLocation: undefined,
|
||||
operParam: undefined,
|
||||
jsonResult: undefined,
|
||||
status: false ,
|
||||
errorMsg: undefined,
|
||||
operTime: undefined,
|
||||
linkedSysOperLogSysDept: {
|
||||
deptId:undefined, // 部门id
|
||||
deptName:undefined, // 部门名称
|
||||
},
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
operId : [
|
||||
{ required: true, message: "日志编号不能为空", trigger: "blur" }
|
||||
],
|
||||
operName : [
|
||||
{ required: true, message: "操作人员不能为空", trigger: "blur" }
|
||||
],
|
||||
deptName : [
|
||||
{ required: true, message: "部门名称不能为空", trigger: "blur" }
|
||||
],
|
||||
status : [
|
||||
{ required: true, message: "操作状态（0正常 1异常）不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: SysOperLogInfoData) => {
|
||||
resetForm();
|
||||
if(row) {
|
||||
getSysOperLog(row.operId!).then((res:any)=>{
|
||||
const data = res.data;
|
||||
state.formData = data;
|
||||
})
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
const resetForm = ()=>{
|
||||
state.formData = {
|
||||
operId: undefined,
|
||||
title: undefined,
|
||||
businessType: undefined,
|
||||
method: undefined,
|
||||
requestMethod: undefined,
|
||||
operatorType: undefined,
|
||||
operName: undefined,
|
||||
deptName: undefined,
|
||||
operUrl: undefined,
|
||||
operIp: undefined,
|
||||
operLocation: undefined,
|
||||
operParam: undefined,
|
||||
jsonResult: undefined,
|
||||
status: false ,
|
||||
errorMsg: undefined,
|
||||
operTime: undefined,
|
||||
linkedSysOperLogSysDept: {
|
||||
deptId:undefined, // 部门id
|
||||
deptName:undefined, // 部门名称
|
||||
},
|
||||
}
|
||||
};
|
||||
//关联sys_dept表选项
|
||||
const getSysDeptItemsDeptName = () => {
|
||||
emit("getSysDeptItemsDeptName")
|
||||
}
|
||||
return {
|
||||
proxy,
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
menuRef,
|
||||
formRef,
|
||||
getSysDeptItemsDeptName,
|
||||
...toRefs(state),
|
||||
};
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.system-sysOperLog-detail :deep(.el-form-item--large .el-form-item__label){
|
||||
font-weight: bolder;
|
||||
}
|
||||
.pic-block{
|
||||
margin-right: 8px;
|
||||
}
|
||||
.file-block{
|
||||
width: 100%;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
margin-bottom: 5px;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
.ml-2{margin-right: 5px;}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
export interface SysOperLogTableColumns {
|
||||
operId:number; // 日志编号
|
||||
title:string; // 系统模块
|
||||
requestMethod:string; // 请求方式
|
||||
operName:string; // 操作人员
|
||||
deptName:string; // 部门名称
|
||||
operUrl:string; // 请求URL
|
||||
operIp:string; // 主机地址
|
||||
operLocation:string; // 操作地点
|
||||
operParam:string; // 请求参数
|
||||
status:number; // 操作状态（0正常 1异常）
|
||||
operTime:string; // 操作时间
|
||||
linkedSysOperLogSysDept:LinkedSysOperLogSysDept;
|
||||
}
|
||||
|
||||
|
||||
export interface SysOperLogInfoData {
|
||||
operId:number|undefined; // 日志编号
|
||||
title:string|undefined; // 系统模块
|
||||
businessType:number|undefined; // 操作类型
|
||||
method:string|undefined; // 操作方法
|
||||
requestMethod:string|undefined; // 请求方式
|
||||
operatorType:number|undefined; // 操作类别
|
||||
operName:string|undefined; // 操作人员
|
||||
deptName:string|undefined; // 部门名称
|
||||
operUrl:string|undefined; // 请求URL
|
||||
operIp:string|undefined; // 主机地址
|
||||
operLocation:string|undefined; // 操作地点
|
||||
operParam:string|undefined; // 请求参数
|
||||
jsonResult:string|undefined; // 返回参数
|
||||
status:boolean; // 操作状态（0正常 1异常）
|
||||
errorMsg:string|undefined; // 错误消息
|
||||
operTime:string|undefined; // 操作时间
|
||||
linkedSysOperLogSysDept:LinkedSysOperLogSysDept;
|
||||
}
|
||||
|
||||
|
||||
export interface LinkedSysOperLogSysDept {
|
||||
deptId:number|undefined; // 部门id
|
||||
deptName:string|undefined; // 部门名称
|
||||
}
|
||||
|
||||
|
||||
export interface SysOperLogTableDataState {
|
||||
operIds:any[];
|
||||
tableData: {
|
||||
data: Array<SysOperLogTableColumns>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
title: string|undefined;
|
||||
requestMethod: string|undefined;
|
||||
operName: string|undefined;
|
||||
status: number|undefined;
|
||||
dateRange: string[];
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
export interface SysOperLogEditState{
|
||||
loading:boolean;
|
||||
isShowDialog: boolean;
|
||||
formData:SysOperLogInfoData;
|
||||
rules: object;
|
||||
}
|
||||
@@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<div class="system-sysOperLog-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-sysOperLog-search mb15">
|
||||
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="8" class="colBlock">
|
||||
<el-form-item label="系统模块" prop="title">
|
||||
<el-input
|
||||
v-model="tableData.param.title"
|
||||
placeholder="请输入系统模块"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="sysOperLogList"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" class="colBlock">
|
||||
<el-form-item label="请求方式" prop="requestMethod">
|
||||
<el-select v-model="tableData.param.requestMethod" placeholder="请选择请求方式" clearable size="small">
|
||||
<el-option
|
||||
v-for="dict in sys_oper_log_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :class="!showAll ? 'colBlock' : 'colNone'">
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="sysOperLogList"><el-icon><ele-Search /></el-icon>搜索</el-button>
|
||||
<el-button size="small" @click="resetQuery(queryRef)"><el-icon><ele-Refresh /></el-icon>重置</el-button>
|
||||
<el-button type="primary" link size="small" @click="toggleSearch">
|
||||
{{ word }}
|
||||
<el-icon v-show="showAll"><ele-ArrowUp/></el-icon>
|
||||
<el-icon v-show="!showAll"><ele-ArrowDown /></el-icon>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
|
||||
<el-form-item label="操作人员" prop="operName">
|
||||
<el-input
|
||||
v-model="tableData.param.operName"
|
||||
placeholder="请输入操作人员"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="sysOperLogList"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
|
||||
<el-form-item label="操作时间" prop="dateRange">
|
||||
<el-date-picker
|
||||
clearable size="small" style="width: 200px"
|
||||
v-model="tableData.param.dateRange"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
value-format="YYYY-MM-DD"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="sysOperLogList"><el-icon><ele-Search /></el-icon>搜索</el-button>
|
||||
<el-button size="small" @click="resetQuery(queryRef)"><el-icon><ele-Refresh /></el-icon>重置</el-button>
|
||||
<el-button type="primary" link size="small" @click="toggleSearch">
|
||||
{{ word }}
|
||||
<el-icon v-show="showAll"><ele-ArrowUp/></el-icon>
|
||||
<el-icon v-show="!showAll"><ele-ArrowDown /></el-icon>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete(null)"
|
||||
v-auth="'api/v1/system/sysOperLog/delete'"
|
||||
><el-icon><ele-Delete /></el-icon>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button size="small" type="danger" class="ml10" @click="onRowClear()">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
清空日志
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="日志编号" align="center" prop="operId"
|
||||
min-width="100px"
|
||||
/>
|
||||
<el-table-column label="系统模块" align="center" prop="title"
|
||||
min-width="100px"
|
||||
/>
|
||||
<el-table-column label="请求方式" align="center" prop="requestMethod" :formatter="requestMethodFormat"
|
||||
min-width="100px"
|
||||
/>
|
||||
<el-table-column label="操作人员" align="center" prop="operName"
|
||||
min-width="100px"
|
||||
/>
|
||||
<el-table-column label="部门名称" align="center" prop="deptName"
|
||||
min-width="100px"
|
||||
/>
|
||||
<el-table-column label="请求URL" align="center" prop="operUrl"
|
||||
min-width="100px"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="主机地址" align="center" prop="operIp"
|
||||
min-width="100px"
|
||||
/>
|
||||
<el-table-column label="操作地点" align="center" prop="operLocation"
|
||||
min-width="100px"
|
||||
/>
|
||||
<el-table-column label="操作时间" align="center" prop="operTime"
|
||||
min-width="120px"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{ proxy.parseTime(scope.row.operTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding" min-width="120px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
link
|
||||
icon="el-icon-view"
|
||||
@click="handleView(scope.row)"
|
||||
v-auth="'api/v1/system/sysOperLog/view'"
|
||||
>详情</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
link
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-auth="'api/v1/system/sysOperLog/delete'"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total>0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="sysOperLogList"
|
||||
/>
|
||||
</el-card>
|
||||
<apiV1SystemSysOperLogDetail
|
||||
ref="detailRef"
|
||||
:requestMethodOptions="sys_oper_log_type"
|
||||
:deptNameOptions="deptNameOptions"
|
||||
@sysOperLogList="sysOperLogList"
|
||||
></apiV1SystemSysOperLogDetail>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {ItemOptions} from "/@/api/items";
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, computed,getCurrentInstance,toRaw} from 'vue';
|
||||
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
|
||||
import {
|
||||
listSysOperLog,
|
||||
delSysOperLog,
|
||||
clearOperLog,
|
||||
} from "/@/api/system/monitor/operLog";
|
||||
import {
|
||||
SysOperLogTableColumns,
|
||||
SysOperLogInfoData,
|
||||
SysOperLogTableDataState,
|
||||
} from "/@/views/system/monitor/operLog/component/model"
|
||||
import apiV1SystemSysOperLogDetail from "/@/views/system/monitor/operLog/component/detail.vue"
|
||||
export default defineComponent({
|
||||
name: "apiV1SystemSysOperLogList",
|
||||
components:{
|
||||
apiV1SystemSysOperLogDetail
|
||||
},
|
||||
setup() {
|
||||
const {proxy} = <any>getCurrentInstance()
|
||||
const loading = ref(false)
|
||||
const queryRef = ref()
|
||||
const editRef = ref();
|
||||
const detailRef = ref();
|
||||
// 是否显示所有搜索选项
|
||||
const showAll = ref(false)
|
||||
// 非单个禁用
|
||||
const single = ref(true)
|
||||
// 非多个禁用
|
||||
const multiple =ref(true)
|
||||
const word = computed(()=>{
|
||||
if(showAll.value === false) {
|
||||
//对文字进行处理
|
||||
return "展开搜索";
|
||||
} else {
|
||||
return "收起搜索";
|
||||
}
|
||||
})
|
||||
// 字典选项数据
|
||||
const {
|
||||
sys_oper_log_type,
|
||||
} = proxy.useDict(
|
||||
'sys_oper_log_type',
|
||||
)
|
||||
// deptNameOptions关联表数据
|
||||
const deptNameOptions = ref<Array<ItemOptions>>([])
|
||||
const state = reactive<SysOperLogTableDataState>({
|
||||
operIds:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: undefined,
|
||||
requestMethod: undefined,
|
||||
operName: undefined,
|
||||
status: undefined,
|
||||
dateRange: []
|
||||
},
|
||||
},
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
sysOperLogList()
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
sysOperLogList()
|
||||
};
|
||||
// 获取列表数据
|
||||
const sysOperLogList = ()=>{
|
||||
loading.value = true
|
||||
listSysOperLog(state.tableData.param).then((res:any)=>{
|
||||
let list = res.data.list??[];
|
||||
state.tableData.data = list;
|
||||
state.tableData.total = res.data.total;
|
||||
loading.value = false
|
||||
})
|
||||
};
|
||||
const toggleSearch = () => {
|
||||
showAll.value = !showAll.value;
|
||||
}
|
||||
// 请求方式字典翻译
|
||||
const requestMethodFormat = (row:SysOperLogTableColumns) => {
|
||||
return proxy.selectDictLabel(sys_oper_log_type.value, row.requestMethod);
|
||||
}
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection:Array<SysOperLogInfoData>) => {
|
||||
state.operIds = selection.map(item => item.operId)
|
||||
single.value = selection.length!=1
|
||||
multiple.value = !selection.length
|
||||
}
|
||||
const handleAdd = ()=>{
|
||||
editRef.value.openDialog()
|
||||
}
|
||||
const handleUpdate = (row: SysOperLogTableColumns) => {
|
||||
if(!row){
|
||||
row = state.tableData.data.find((item:SysOperLogTableColumns)=>{
|
||||
return item.operId ===state.operIds[0]
|
||||
}) as SysOperLogTableColumns
|
||||
}
|
||||
editRef.value.openDialog(toRaw(row));
|
||||
};
|
||||
const handleDelete = (row: SysOperLogTableColumns) => {
|
||||
let msg = '你确定要删除所选数据？';
|
||||
let ids:number[] = [] ;
|
||||
if(row){
|
||||
msg = `此操作将永久删除数据，是否继续?`
|
||||
ids = [row.operId]
|
||||
}else{
|
||||
ids = state.operIds
|
||||
}
|
||||
if(ids.length===0){
|
||||
ElMessage.error('请选择要删除的数据。');
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
delSysOperLog(ids).then(()=>{
|
||||
ElMessage.success('删除成功');
|
||||
sysOperLogList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
// 清空日志
|
||||
const onRowClear = () => {
|
||||
ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
clearOperLog().then(()=>{
|
||||
ElMessage.success('清除成功');
|
||||
sysOperLogList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
const handleView = (row:SysOperLogTableColumns)=>{
|
||||
detailRef.value.openDialog(toRaw(row));
|
||||
}
|
||||
return {
|
||||
proxy,
|
||||
editRef,
|
||||
detailRef,
|
||||
showAll,
|
||||
loading,
|
||||
single,
|
||||
multiple,
|
||||
word,
|
||||
queryRef,
|
||||
resetQuery,
|
||||
sysOperLogList,
|
||||
toggleSearch,
|
||||
requestMethodFormat,
|
||||
sys_oper_log_type,
|
||||
//关联表数据选项
|
||||
deptNameOptions,
|
||||
handleSelectionChange,
|
||||
handleAdd,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleView,
|
||||
onRowClear,
|
||||
...toRefs(state),
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.colBlock {
|
||||
display: block;
|
||||
}
|
||||
.colNone {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,508 @@
|
||||
<template>
|
||||
<div class="system-user-container">
|
||||
<el-row :gutter="30">
|
||||
<el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>运行资源</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class=" el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">操作系统:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{sysInfo.sysOsName}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">系统架构:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{sysInfo.sysOsArch}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">服务器名称:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{sysInfo.sysComputerName}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">服务器IP:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{sysInfo.sysComputerIp}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">Go语言版本</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{sysInfo.goVersion}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">启动时间</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{sysInfo.goStartTime}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">运行时长:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{timeFormat(sysInfo.goRunTime)}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>硬盘资源</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class=" el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">盘符路径</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">文件系统</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">总大小</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">可用大小</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">已用大小</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">已用百分比</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="(sysFile, index) in sysInfo.diskList" :key="index">
|
||||
<td>
|
||||
<div class="cell">{{ sysFile.path }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ sysFile.fstype }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ memorySizeFormat(sysFile.total) }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ memorySizeFormat(sysFile.free) }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ memorySizeFormat(sysFile.used) }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ sysFile.usedPercent }}%</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>CPU</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class=" el-table--enable-row-hover el-table--medium">
|
||||
<el-row :gutter="30">
|
||||
<el-col :xs="24" :sm="24" :md="12">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">核心数:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{sysInfo.cpuNum}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">使用率:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{sysInfo.cpuUsed}}%</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">Load Avg 5:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{sysInfo.cpuAvg5}}%</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">Load Avg 15:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{sysInfo.cpuAvg15}}%</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="12">
|
||||
<div style="min-height: 280px;" ref="chartsWarningRef1"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>内存</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class=" el-table--enable-row-hover el-table--medium">
|
||||
<el-row :gutter="30">
|
||||
<el-col :xs="24" :sm="24" :md="12">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">总数:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ memorySizeFormat(sysInfo.memTotal) }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">已使用:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ memorySizeFormat(sysInfo.memUsed)}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">剩余:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ memorySizeFormat(sysInfo.memFree) }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">GFast系统使用:</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ memorySizeFormat(sysInfo.goUsed)}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="12">
|
||||
<div style="min-height: 280px;" ref="chartsWarningRef2"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-wordcloud';
|
||||
import { getSysInfo } from "/@/api/system/monitor/server";
|
||||
let interval: any = null
|
||||
export default defineComponent({
|
||||
name: 'monitor',
|
||||
components: {},
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const state: any = reactive({
|
||||
myCharts: [],
|
||||
sysInfo:{}
|
||||
});
|
||||
|
||||
|
||||
let myChart1: any;
|
||||
let myChart2: any;
|
||||
function setOptChart1 (value:number) {
|
||||
myChart1.setOption({
|
||||
series: [
|
||||
{
|
||||
data: [{
|
||||
value: value,
|
||||
name: 'CPU使用率',
|
||||
}],
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
function setOptChart2 (value:number) {
|
||||
myChart2.setOption({
|
||||
series: [
|
||||
{
|
||||
data: [{
|
||||
value: value,
|
||||
name: '内存使用率',
|
||||
}],
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
//CPU
|
||||
const initChartCPU = () => {
|
||||
myChart1 = echarts.init(proxy.$refs.chartsWarningRef1);
|
||||
const option = {
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
name: 'CPU',
|
||||
radius: '80%', //修改表盘大小
|
||||
title: {
|
||||
'show': true, //控制表盘title(今日预计用电量)字体是否显示
|
||||
'fontSize': 14, //控制表盘title(今日预计用电量)字体大小
|
||||
// 'color': 'red', //控制表盘title(今日预计用电量)字体颜色
|
||||
'offsetCenter': [0, '40%'], //设置表盘title(今日预计用电量)位置
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: [
|
||||
[0.3, '#4dabf7'],
|
||||
[0.6, '#69db7c'],
|
||||
[0.8, '#ffa94d'],
|
||||
[1, '#ff6b6b'],
|
||||
],
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}%',
|
||||
textStyle: {
|
||||
fontSize: 36,
|
||||
color: 'red',
|
||||
},
|
||||
offsetCenter: ['0', '80%'], //表盘数据(30%)位置
|
||||
},
|
||||
// data: [
|
||||
// {
|
||||
// value: 15,
|
||||
// name: 'CPU使用率',
|
||||
// },
|
||||
// ],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart1.setOption(option);
|
||||
state.myCharts.push(myChart1);
|
||||
};
|
||||
|
||||
//内存
|
||||
const initChartRAM = () => {
|
||||
myChart2 = echarts.init(proxy.$refs.chartsWarningRef2);
|
||||
const option = {
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
name: '内存',
|
||||
radius: '80%', //修改表盘大小
|
||||
title: {
|
||||
'show': true, //控制表盘title(今日预计用电量)字体是否显示
|
||||
'fontSize': 14, //控制表盘title(今日预计用电量)字体大小
|
||||
// 'color': 'red', //控制表盘title(今日预计用电量)字体颜色
|
||||
'offsetCenter': [0, '40%'], //设置表盘title(今日预计用电量)位置
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: [
|
||||
[0.3, '#4dabf7'],
|
||||
[0.6, '#69db7c'],
|
||||
[0.8, '#ffa94d'],
|
||||
[1, '#ff6b6b'],
|
||||
],
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}%',
|
||||
textStyle: {
|
||||
fontSize: 36,
|
||||
color: 'red',
|
||||
},
|
||||
offsetCenter: ['0', '80%'], //表盘数据(30%)位置
|
||||
},
|
||||
// data: [
|
||||
// {
|
||||
// value: 30,
|
||||
// name: '内存使用率',
|
||||
// },
|
||||
// ],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart2.setOption(option);
|
||||
state.myCharts.push(myChart2);
|
||||
};
|
||||
|
||||
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initChartCPU();
|
||||
initChartRAM();
|
||||
});
|
||||
|
||||
|
||||
function getSystemInfo() {
|
||||
getSysInfo().then((res:any)=>{
|
||||
const {code , data} = res
|
||||
if(code === 0) {
|
||||
state.sysInfo = data
|
||||
setOptChart1(data.cpuUsed)
|
||||
setOptChart2(data.memUsage)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
getSystemInfo,
|
||||
setOptChart1,
|
||||
setOptChart2,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getSystemInfo()
|
||||
if (interval === null) {
|
||||
interval = setInterval(()=> {
|
||||
this.getSystemInfo()
|
||||
}, 5000)
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
if (interval !== null) {
|
||||
clearInterval(interval)
|
||||
interval = null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods:{
|
||||
memorySizeFormat(size:any){
|
||||
size = parseFloat(size);
|
||||
let rank =0;
|
||||
let rankchar ='Bytes';
|
||||
while(size>1024&&rankchar!='TB'){
|
||||
size = size/1024;
|
||||
rank++;
|
||||
if(rank==1){
|
||||
rankchar="KB";
|
||||
}
|
||||
else if(rank==2){
|
||||
rankchar="MB";
|
||||
}
|
||||
else if(rank==3){
|
||||
rankchar="GB";
|
||||
}else if(rank==4){
|
||||
rankchar="TB";
|
||||
}
|
||||
}
|
||||
return size.toFixed(2)+ " "+ rankchar;
|
||||
},
|
||||
timeFormat(second:any){
|
||||
second = parseFloat(second)
|
||||
let rank = 0
|
||||
let rankchar = '秒'
|
||||
while((second>60&&rankchar!='小时'&&rankchar!='天')||(second>24&&rankchar=='小时')){
|
||||
if(rankchar=='小时'){
|
||||
second = second/24;
|
||||
}else{
|
||||
second = second/60;
|
||||
}
|
||||
rank++
|
||||
if(rank==1){
|
||||
rankchar = '分'
|
||||
}else if(rank==2){
|
||||
rankchar='小时'
|
||||
}else if(rank==3){
|
||||
rankchar='天'
|
||||
}
|
||||
}
|
||||
return second.toFixed(2)+" "+rankchar
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-card{
|
||||
height:300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.system-user-container {
|
||||
}
|
||||
|
||||
.marg-b-15 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
line-height: 36px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
min-height: 372px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="system-post-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :model="tableData.param" ref="queryRef" :inline="true">
|
||||
<el-form-item label="登录IP" prop="ipaddr">
|
||||
<el-input size="default" v-model="tableData.param.ipaddr" placeholder="请输入登录IP" class="w-50 m-2" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input size="default" v-model="tableData.param.userName" placeholder="请输入登录名称" class="w-50 m-2" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="getList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" @click="resetQuery(queryRef)">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
强制退出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="uuid" label="会话编号" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="userName" label="登录名称"></el-table-column>
|
||||
<el-table-column prop="ip" label="主机" ></el-table-column>
|
||||
<el-table-column prop="explorer" label="浏览器" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作系统" align="center" prop="os" />
|
||||
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">强退</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total>0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {toRefs, reactive, onMounted, defineComponent, ref} from 'vue';
|
||||
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
|
||||
import { forceLogout, listSysUserOnline} from "/@/api/system/monitor/userOnline";
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableData {
|
||||
id: number;
|
||||
uuid: string;
|
||||
token: string;
|
||||
createTime: string;
|
||||
userName: string;
|
||||
ip: string;
|
||||
explorer: string;
|
||||
os: string;
|
||||
}
|
||||
interface TableDataState {
|
||||
ids:number[];
|
||||
tableData: {
|
||||
data: Array<TableData>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
ipaddr:string;
|
||||
userName:string;
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemOnlineList',
|
||||
setup() {
|
||||
const queryRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
ipaddr:'',
|
||||
userName:'',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
getList()
|
||||
};
|
||||
const getList = ()=>{
|
||||
listSysUserOnline(state.tableData.param).then(res=>{
|
||||
state.tableData.data = res.data.list??[];
|
||||
state.tableData.total = res.data.total;
|
||||
})
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
getList()
|
||||
};
|
||||
// 删除岗位
|
||||
const onRowDel = (row: TableData) => {
|
||||
let msg = '你确定要强制退出用户登录？';
|
||||
let ids:number[] = [] ;
|
||||
if(row){
|
||||
msg = `将强制用户下线，是否继续?`
|
||||
ids = [row.id]
|
||||
}else{
|
||||
ids = state.ids
|
||||
}
|
||||
if(ids.length===0){
|
||||
ElMessage.error('请选择要强制退出登录的用户。');
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
forceLogout(ids).then(()=>{
|
||||
ElMessage.success('退出成功');
|
||||
getList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection:Array<TableData>)=> {
|
||||
state.ids = selection.map(item => item.id)
|
||||
};
|
||||
return {
|
||||
queryRef,
|
||||
onRowDel,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
getList,
|
||||
handleSelectionChange,
|
||||
resetQuery,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,516 @@
|
||||
<template>
|
||||
<div class="personal">
|
||||
<el-row>
|
||||
<!-- 个人信息 -->
|
||||
<el-col :xs="24" :sm="16">
|
||||
<el-card shadow="hover" header="个人信息">
|
||||
<div class="personal-user">
|
||||
<div class="personal-user-left">
|
||||
<el-upload
|
||||
class=" h100 personal-user-left-upload avatar-uploader"
|
||||
:action="baseURL+'/api/v1/system/upload/singleImg'"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:data="dataParam"
|
||||
>
|
||||
<img v-if="imageUrl" :src="proxy.getUpFileUrl(imageUrl)" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon"><ele-Plus /></el-icon>
|
||||
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="personal-user-right">
|
||||
<el-row>
|
||||
<el-col :span="24" class="personal-title mb18">{{ currentTime }}，{{ personalForm.nickname }}，{{ personalForm.describe }}！ </el-col>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="8" class="personal-item mb6">
|
||||
<div class="personal-item-label">昵称：</div>
|
||||
<div class="personal-item-value"> {{ personalForm.nickname }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="16" class="personal-item mb6">
|
||||
<div class="personal-item-label">联系电话：</div>
|
||||
<div class="personal-item-value">{{ personalForm.mobile }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="8" class="personal-item mb6">
|
||||
<div class="personal-item-label">登录IP：</div>
|
||||
<div class="personal-item-value">{{personalForm.lastLoginIp}}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="16" class="personal-item mb6">
|
||||
<div class="personal-item-label">登录时间：</div>
|
||||
<div class="personal-item-value">{{personalForm.lastLoginTime}}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="8" class="personal-item mb6">
|
||||
<div class="personal-item-label">所属部门：</div>
|
||||
<div class="personal-item-value">{{ deptName }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="16" class="personal-item mb6">
|
||||
<div class="personal-item-label">所属角色：</div>
|
||||
<div class="personal-item-value">{{ roles.join(',') }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 消息通知 -->
|
||||
<el-col :xs="24" :sm="8" class="pl15 personal-info">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<span>消息通知</span>
|
||||
<span class="personal-info-more">更多</span>
|
||||
</template>
|
||||
<div class="personal-info-box">
|
||||
<ul class="personal-info-ul">
|
||||
<li v-for="(v, k) in newsInfoList" :key="k" class="personal-info-li">
|
||||
<a :href="v.link" target="_block" class="personal-info-li-title">{{ v.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 营销推荐 -->
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover" class="mt15" header="营销推荐">
|
||||
<el-row :gutter="15" class="personal-recommend-row">
|
||||
<el-col :sm="6" v-for="(v, k) in recommendList" :key="k" class="personal-recommend-col">
|
||||
<div class="personal-recommend" :style="{ 'background-color': v.bg }">
|
||||
<SvgIcon :name="v.icon" :size="70" :style="{ color: v.iconColor }" />
|
||||
<div class="personal-recommend-auto">
|
||||
<div>{{ v.title }}</div>
|
||||
<div class="personal-recommend-msg">{{ v.msg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 更新信息 -->
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
|
||||
<div class="personal-edit-title">基本信息</div>
|
||||
<el-form :model="personalForm" size="default" label-width="40px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="昵称">
|
||||
<el-input v-model="personalForm.nickname" placeholder="请输入昵称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="personalForm.userEmail" placeholder="请输入邮箱" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="签名">
|
||||
<el-input v-model="personalForm.describe" placeholder="请输入签名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="职业">
|
||||
<el-select v-model="personalForm.remark" placeholder="请选择职业" clearable class="w100">
|
||||
<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
|
||||
<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
|
||||
<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="手机">
|
||||
<el-input v-model="personalForm.mobile" placeholder="请输入手机" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="personalForm.sex" placeholder="请选择性别" clearable class="w100">
|
||||
<el-option label="男" value="1"></el-option>
|
||||
<el-option label="女" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleUpload">
|
||||
<el-icon>
|
||||
<ele-Position />
|
||||
</el-icon>
|
||||
更新个人信息
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="personal-edit-title mb15">账号安全</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">账户密码</div>
|
||||
<div class="personal-edit-safe-item-left-value">当前密码强度：强</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary" @click="handleEditPass">立即修改</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">密保手机</div>
|
||||
<div class="personal-edit-safe-item-left-value">已绑定手机：132****4108</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即修改</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">密保问题</div>
|
||||
<div class="personal-edit-safe-item-left-value">已设置密保问题，账号安全大幅度提升</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即设置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">绑定QQ</div>
|
||||
<div class="personal-edit-safe-item-left-value">已绑定QQ：110****566</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即设置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, defineComponent,getCurrentInstance,onMounted } from 'vue';
|
||||
import { formatAxis } from '/@/utils/formatTime';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useUserInfo } from '/@/stores/userInfo';
|
||||
import {getPersonalInfo, editPersonal, resetPwdPersonal} from "/@/api/system/personal";
|
||||
import type { UploadProps } from 'element-plus'
|
||||
import {ElMessage} from "element-plus";
|
||||
import {ElMessageBox} from 'element-plus'
|
||||
import {getToken} from "/@/utils/gfast"
|
||||
import { newsInfoList, recommendList } from './mock';
|
||||
import {Session} from "/@/utils/storage";
|
||||
// 定义接口来定义对象的类型
|
||||
interface PersonalState {
|
||||
imageUrl:'',
|
||||
deptName: '';
|
||||
roles: [];
|
||||
personalForm: any;
|
||||
newsInfoList: any;
|
||||
recommendList: any;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'personals',
|
||||
setup() {
|
||||
const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
|
||||
const {proxy} = <any>getCurrentInstance();
|
||||
const stores = useUserInfo();
|
||||
const { userInfos } = storeToRefs(stores);
|
||||
const dataParam = reactive({
|
||||
token:getToken(),
|
||||
})
|
||||
const state = reactive<PersonalState>({
|
||||
newsInfoList,
|
||||
recommendList,
|
||||
imageUrl:'',
|
||||
deptName:'',
|
||||
roles:[],
|
||||
personalForm: {
|
||||
nickname: '',
|
||||
userEmail: '',
|
||||
describe: '',
|
||||
mobile: '',
|
||||
sex: '',
|
||||
remark:'',
|
||||
avatar:'',
|
||||
lastLoginIp:'',
|
||||
lastLoginTime:''
|
||||
},
|
||||
});
|
||||
|
||||
// const handleUpload =
|
||||
const handleUpload = () => {
|
||||
// console.log(state.personalForm)
|
||||
editPersonal(state.personalForm).then((res:any)=>{
|
||||
const userInfo = res.data.userInfo
|
||||
userInfo.avatar = proxy.getUpFileUrl(userInfo.avatar)
|
||||
// 存储 token 到浏览器缓存
|
||||
Session.set('token', res.data.token);
|
||||
// 存储用户信息到浏览器缓存
|
||||
Session.set('userInfo', userInfo);
|
||||
useUserInfo().setUserInfos();
|
||||
ElMessage.success('已更新');
|
||||
});
|
||||
};
|
||||
// 当前时间提示语
|
||||
const currentTime = computed(() => {
|
||||
|
||||
return formatAxis(new Date());
|
||||
});
|
||||
const handleAvatarSuccess: UploadProps['onSuccess'] = (
|
||||
response,
|
||||
uploadFile
|
||||
) => {
|
||||
if(response.code == 0){
|
||||
state.imageUrl = response.data.path;
|
||||
state.personalForm.avatar = response.data.path;
|
||||
handleUpload();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/** 重置密码按钮操作 */
|
||||
const handleEditPass = ()=> {
|
||||
ElMessageBox.prompt('请输入"' + state.personalForm.nickname + '"的新密码', "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消"
|
||||
}).then(({ value }) => {
|
||||
if(!value || value==''){
|
||||
ElMessage.success('密码不能为空');
|
||||
return
|
||||
}
|
||||
resetPwdPersonal({password:value}).then(() => {
|
||||
ElMessage.success("修改成功，新密码是：" + value);
|
||||
});
|
||||
}).catch(() => {});
|
||||
};
|
||||
// 初始化用户数据
|
||||
const initUserInfo = () => {
|
||||
getPersonalInfo().then((res:any)=>{
|
||||
const user = res.data.user;
|
||||
state.imageUrl = user.avatar;
|
||||
state.personalForm = {
|
||||
nickname:user.userNickname,
|
||||
userEmail:user.userEmail,
|
||||
describe: user.describe,
|
||||
mobile: user.mobile,
|
||||
sex: String(user.sex),
|
||||
remark:user.remark,
|
||||
avatar:user.avatar,
|
||||
lastLoginIp:user.lastLoginIp,
|
||||
lastLoginTime:user.lastLoginTime
|
||||
}
|
||||
state.deptName = res.data.deptName;
|
||||
state.roles = res.data.roles;
|
||||
})
|
||||
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initUserInfo();
|
||||
});
|
||||
return {
|
||||
proxy,
|
||||
baseURL,
|
||||
userInfos,
|
||||
currentTime,
|
||||
handleUpload,
|
||||
handleEditPass,
|
||||
handleAvatarSuccess,
|
||||
dataParam,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '../../../theme/mixins/index.scss' as *;
|
||||
.personal {
|
||||
.personal-user {
|
||||
height: 130px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.personal-user-left {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 3px;
|
||||
:deep(.el-upload) {
|
||||
height: 100%;
|
||||
}
|
||||
.avatar-uploader{
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.personal-user-left-upload {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&:hover {
|
||||
img {
|
||||
animation: logoAnimation 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-user-right {
|
||||
flex: 1;
|
||||
padding: 0 15px;
|
||||
.personal-title {
|
||||
font-size: 18px;
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
.personal-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
.personal-item-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
.personal-item-value {
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-info {
|
||||
.personal-info-more {
|
||||
float: right;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.personal-info-box {
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
.personal-info-ul {
|
||||
list-style: none;
|
||||
.personal-info-li {
|
||||
font-size: 13px;
|
||||
padding-bottom: 10px;
|
||||
.personal-info-li-title {
|
||||
display: inline-block;
|
||||
@include text-ellipsis(1);
|
||||
color: var(--el-text-color-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
& a:hover {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-recommend-row {
|
||||
.personal-recommend-col {
|
||||
.personal-recommend {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.personal-recommend-auto {
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5%;
|
||||
color: var(--next-color-white);
|
||||
.personal-recommend-msg {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-edit {
|
||||
.personal-edit-title {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
color: var(--el-text-color-regular);
|
||||
&::after {
|
||||
content: '';
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.personal-edit-safe-box {
|
||||
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
padding: 15px 0;
|
||||
.personal-edit-safe-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.personal-edit-safe-item-left {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.personal-edit-safe-item-left-label {
|
||||
color: var(--el-text-color-regular);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.personal-edit-safe-item-left-value {
|
||||
color: var(--el-text-color-secondary);
|
||||
@include text-ellipsis(1);
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* 消息通知
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const newsInfoList: Array<object> = [
|
||||
{
|
||||
title: '[发布] 2021年02月28日发布基于 vue3.x + vite v1.0.0 版本',
|
||||
date: '02/28',
|
||||
link: 'https://gitee.com/lyt-top/vue-next-admin',
|
||||
},
|
||||
{
|
||||
title: '[发布] 2021年04月15日发布 vue2.x + webpack 重构版本',
|
||||
date: '04/15',
|
||||
link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
|
||||
},
|
||||
{
|
||||
title: '[重构] 2021年04月10日 重构 vue2.x + webpack v1.0.0 版本',
|
||||
date: '04/10',
|
||||
link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
|
||||
},
|
||||
{
|
||||
title: '[预览] 2020年12月08日，基于 vue3.x 版本后台模板的预览',
|
||||
date: '12/08',
|
||||
link: 'http://lyt-top.gitee.io/vue-next-admin-preview/#/login',
|
||||
},
|
||||
{
|
||||
title: '[预览] 2020年11月15日，基于 vue2.x 版本后台模板的预览',
|
||||
date: '11/15',
|
||||
link: 'https://lyt-top.gitee.io/vue-prev-admin-preview/#/login',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 营销推荐
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const recommendList: Array<object> = [
|
||||
{
|
||||
title: '优惠券',
|
||||
msg: '现金券、折扣券、营销必备',
|
||||
icon: 'ele-Food',
|
||||
bg: '#48D18D',
|
||||
iconColor: '#64d89d',
|
||||
},
|
||||
{
|
||||
title: '多人拼团',
|
||||
msg: '社交电商、开辟流量',
|
||||
icon: 'ele-ShoppingCart',
|
||||
bg: '#F95959',
|
||||
iconColor: '#F86C6B',
|
||||
},
|
||||
{
|
||||
title: '分销中心',
|
||||
msg: '轻松招募分销员，成功推广奖励',
|
||||
icon: 'ele-School',
|
||||
bg: '#8595F4',
|
||||
iconColor: '#92A1F4',
|
||||
},
|
||||
{
|
||||
title: '秒杀',
|
||||
msg: '超低价抢购引导更多销量',
|
||||
icon: 'ele-AlarmClock',
|
||||
bg: '#FEBB50',
|
||||
iconColor: '#FDC566',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="system-edit-post-container">
|
||||
<el-dialog v-model="isShowDialog" width="769px">
|
||||
<template #header>
|
||||
<div v-drag="['.system-edit-post-container .el-dialog', '.system-edit-post-container .el-dialog__header']">{{(formData.postId===0?'添加':'修改')+'岗位'}}</div>
|
||||
</template>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
|
||||
<el-form-item label="岗位名称" prop="postName">
|
||||
<el-input v-model="formData.postName" placeholder="请输入岗位名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位编码" prop="postCode">
|
||||
<el-input v-model="formData.postCode" placeholder="请输入编码名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位顺序" prop="postSort">
|
||||
<el-input-number v-model="formData.postSort" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位状态" prop="status">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{formData.postId===0?'新 增':'修 改'}}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,unref } from 'vue';
|
||||
import {addPost, editPost} from "/@/api/system/post";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
interface DialogRow {
|
||||
postId:number;
|
||||
postCode:string;
|
||||
postName:string;
|
||||
postSort:number;
|
||||
status:number;
|
||||
remark:string;
|
||||
}
|
||||
interface PostState {
|
||||
loading:boolean;
|
||||
isShowDialog: boolean;
|
||||
formData: DialogRow;
|
||||
menuExpand:boolean;
|
||||
menuNodeAll:boolean;
|
||||
menuCheckStrictly:boolean;
|
||||
menuProps: {
|
||||
children: string;
|
||||
label: string;
|
||||
};
|
||||
rules: object;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditPost',
|
||||
setup(props,{emit}) {
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const menuRef = ref();
|
||||
const state = reactive<PostState>({
|
||||
loading:false,
|
||||
isShowDialog: false,
|
||||
formData: {
|
||||
postId:0,
|
||||
postCode:'',
|
||||
postName:'',
|
||||
postSort:0,
|
||||
status:1,
|
||||
remark:'',
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
postName: [
|
||||
{ required: true, message: "岗位名称不能为空", trigger: "blur" }
|
||||
],
|
||||
postCode: [
|
||||
{ required: true, message: "岗位编码不能为空", trigger: "blur" }
|
||||
],
|
||||
postSort: [
|
||||
{ required: true, message: "岗位顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
menuExpand:false,
|
||||
menuNodeAll:false,
|
||||
menuCheckStrictly:false,
|
||||
menuProps: {
|
||||
children: 'children',
|
||||
label: 'title',
|
||||
},
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: DialogRow) => {
|
||||
resetForm();
|
||||
if(row) {
|
||||
state.formData = row;
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 新增
|
||||
const onSubmit = () => {
|
||||
const formWrap = unref(formRef) as any;
|
||||
if (!formWrap) return;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
state.loading = true;
|
||||
if(state.formData.postId===0){
|
||||
//添加
|
||||
addPost(state.formData).then(()=>{
|
||||
ElMessage.success('岗位添加成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('getPostList')
|
||||
}).finally(()=>{
|
||||
state.loading = false;
|
||||
})
|
||||
}else{
|
||||
//修改
|
||||
editPost(state.formData).then(()=>{
|
||||
ElMessage.success('岗位修改成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('getPostList')
|
||||
}).finally(()=>{
|
||||
state.loading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const resetForm = ()=>{
|
||||
state.menuCheckStrictly=false;
|
||||
state.menuExpand = false;
|
||||
state.menuNodeAll = false;
|
||||
state.formData = {
|
||||
postId:0,
|
||||
postCode:'',
|
||||
postName:'',
|
||||
postSort:0,
|
||||
status:1,
|
||||
remark:'',
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
menuRef,
|
||||
formRef,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tree-border {
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7!important;
|
||||
background: #fff none!important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.system-edit-post-container {
|
||||
.menu-data-tree {
|
||||
border: var(--el-input-border, var(--el-border-base));
|
||||
border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="system-post-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="岗位名称">
|
||||
<el-input size="default" v-model="tableData.param.postName" placeholder="请输入岗位名称" class="w-50 m-2" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位编码">
|
||||
<el-input size="default" v-model="tableData.param.postCode" placeholder="请输入岗位编码" class="w-50 m-2" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.status" clearable>
|
||||
<el-option label="启用" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="postList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddPost">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增岗位
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除岗位
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="postCode" label="岗位编码" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="postName" label="岗位名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="postSort" label="排序" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status" label="岗位状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="岗位描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditPost(scope.row)">修改</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total>0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="postList"
|
||||
/>
|
||||
</el-card>
|
||||
<EditPost ref="editPostRef" @getPostList="postList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, toRaw} from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import EditPost from '/@/views/system/post/component/editPost.vue';
|
||||
import {deletePost, getPostList} from "/@/api/system/post";
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableData {
|
||||
postId:number;
|
||||
postCode:string;
|
||||
postName:string;
|
||||
postSort:number;
|
||||
status:number;
|
||||
remark:string;
|
||||
createdAt:string;
|
||||
}
|
||||
interface TableDataState {
|
||||
ids:number[];
|
||||
tableData: {
|
||||
data: Array<TableData>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
postName:string;
|
||||
status:string;
|
||||
postCode:string;
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemPostList',
|
||||
components: {EditPost},
|
||||
setup() {
|
||||
const addPostRef = ref();
|
||||
const editPostRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
postName:'',
|
||||
status:'',
|
||||
postCode:'',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
postList()
|
||||
};
|
||||
const postList = ()=>{
|
||||
getPostList(state.tableData.param).then(res=>{
|
||||
state.tableData.data = res.data.postList??[];
|
||||
state.tableData.total = res.data.total;
|
||||
})
|
||||
};
|
||||
// 打开新增岗位弹窗
|
||||
const onOpenAddPost = () => {
|
||||
editPostRef.value.openDialog();
|
||||
};
|
||||
// 打开修改岗位弹窗
|
||||
const onOpenEditPost = (row: Object) => {
|
||||
editPostRef.value.openDialog(toRaw(row));
|
||||
};
|
||||
// 删除岗位
|
||||
const onRowDel = (row: any) => {
|
||||
let msg = '你确定要删除所选岗位？';
|
||||
let ids:number[] = [] ;
|
||||
if(row){
|
||||
msg = `此操作将永久删除岗位：“${row.postName}”，是否继续?`
|
||||
ids = [row.postId]
|
||||
}else{
|
||||
ids = state.ids
|
||||
}
|
||||
if(ids.length===0){
|
||||
ElMessage.error('请选择要删除的数据。');
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deletePost(ids).then(()=>{
|
||||
ElMessage.success('删除成功');
|
||||
postList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection:Array<TableData>)=> {
|
||||
state.ids = selection.map(item => item.postId)
|
||||
};
|
||||
return {
|
||||
addPostRef,
|
||||
editPostRef,
|
||||
onOpenAddPost,
|
||||
onOpenEditPost,
|
||||
onRowDel,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
postList,
|
||||
handleSelectionChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="system-edit-role-container">
|
||||
<el-dialog :title="(formData.id===0?'添加':'修改')+'角色'" v-model="isShowDialog" width="769px">
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入角色名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="formData.listOrder" :min="0" controls-position="right" placeholder="请输入排序" class="w100" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="角色状态">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="角色描述">
|
||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="菜单权限">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
|
||||
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
|
||||
<el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-tree
|
||||
:data="menuData"
|
||||
ref="menuRef"
|
||||
:props="menuProps"
|
||||
:default-checked-keys="formData.menuIds"
|
||||
node-key="id"
|
||||
show-checkbox class="menu-data-tree tree-border"
|
||||
:check-strictly="!menuCheckStrictly"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{formData.id===0?'新 增':'修 改'}}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,getCurrentInstance,unref } from 'vue';
|
||||
import {addRole, editRole, getRole, getRoleParams} from "/@/api/system/role";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {refreshBackEndControlRoutes} from "/@/router/backEnd";
|
||||
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface MenuDataTree {
|
||||
id: number;
|
||||
pid:number;
|
||||
title: string;
|
||||
children?: MenuDataTree[];
|
||||
}
|
||||
interface DialogRow {
|
||||
id:number;
|
||||
name: string;
|
||||
status: number;
|
||||
listOrder: number;
|
||||
remark: string;
|
||||
menuIds:Array<number>
|
||||
}
|
||||
interface RoleState {
|
||||
loading:boolean;
|
||||
isShowDialog: boolean;
|
||||
formData: DialogRow;
|
||||
menuData: Array<MenuDataTree>;
|
||||
menuExpand:boolean;
|
||||
menuNodeAll:boolean;
|
||||
menuCheckStrictly:boolean;
|
||||
menuProps: {
|
||||
children: string;
|
||||
label: string;
|
||||
};
|
||||
rules: object;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditRole',
|
||||
setup(props,{emit}) {
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const menuRef = ref();
|
||||
const state = reactive<RoleState>({
|
||||
loading:false,
|
||||
isShowDialog: false,
|
||||
formData: {
|
||||
id:0,
|
||||
name: '',
|
||||
status: 1,
|
||||
listOrder: 0,
|
||||
remark: '',
|
||||
menuIds:[]
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name:[
|
||||
{required: true, message: "角色名称不能为空", trigger: "blur"},
|
||||
]
|
||||
},
|
||||
menuData: [],
|
||||
menuExpand:false,
|
||||
menuNodeAll:false,
|
||||
menuCheckStrictly:false,
|
||||
menuProps: {
|
||||
children: 'children',
|
||||
label: 'title',
|
||||
},
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: DialogRow) => {
|
||||
resetForm();
|
||||
getMenuData();
|
||||
if(row) {
|
||||
getRole(row.id).then((res:any)=>{
|
||||
if(res.data.role){
|
||||
state.formData = res.data.role;
|
||||
state.formData.menuIds = res.data.menuIds??[]
|
||||
}
|
||||
})
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 新增
|
||||
const onSubmit = () => {
|
||||
const formWrap = unref(formRef) as any;
|
||||
if (!formWrap) return;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
state.loading = true;
|
||||
state.formData.menuIds = getMenuAllCheckedKeys();
|
||||
if(state.formData.id===0){
|
||||
//添加
|
||||
addRole(state.formData).then(()=>{
|
||||
ElMessage.success('角色添加成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
resetMenuSession()
|
||||
emit('getRoleList')
|
||||
}).finally(()=>{
|
||||
state.loading = false;
|
||||
})
|
||||
}else{
|
||||
//修改
|
||||
editRole(state.formData).then(()=>{
|
||||
ElMessage.success('角色修改成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
resetMenuSession()
|
||||
emit('getRoleList')
|
||||
}).finally(()=>{
|
||||
state.loading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 获取菜单结构数据
|
||||
const getMenuData = () => {
|
||||
getRoleParams().then((res:any)=>{
|
||||
state.menuData = proxy.handleTree(res.data.menu, "id","pid");
|
||||
})
|
||||
};
|
||||
const resetForm = ()=>{
|
||||
state.menuCheckStrictly=false;
|
||||
state.menuExpand = false;
|
||||
state.menuNodeAll = false;
|
||||
state.formData = {
|
||||
id:0,
|
||||
name: '',
|
||||
status: 1,
|
||||
listOrder: 0,
|
||||
remark: '',
|
||||
menuIds:[]
|
||||
}
|
||||
};
|
||||
/** 树权限（展开/折叠）*/
|
||||
const handleCheckedTreeExpand = (value:any) => {
|
||||
let treeList = state.menuData;
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
|
||||
}
|
||||
}
|
||||
|
||||
/** 树权限（全选/全不选） */
|
||||
const handleCheckedTreeNodeAll = (value:any) => {
|
||||
menuRef.value.setCheckedNodes(value ? state.menuData : []);
|
||||
}
|
||||
|
||||
/** 树权限（父子联动） */
|
||||
const handleCheckedTreeConnect = (value:any) => {
|
||||
state.menuCheckStrictly = value ? true : false;
|
||||
}
|
||||
|
||||
/** 所有菜单节点数据 */
|
||||
function getMenuAllCheckedKeys() {
|
||||
// 目前被选中的菜单节点
|
||||
let checkedKeys = menuRef.value.getCheckedKeys();
|
||||
// 半选中的菜单节点
|
||||
let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
|
||||
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
|
||||
return checkedKeys;
|
||||
}
|
||||
|
||||
// 重置菜单session
|
||||
const resetMenuSession = () => {
|
||||
refreshBackEndControlRoutes();
|
||||
};
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
menuRef,
|
||||
formRef,
|
||||
handleCheckedTreeExpand,
|
||||
handleCheckedTreeNodeAll,
|
||||
handleCheckedTreeConnect,
|
||||
resetMenuSession,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tree-border {
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7!important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.system-edit-role-container {
|
||||
.menu-data-tree {
|
||||
border: var(--el-input-border, var(--el-border-base));
|
||||
border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="system-role-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input size="default" v-model="tableData.param.roleName" placeholder="请输入角色名称" class="w-50 m-2" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.roleStatus" clearable>
|
||||
<el-option label="启用" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="roleList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增角色
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="listOrder" label="排序" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="220">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)"><el-icon><ele-EditPen /></el-icon>修改</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total>0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="roleList"
|
||||
/>
|
||||
</el-card>
|
||||
<EditRole ref="editRoleRef" @getRoleList="roleList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, toRaw,getCurrentInstance} from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import EditRole from '/@/views/system/role/component/editRole.vue';
|
||||
import {deleteRole, getRoleList} from "/@/api/system/role";
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableData {
|
||||
id:number;
|
||||
status: number;
|
||||
listOrder: number;
|
||||
name: string;
|
||||
remark: string;
|
||||
dataScope:number;
|
||||
createdAt: string;
|
||||
}
|
||||
interface TableDataState {
|
||||
tableData: {
|
||||
data: Array<TableData>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
roleName:string;
|
||||
roleStatus:string;
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemRoleList',
|
||||
components: {EditRole},
|
||||
setup() {
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const addRoleRef = ref();
|
||||
const editRoleRef = ref();
|
||||
const dataScopeRef =ref();
|
||||
const state = reactive<TableDataState>({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
roleName:'',
|
||||
roleStatus:'',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
roleList()
|
||||
};
|
||||
const roleList = ()=>{
|
||||
const data: Array<TableData> = [];
|
||||
getRoleList(state.tableData.param).then(res=>{
|
||||
const list = res.data.list??[]
|
||||
list.map((item:TableData)=>{
|
||||
data.push({
|
||||
id:item.id,
|
||||
status: item.status,
|
||||
listOrder: item.listOrder,
|
||||
name: item.name,
|
||||
remark: item.remark,
|
||||
dataScope:item.dataScope,
|
||||
createdAt: item.createdAt,
|
||||
});
|
||||
})
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = res.data.total;
|
||||
})
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = () => {
|
||||
editRoleRef.value.openDialog();
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (row: Object) => {
|
||||
editRoleRef.value.openDialog(toRaw(row));
|
||||
};
|
||||
|
||||
// 删除角色
|
||||
const onRowDel = (row: any) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteRole(row.id).then(()=>{
|
||||
ElMessage.success('删除成功');
|
||||
proxy.$refs['editRoleRef'].resetMenuSession();
|
||||
roleList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
return {
|
||||
addRoleRef,
|
||||
editRoleRef,
|
||||
dataScopeRef,
|
||||
onOpenAddRole,
|
||||
onOpenEditRole,
|
||||
onRowDel,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
roleList,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div class="system-edit-user-container">
|
||||
<el-dialog :title="(ruleForm.userId!==0?'修改':'添加')+'用户'" v-model="isShowDialog" width="769px">
|
||||
<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="ruleForm.userId===0">
|
||||
<el-form-item label="用户名" prop="userName">
|
||||
<el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="ruleForm.userId===0">
|
||||
<el-form-item label="账户密码" prop="password">
|
||||
<el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="用户昵称" prop="nickName">
|
||||
<el-input v-model="ruleForm.nickName" placeholder="请输入用户昵称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="关联角色" prop="roleIds">
|
||||
<el-select v-model="ruleForm.roleIds" placeholder="请选择" clearable class="w100" multiple>
|
||||
<el-option
|
||||
v-for="role in roleList"
|
||||
:key="'role-'+role.id"
|
||||
:label="role.name"
|
||||
:value="role.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="部门" prop="deptId">
|
||||
<el-cascader
|
||||
:options="deptData"
|
||||
:props="{ checkStrictly: true,emitPath: false, value: 'deptId', label: 'deptName' }"
|
||||
placeholder="请选择部门"
|
||||
clearable
|
||||
class="w100"
|
||||
v-model="ruleForm.deptId"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.deptName }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input v-model="ruleForm.mobile" placeholder="请输入手机号" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
|
||||
<el-option
|
||||
v-for="gender in genderData"
|
||||
:key="'gender-'+gender.value"
|
||||
:label="gender.label"
|
||||
:value="gender.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="岗位" prop="postIds">
|
||||
<el-select v-model="ruleForm.postIds" placeholder="请选择" clearable class="w100" multiple>
|
||||
<el-option
|
||||
v-for="post in postList"
|
||||
:key="'post-'+post.postId"
|
||||
:label="post.postName"
|
||||
:value="post.postId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="用户状态">
|
||||
<el-switch v-model="ruleForm.status" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="用户类型">
|
||||
<el-radio-group v-model="ruleForm.isAdmin">
|
||||
<el-radio
|
||||
:label="1"
|
||||
>后台管理员</el-radio>
|
||||
<el-radio
|
||||
:label="0"
|
||||
>前台用户</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="用户描述">
|
||||
<el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.userId!==0?'修 改':'添 加'}}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, onMounted, defineComponent,ref,unref } from 'vue';
|
||||
import {getParams, addUser, editUser, getEditUser} from "/@/api/system/user";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditUser',
|
||||
props:{
|
||||
deptData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
genderData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
setup(prop,{emit}) {
|
||||
const roleList = ref([]);
|
||||
const postList = ref([]);
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const state = reactive({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
userId: 0,
|
||||
deptId: 0,
|
||||
userName: '',
|
||||
nickName: '',
|
||||
password: '',
|
||||
mobile:'',
|
||||
email: '',
|
||||
sex: '',
|
||||
status: 1,
|
||||
remark: '',
|
||||
postIds: [],
|
||||
roleIds: [],
|
||||
isAdmin:0,
|
||||
},
|
||||
//表单校验
|
||||
rules: {
|
||||
userName: [
|
||||
{ required: true, message: "用户名称不能为空", trigger: "blur" }
|
||||
],
|
||||
nickName: [
|
||||
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
|
||||
],
|
||||
deptId: [
|
||||
{ required: true, message: "归属部门不能为空", trigger: "blur" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "用户密码不能为空", trigger: "blur" }
|
||||
],
|
||||
email: [
|
||||
{
|
||||
type: "email",
|
||||
message: "'请输入正确的邮箱地址",
|
||||
trigger: ["blur", "change"]
|
||||
}
|
||||
],
|
||||
mobile: [
|
||||
{ required: true, message: "手机号码不能为空", trigger: "blur" },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row?:any) => {
|
||||
resetForm()
|
||||
if(row) {
|
||||
getEditUser(row.id).then((res:any)=>{
|
||||
const user = res.data.user;
|
||||
state.ruleForm = {
|
||||
userId: user.id,
|
||||
deptId: user.deptId,
|
||||
userName: user.userName,
|
||||
nickName: user.userNickname,
|
||||
password: '-',
|
||||
mobile:user.mobile,
|
||||
email: user.userEmail,
|
||||
sex: String(user.sex),
|
||||
status: user.userStatus,
|
||||
remark: user.remark,
|
||||
postIds: res.data.checkedPosts??[],
|
||||
roleIds: res.data.checkedRoleIds??[],
|
||||
isAdmin:user.isAdmin,
|
||||
};
|
||||
})
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 新增
|
||||
const onSubmit = () => {
|
||||
const formWrap = unref(formRef) as any;
|
||||
if (!formWrap) return;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
if(state.ruleForm.userId===0){
|
||||
//添加
|
||||
addUser(state.ruleForm).then(()=>{
|
||||
ElMessage.success('用户添加成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('getUserList')
|
||||
});
|
||||
}else{
|
||||
//修改
|
||||
editUser(state.ruleForm).then(()=>{
|
||||
ElMessage.success('用户修改成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('getUserList')
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 初始化部门数据
|
||||
const initTableData = () => {
|
||||
//获取角色岗位选项
|
||||
getParams().then((res:any)=>{
|
||||
roleList.value = res.data.roleList??[];
|
||||
postList.value = res.data.posts??[];
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
const resetForm = ()=>{
|
||||
state.ruleForm = {
|
||||
userId: 0,
|
||||
deptId: 0,
|
||||
userName: '',
|
||||
nickName: '',
|
||||
password: '',
|
||||
mobile:'',
|
||||
email: '',
|
||||
sex: '',
|
||||
status: 1,
|
||||
remark: '',
|
||||
postIds: [],
|
||||
roleIds: [],
|
||||
isAdmin:0,
|
||||
}
|
||||
};
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
roleList,
|
||||
postList,
|
||||
formRef,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,362 @@
|
||||
<template>
|
||||
<div class="system-user-container">
|
||||
<el-row :gutter="10" style="width: 100%;">
|
||||
<el-col :span="4">
|
||||
<el-card shadow="hover">
|
||||
<el-aside>
|
||||
<el-scrollbar>
|
||||
<el-input :prefix-icon="search" v-model="filterText" placeholder="请输入部门名称" clearable size="default" style="width: 80%;"/>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
class="filter-tree"
|
||||
:data="deptData"
|
||||
:props="deptProps"
|
||||
default-expand-all
|
||||
:filter-node-method="deptFilterNode"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
|
||||
<el-form-item label="关键字" prop="keyWords">
|
||||
<el-input
|
||||
v-model="tableData.param.keyWords"
|
||||
placeholder="请输入用户账号或姓名"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="userList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="mobile">
|
||||
<el-input
|
||||
v-model="tableData.param.mobile"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="userList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status" style="width: 200px;">
|
||||
<el-select
|
||||
v-model="tableData.param.status"
|
||||
placeholder="用户状态"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option label="启用" :value="1"/>
|
||||
<el-option label="禁用" :value="0"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="tableData.param.dateRange"
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="userList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" @click="resetQuery(queryRef)">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddUser">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增用户
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除用户
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="dept.deptName" label="部门" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="角色" align="center" prop="roleInfo" :show-overflow-tooltip="true" >
|
||||
<template #default="scope">
|
||||
<span v-for="(item,index) of scope.row.roleInfo" :key="'role-'+index"> {{item.name+' '}} </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mobile" label="手机号" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="userStatus" label="用户状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.userStatus"
|
||||
inline-prompt
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
active-text="启"
|
||||
inactive-text="禁"
|
||||
@change="handleStatusChange(scope.row)">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditUser(scope.row)">修改</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
<el-button size="small" text type="primary" @click="handleResetPwd(scope.row)">重置</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total>0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="userList"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<EditUser ref="editUserRef" :dept-data="deptData" :gender-data="sys_user_sex" @getUserList="userList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, watch, getCurrentInstance} from 'vue';
|
||||
import {ElMessageBox, ElMessage, ElTree,FormInstance} from 'element-plus';
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import EditUser from '/@/views/system/user/component/editUser.vue';
|
||||
import {getUserList, getDeptTree, resetUserPwd, changeUserStatus, deleteUser} from '/@/api/system/user/index';
|
||||
|
||||
interface TableDataState {
|
||||
ids:number[];
|
||||
deptProps:{};
|
||||
deptData:any[];
|
||||
tableData: {
|
||||
data: any[];
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
deptId:string;
|
||||
mobile:string;
|
||||
status:string;
|
||||
keyWords:string;
|
||||
dateRange: string[];
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemUser',
|
||||
components: { EditUser },
|
||||
setup() {
|
||||
const {proxy} = <any>getCurrentInstance();
|
||||
const {sys_user_sex} = proxy.useDict('sys_user_sex')
|
||||
const editUserRef = ref();
|
||||
const queryRef = ref();
|
||||
const filterText = ref('');
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
const search = Search
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
deptProps:{
|
||||
id:"deptId",
|
||||
children: "children",
|
||||
label: "deptName"
|
||||
},
|
||||
deptData:[
|
||||
{
|
||||
label: '集团总部',
|
||||
children: [
|
||||
{
|
||||
label: '曲靖分部',
|
||||
children: [
|
||||
{
|
||||
label: '总经办',
|
||||
},
|
||||
{
|
||||
label: '市场部',
|
||||
},
|
||||
{
|
||||
label: '研发部',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deptId:'',
|
||||
mobile:'',
|
||||
status:'',
|
||||
keyWords:'',
|
||||
dateRange:[]
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
getDeptTree().then((res:any)=>{
|
||||
state.deptData = res.data.deps
|
||||
})
|
||||
userList();
|
||||
};
|
||||
const userList = ()=>{
|
||||
getUserList(state.tableData.param).then((res:any)=>{
|
||||
state.tableData.data = res.data.userList??[];
|
||||
state.tableData.total = res.data.total;
|
||||
});
|
||||
};
|
||||
// 打开新增用户弹窗
|
||||
const onOpenAddUser = () => {
|
||||
editUserRef.value.openDialog();
|
||||
};
|
||||
// 打开修改用户弹窗
|
||||
const onOpenEditUser = (row:any) => {
|
||||
editUserRef.value.openDialog(row);
|
||||
};
|
||||
// 删除用户
|
||||
const onRowDel = (row:any) => {
|
||||
let msg = '你确定要删除所选用户？';
|
||||
let ids:number[] = [] ;
|
||||
if(row){
|
||||
msg = `此操作将永久删除用户：“${row.userName}”，是否继续?`
|
||||
ids = [row.id]
|
||||
}else{
|
||||
ids = state.ids
|
||||
}
|
||||
if(ids.length===0){
|
||||
ElMessage.error('请选择要删除的数据。');
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteUser(ids).then(()=>{
|
||||
ElMessage.success('删除成功');
|
||||
userList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
watch(filterText, (val) => {
|
||||
treeRef.value!.filter(val)
|
||||
});
|
||||
const deptFilterNode = (value: string, data:any) => {
|
||||
if (!value) return true;
|
||||
return data.deptName.includes(value)
|
||||
};
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection:any[])=> {
|
||||
state.ids = selection.map(item => item.id)
|
||||
};
|
||||
// 节点单击事件
|
||||
const handleNodeClick = (data:any) => {
|
||||
state.tableData.param.deptId = data.deptId;
|
||||
userList();
|
||||
};
|
||||
/** 重置密码按钮操作 */
|
||||
const handleResetPwd = (row:any)=> {
|
||||
ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消"
|
||||
}).then(({ value }) => {
|
||||
if(!value || value==''){
|
||||
ElMessage.success('密码不能为空');
|
||||
return
|
||||
}
|
||||
resetUserPwd(row.id, value).then(() => {
|
||||
ElMessage.success("修改成功，新密码是：" + value);
|
||||
});
|
||||
}).catch(() => {});
|
||||
};
|
||||
// 用户状态修改
|
||||
const handleStatusChange = (row:any)=> {
|
||||
let text = row.userStatus === 1 ? "启用" : "停用";
|
||||
ElMessageBox.confirm('确认要"' + text + '"："' + row.userName + '"用户吗?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return changeUserStatus(row.id, row.userStatus);
|
||||
}).then(() => {
|
||||
ElMessage.success(text + "成功");
|
||||
}).catch(function() {
|
||||
row.userStatus =row.userStatus === 0 ?1 : 0;
|
||||
});
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
userList()
|
||||
};
|
||||
return {
|
||||
queryRef,
|
||||
editUserRef,
|
||||
onOpenAddUser,
|
||||
onOpenEditUser,
|
||||
onRowDel,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
deptFilterNode,
|
||||
filterText,
|
||||
treeRef,
|
||||
search,
|
||||
sys_user_sex,
|
||||
userList,
|
||||
handleSelectionChange,
|
||||
handleNodeClick,
|
||||
handleResetPwd,
|
||||
handleStatusChange,
|
||||
resetQuery,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,499 @@
|
||||
<template>
|
||||
<el-card shadow="hover" header="正则验证（一些项目中常用的正则）">
|
||||
<el-form :model="ruleForm" :rules="rules" class="tools-warp-form" size="default" label-position="top">
|
||||
<el-form-item label="验证百分比（不可以小数）:" prop="a22">
|
||||
<div class="tools-warp-form-msg">验证可以输入大于0小于100的数字</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a22" @input="onVerifyNumberPercentage($event)" placeholder="请输入数字进行测试">
|
||||
<template #append> % </template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证百分比（可以小数）:" prop="a23" class="mt20">
|
||||
<div class="tools-warp-form-msg">验证可以输入大于0小于100的数字</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a23" @input="onVerifyNumberPercentageFloat($event)" placeholder="请输入数字进行测试">
|
||||
<template #append> % </template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="小数或整数:" prop="a1" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证可以输入小数或整数，0 开始， . 只能出现一次，保留小数点后保留2位小数。(负数时，模拟拼接负号给后台)。
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a1" @input="onVerifyNumberIntegerAndFloat($event)" placeholder="请输入小数或整数进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="正整数:" prop="a2" class="mt20">
|
||||
<div class="tools-warp-form-msg">验证只可以输入正整数，0 开始后面将不可以输入。</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a2" @input="onVerifiyNumberInteger($event)" placeholder="请输入整数进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="去掉中文及空格:" prop="a3" class="mt20">
|
||||
<div class="tools-warp-form-msg">验证不可以输入空格与中文。</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a3" @input="onVerifyCnAndSpace($event)" placeholder="请输入内容进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="去掉英文及空格:" prop="a4" class="mt20">
|
||||
<div class="tools-warp-form-msg">验证不可以输入空格与英文。</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a4" @input="onVerifyEnAndSpace($event)" placeholder="请输入内容进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="禁止输入空格:" prop="a5" class="mt20">
|
||||
<div class="tools-warp-form-msg">验证不可以输入空格。</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a5" @input="onVerifyAndSpace($event)" placeholder="请输入内容进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="金额用 `,` 区分开:" prop="a6" class="mt20">
|
||||
<div class="tools-warp-form-msg">金额添加 `,` 进行区分，便于阅读。{{ ruleForm.a6 }}</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a6" @input="onVerifyNumberComma($event)" placeholder="请输入金额进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="匹配文字变色（搜索时）:" prop="a7" class="mt20">
|
||||
<div class="tools-warp-form-msg">示例：<span v-html="text"></span></div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a7" @input="onVerifyTextColor($event)" placeholder="请输入示例中的部分文字"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="数字转中文大写:" prop="a8" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证数字转成中文的大写。<span class="tools-warp-form-msg-red">{{ cnText }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a8" @input="onVerifyNumberCnUppercase($event)" placeholder="请输入金额进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码:" prop="a9" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证手机号码 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{ phone }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a9" @input="onVerifyPhone($event)" placeholder="请输入手机号进行测试" maxlength="11"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="国内电话号码:" prop="a10" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证国内电话号码 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{ telePhone }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a10" @input="onVerifyTelPhone($event)" placeholder="请输入国内电话号码进行测试" maxlength="12"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账号:" prop="a11" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证登录账号是否正确。字母开头，允许5-16字节，允许字母数字下划线 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{
|
||||
account
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a11" @input="onVerifyAccount($event)" placeholder="请输入账号进行测试" maxlength="16"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码:" prop="a12" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证密码是否正确。以字母开头，长度在6~16之间，只能包含字母、数字和下划线 (true: 正确，false: 不正确)。<span
|
||||
class="tools-warp-form-msg-red"
|
||||
>{{ password }}</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a12" @input="onVerifyPassword($event)" placeholder="请输入密码进行测试" maxlength="16"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="强密码:" prop="a13" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证强密码是否正确。字母+数字+特殊字符，长度在6-16之间 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{
|
||||
passwordPowerful
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a13" @input="onVerifyPasswordPowerful($event)" placeholder="请输入密码进行测试" maxlength="16"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码强度:" prop="a14" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证密码强度。返回 强、中、弱。(弱：纯数字，纯字母，纯特殊字符，中：字母+数字，字母+特殊字符，数字+特殊字符，强：字母+数字+特殊字符)<span
|
||||
class="tools-warp-form-msg-red"
|
||||
>{{ passwordStrength }}</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a14" @input="onVerifyPasswordStrength($event)" placeholder="请输入密码进行测试" maxlength="16"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP地址:" prop="a15" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证IP地址是否正确。(true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{ iPAddress }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a15" @input="onVerifyIPAddress($event)" placeholder="请输入IP地址进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱:" prop="a16" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证邮箱是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ email }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a16" @input="onVerifyEmail($event)" placeholder="请输入邮箱进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证:" prop="a17" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证身份证是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ idCard }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a17" @input="onVerifyIDCard($event)" placeholder="请输入身份证进行测试" maxlength="18"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名:" prop="a18" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证姓名是否正确，包括少数民族名字。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ fullName }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a18" @input="onVerifyFullName($event)" placeholder="请输入姓名进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮政编码:" prop="a19" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证邮政编码是否正确，不能以 0 开始。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ postalCode }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a19" @input="onVerifyPostalCode($event)" placeholder="请输入邮政编码进行测试" maxlength="6"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="url:" prop="a20" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证url是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ url }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a20" @input="onVerifyUrl($event)" placeholder="请输入内容进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="车牌号:" prop="a21" class="mt20">
|
||||
<div class="tools-warp-form-msg">
|
||||
验证车牌号是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ carNum }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="ruleForm.a21" @input="onVerifyCarNum($event)" placeholder="请输入车牌号进行测试"> </el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent } from 'vue';
|
||||
import {
|
||||
verifyNumberPercentage,
|
||||
verifyNumberPercentageFloat,
|
||||
verifyNumberIntegerAndFloat,
|
||||
verifiyNumberInteger,
|
||||
verifyCnAndSpace,
|
||||
verifyEnAndSpace,
|
||||
verifyAndSpace,
|
||||
verifyNumberComma,
|
||||
verifyTextColor,
|
||||
verifyNumberCnUppercase,
|
||||
verifyPhone,
|
||||
verifyTelPhone,
|
||||
verifyAccount,
|
||||
verifyPassword,
|
||||
verifyPasswordPowerful,
|
||||
verifyPasswordStrength,
|
||||
verifyIPAddress,
|
||||
verifyEmail,
|
||||
verifyIdCard,
|
||||
verifyFullName,
|
||||
verifyPostalCode,
|
||||
verifyUrl,
|
||||
verifyCarNum,
|
||||
} from '/@/utils/toolsValidate';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'tools',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
text: '世间美好，与你环环相扣，祝你开心每一天！',
|
||||
phone: false,
|
||||
cnText: '',
|
||||
telePhone: false,
|
||||
account: false,
|
||||
password: false,
|
||||
passwordPowerful: false,
|
||||
passwordStrength: '',
|
||||
iPAddress: false,
|
||||
email: false,
|
||||
idCard: false,
|
||||
fullName: false,
|
||||
postalCode: false,
|
||||
url: false,
|
||||
carNum: false,
|
||||
/**
|
||||
* 变量名为了方便，随便取了，
|
||||
* 实际中，按正常程序进行命名
|
||||
*/
|
||||
ruleForm: {
|
||||
a1: '',
|
||||
a2: '',
|
||||
a3: '',
|
||||
a4: '',
|
||||
a5: '',
|
||||
a6: '',
|
||||
a7: '',
|
||||
a8: '',
|
||||
a9: '',
|
||||
a10: '',
|
||||
a11: '',
|
||||
a12: '',
|
||||
a13: '',
|
||||
a14: '',
|
||||
a15: '',
|
||||
a16: '',
|
||||
a17: '',
|
||||
a18: '',
|
||||
a19: '',
|
||||
a20: '',
|
||||
a21: '',
|
||||
a22: '',
|
||||
a23: '',
|
||||
},
|
||||
rules: {
|
||||
a1: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入小数或整数进行测试',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
a2: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入正整数进行测试',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
a3: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
|
||||
a4: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
|
||||
a5: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
|
||||
a6: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入小数或整数进行测试',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
a7: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
|
||||
a8: [{ required: true, message: '请输入金额进行测试', trigger: 'change' }],
|
||||
a9: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号进行测试',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
a10: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入国内电话号码进行测试',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
a11: [{ required: true, message: '请输入账号进行测试', trigger: 'change' }],
|
||||
a12: [{ required: true, message: '请输入密码进行测试', trigger: 'change' }],
|
||||
a13: [{ required: true, message: '请输入密码进行测试', trigger: 'change' }],
|
||||
a14: [{ required: true, message: '请输入密码进行测试', trigger: 'change' }],
|
||||
a15: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入IP地址进行测试',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
a16: [{ required: true, message: '请输入邮箱进行测试', trigger: 'change' }],
|
||||
a17: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入身份证进行测试',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
a18: [{ required: true, message: '请输入姓名进行测试', trigger: 'change' }],
|
||||
a19: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入邮政编码进行测试',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
a20: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
|
||||
a21: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入车牌号进行测试',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
a22: [{ required: true, message: '请输入数字进行测试', trigger: 'change' }],
|
||||
a23: [{ required: true, message: '请输入数字进行测试', trigger: 'change' }],
|
||||
},
|
||||
});
|
||||
// 验证百分比（不可以小数）
|
||||
const onVerifyNumberPercentage = (val: string) => {
|
||||
state.ruleForm.a22 = verifyNumberPercentage(val);
|
||||
};
|
||||
// 验证百分比（可以小数）
|
||||
const onVerifyNumberPercentageFloat = (val: string) => {
|
||||
state.ruleForm.a23 = verifyNumberPercentageFloat(val);
|
||||
};
|
||||
// 小数或整数
|
||||
const onVerifyNumberIntegerAndFloat = (val: string) => {
|
||||
state.ruleForm.a1 = verifyNumberIntegerAndFloat(val);
|
||||
};
|
||||
// 正整数
|
||||
const onVerifiyNumberInteger = (val: string) => {
|
||||
state.ruleForm.a2 = verifiyNumberInteger(val);
|
||||
};
|
||||
// 去掉中文及空格
|
||||
const onVerifyCnAndSpace = (val: string) => {
|
||||
state.ruleForm.a3 = verifyCnAndSpace(val);
|
||||
};
|
||||
// 去掉英文及空格
|
||||
const onVerifyEnAndSpace = (val: string) => {
|
||||
state.ruleForm.a4 = verifyEnAndSpace(val);
|
||||
};
|
||||
// 禁止输入空格
|
||||
const onVerifyAndSpace = (val: string) => {
|
||||
state.ruleForm.a5 = verifyAndSpace(val);
|
||||
};
|
||||
// 金额用 `,` 区分开
|
||||
const onVerifyNumberComma = (val: string) => {
|
||||
state.ruleForm.a6 = verifyNumberComma(val);
|
||||
};
|
||||
// 匹配文字变色（搜索时）
|
||||
const onVerifyTextColor = (val: string) => {
|
||||
state.ruleForm.a7 = verifyAndSpace(val);
|
||||
if (state.ruleForm.a7 === '') state.text = `世间美好，与你环环相扣，祝你开心每一天！`;
|
||||
else state.text = verifyTextColor(state.ruleForm.a7, state.text);
|
||||
};
|
||||
// 数字转中文大写
|
||||
const onVerifyNumberCnUppercase = (val: string) => {
|
||||
state.ruleForm.a8 = verifyNumberIntegerAndFloat(val);
|
||||
if (state.ruleForm.a8 === '') state.cnText = '';
|
||||
else state.cnText = verifyNumberCnUppercase(state.ruleForm.a8);
|
||||
};
|
||||
// 手机号码
|
||||
const onVerifyPhone = (val: string) => {
|
||||
state.phone = verifyPhone(val);
|
||||
};
|
||||
// 国内电话号码
|
||||
const onVerifyTelPhone = (val: string) => {
|
||||
state.telePhone = verifyTelPhone(val);
|
||||
};
|
||||
// 登录账号
|
||||
const onVerifyAccount = (val: string) => {
|
||||
state.ruleForm.a11 = verifyCnAndSpace(val);
|
||||
state.account = verifyAccount(state.ruleForm.a11);
|
||||
};
|
||||
// 密码
|
||||
const onVerifyPassword = (val: string) => {
|
||||
state.ruleForm.a12 = verifyCnAndSpace(val);
|
||||
state.password = verifyPassword(state.ruleForm.a12);
|
||||
};
|
||||
// 强密码
|
||||
const onVerifyPasswordPowerful = (val: string) => {
|
||||
state.ruleForm.a13 = verifyCnAndSpace(val);
|
||||
state.passwordPowerful = verifyPasswordPowerful(state.ruleForm.a13);
|
||||
};
|
||||
// 密码强度
|
||||
const onVerifyPasswordStrength = (val: string) => {
|
||||
state.ruleForm.a14 = verifyCnAndSpace(val);
|
||||
state.passwordStrength = verifyPasswordStrength(state.ruleForm.a14);
|
||||
};
|
||||
// IP地址
|
||||
const onVerifyIPAddress = (val: string) => {
|
||||
state.iPAddress = verifyIPAddress(val);
|
||||
};
|
||||
// 邮箱
|
||||
const onVerifyEmail = (val: string) => {
|
||||
state.ruleForm.a16 = verifyCnAndSpace(val);
|
||||
state.email = verifyEmail(state.ruleForm.a16);
|
||||
};
|
||||
// 身份证
|
||||
const onVerifyIDCard = (val: string) => {
|
||||
state.ruleForm.a17 = verifyCnAndSpace(val);
|
||||
state.idCard = verifyIdCard(state.ruleForm.a17);
|
||||
};
|
||||
// 姓名
|
||||
const onVerifyFullName = (val: string) => {
|
||||
state.ruleForm.a18 = verifyAndSpace(val);
|
||||
state.fullName = verifyFullName(state.ruleForm.a18);
|
||||
};
|
||||
// 邮政编码
|
||||
const onVerifyPostalCode = (val: string) => {
|
||||
state.ruleForm.a19 = verifiyNumberInteger(val);
|
||||
state.postalCode = verifyPostalCode(state.ruleForm.a19);
|
||||
};
|
||||
// url
|
||||
const onVerifyUrl = (val: string) => {
|
||||
state.ruleForm.a20 = verifyAndSpace(val);
|
||||
state.url = verifyUrl(state.ruleForm.a20);
|
||||
};
|
||||
// 车牌号
|
||||
const onVerifyCarNum = (val: string) => {
|
||||
state.ruleForm.a21 = verifyAndSpace(val);
|
||||
state.carNum = verifyCarNum(state.ruleForm.a21);
|
||||
};
|
||||
return {
|
||||
onVerifyNumberPercentage,
|
||||
onVerifyNumberPercentageFloat,
|
||||
onVerifyNumberIntegerAndFloat,
|
||||
onVerifiyNumberInteger,
|
||||
onVerifyCnAndSpace,
|
||||
onVerifyEnAndSpace,
|
||||
onVerifyAndSpace,
|
||||
onVerifyNumberComma,
|
||||
onVerifyTextColor,
|
||||
onVerifyNumberCnUppercase,
|
||||
onVerifyPhone,
|
||||
onVerifyTelPhone,
|
||||
onVerifyAccount,
|
||||
onVerifyPassword,
|
||||
onVerifyPasswordPowerful,
|
||||
onVerifyPasswordStrength,
|
||||
onVerifyIPAddress,
|
||||
onVerifyEmail,
|
||||
onVerifyIDCard,
|
||||
onVerifyFullName,
|
||||
onVerifyPostalCode,
|
||||
onVerifyUrl,
|
||||
onVerifyCarNum,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tools-warp-form {
|
||||
:deep(.el-form-item--small.el-form-item) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.tools-warp-form-msg {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
.tools-warp-form-msg-red {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.tools-warp-form-msg + div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 607 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user