JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-04-05 05:42:45 +08:00
Code Issues Projects Releases Wiki Activity

prettier代码格式重新配置

Browse Source
This commit is contained in:
初志鑫 2020-07-21 10:35:35 +08:00
parent d134f932b9
commit 6664949dab
74 changed files with 5748 additions and 5719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
prettier.config.js
View File

@ -10,6 +10,7 @@ module.exports = {
bracketSpacing: true,
jsxBracketSameLine: false,
arrowParens: "always",
vueIndentScriptAndStyle: false,
htmlWhitespaceSensitivity: "ignore",
vueIndentScriptAndStyle: true,
endOfLine: "lf",
};

8
src/App.vue
View File

@ -5,8 +5,8 @@
</template>
<script>
export default {
name: "App",
mounted() {},
};
export default {
name: "App",
mounted() {},
};
</script>

168
src/components/JsonEditor/index.vue
View File

@ -7,105 +7,105 @@
</template>
<script>
import CodeMirror from "codemirror";
import "codemirror/addon/lint/lint.css";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/rubyblue.css";
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/json-lint";
import CodeMirror from "codemirror";
import "codemirror/addon/lint/lint.css";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/rubyblue.css";
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/json-lint";
require("script-loader!jsonlint");
require("script-loader!jsonlint");
export default {
name: "JsonEditor",
props: {
value: {
type: [Array, Object],
default: () => {
return null;
export default {
name: "JsonEditor",
props: {
value: {
type: [Array, Object],
default: () => {
return null;
},
},
},
},
data() {
return {
jsonEditor: false,
};
},
watch: {
value(value) {
const editorValue = this.jsonEditor.getValue();
if (editorValue) {
this.$emit("change", editorValue);
} else {
this.$baseMessage("JSON不能为空,否则无法生成表格", "error");
}
if (value !== editorValue) {
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
}
data() {
return {
jsonEditor: false,
};
},
},
mounted() {
this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
lineNumbers: true,
mode: "application/json",
gutters: ["CodeMirror-lint-markers"],
theme: "rubyblue",
lint: true,
});
watch: {
value(value) {
const editorValue = this.jsonEditor.getValue();
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
this.jsonEditor.on("change", (cm) => {
if (this.isJsonString(cm.getValue())) {
this.$emit("change", cm.getValue());
}
});
},
methods: {
getValue() {
return this.jsonEditor.getValue();
},
isJsonString(str) {
try {
if (typeof JSON.parse(str) == "object") {
return true;
if (editorValue) {
this.$emit("change", editorValue);
} else {
this.$baseMessage("JSON不能为空,否则无法生成表格", "error");
}
} catch (e) {}
return false;
if (value !== editorValue) {
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
}
},
},
},
};
mounted() {
this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
lineNumbers: true,
mode: "application/json",
gutters: ["CodeMirror-lint-markers"],
theme: "rubyblue",
lint: true,
});
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
this.jsonEditor.on("change", (cm) => {
if (this.isJsonString(cm.getValue())) {
this.$emit("change", cm.getValue());
}
});
},
methods: {
getValue() {
return this.jsonEditor.getValue();
},
isJsonString(str) {
try {
if (typeof JSON.parse(str) == "object") {
return true;
}
} catch (e) {}
return false;
},
},
};
</script>
<style scoped>
.json-editor {
position: relative;
height: 100%;
}
.json-editor {
position: relative;
height: 100%;
}
.json-editor >>> .CodeMirror {
height: auto;
min-height: calc(100vh - 220px);
}
.json-editor >>> .CodeMirror {
height: auto;
min-height: calc(100vh - 220px);
}
.json-editor >>> .CodeMirror-scroll {
min-height: calc(100vh - 220px);
}
.json-editor >>> .CodeMirror-scroll {
min-height: calc(100vh - 220px);
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
color: #f08047;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
color: #f08047;
}
.json-editor >>> .cm-s-rubyblue .CodeMirror-gutters {
padding-right: 10px;
.json-editor >>> .cm-s-rubyblue .CodeMirror-gutters {
padding-right: 10px;
/* background: transparent; */
border-right: 1px solid #fff;
}
/* background: transparent; */
border-right: 1px solid #fff;
}
.json-editor >>> .cm-s-rubyblue.CodeMirror {
/* background: #08233e; */
color: white;
}
.json-editor >>> .cm-s-rubyblue.CodeMirror {
/* background: #08233e; */
color: white;
}
</style>

286
src/components/SelectTree/index.vue
View File

@ -31,168 +31,168 @@
</template>
<script>
export default {
name: "SelectTreeTemplate",
props: {
/* 树形结构数据 */
treeOptions: {
type: Array,
default: () => {
return [];
export default {
name: "SelectTreeTemplate",
props: {
/* 树形结构数据 */
treeOptions: {
type: Array,
default: () => {
return [];
},
},
/* 单选/多选 */
selectType: {
type: String,
default: () => {
return "single";
},
},
/* 初始选中值key */
selectedKey: {
type: String,
default: () => {
return "";
},
},
/* 初始选中值name */
selectedValue: {
type: String,
default: () => {
return "";
},
},
/* 可做选择的层级 */
selectLevel: {
type: [String, Number],
default: () => {
return "";
},
},
/* 可清空选项 */
clearable: {
type: Boolean,
default: () => {
return true;
},
},
},
/* 单选/多选 */
selectType: {
type: String,
default: () => {
return "single";
},
data() {
return {
defaultProps: {
children: "children",
label: "name",
},
defaultSelectedKeys: [], //初始选中值数组
currentNodeKey: this.selectedKey,
selectValue:
this.selectType == "multiple"
? this.selectedValue.split(",")
: this.selectedValue, //下拉框选中值label
selectKey:
this.selectType == "multiple"
? this.selectedKey.split(",")
: this.selectedKey, //下拉框选中值value
};
},
/* 初始选中值key */
selectedKey: {
type: String,
default: () => {
return "";
},
},
/* 初始选中值name */
selectedValue: {
type: String,
default: () => {
return "";
},
},
/* 可做选择的层级 */
selectLevel: {
type: [String, Number],
default: () => {
return "";
},
},
/* 可清空选项 */
clearable: {
type: Boolean,
default: () => {
return true;
},
},
},
data() {
return {
defaultProps: {
children: "children",
label: "name",
},
defaultSelectedKeys: [], //初始选中值数组
currentNodeKey: this.selectedKey,
selectValue:
this.selectType == "multiple"
? this.selectedValue.split(",")
: this.selectedValue, //下拉框选中值label
selectKey:
this.selectType == "multiple"
? this.selectedKey.split(",")
: this.selectedKey, //下拉框选中值value
};
},
mounted() {
const that = this;
this.initTree();
},
methods: {
// 初始化树的值
initTree() {
mounted() {
const that = this;
if (that.selectedKey) {
that.defaultSelectedKeys = that.selectedKey.split(","); // 设置默认展开
this.initTree();
},
methods: {
// 初始化树的值
initTree() {
const that = this;
if (that.selectedKey) {
that.defaultSelectedKeys = that.selectedKey.split(","); // 设置默认展开
if (that.selectType == "single") {
that.$refs.treeOption.setCurrentKey(that.selectedKey); // 设置默认选中
} else {
that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys);
}
}
},
// 清除选中
clearHandle() {
const that = this;
this.selectValue = "";
this.selectKey = "";
this.defaultSelectedKeys = [];
this.currentNodeKey = "";
this.clearSelected();
if (that.selectType == "single") {
that.$refs.treeOption.setCurrentKey(that.selectedKey); // 设置默认选中
that.$refs.treeOption.setCurrentKey(""); // 设置默认选中
} else {
that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys);
that.$refs.treeOption.setCheckedKeys([]);
}
}
},
// 清除选中
clearHandle() {
const that = this;
this.selectValue = "";
this.selectKey = "";
this.defaultSelectedKeys = [];
this.currentNodeKey = "";
this.clearSelected();
if (that.selectType == "single") {
that.$refs.treeOption.setCurrentKey(""); // 设置默认选中
} else {
that.$refs.treeOption.setCheckedKeys([]);
}
},
/* 清空选中样式 */
clearSelected() {
const allNode = document.querySelectorAll("#treeOption .el-tree-node");
allNode.forEach((element) => element.classList.remove("is-current"));
},
// select多选时移除某项操作
removeTag(val) {
this.$refs.treeOption.setCheckedKeys([]);
},
// 点击叶子节点
nodeClick(data, node, el) {
if (data.rank >= this.selectLevel) {
this.selectValue = data.name;
this.selectKey = data.id;
}
},
// 节点选中操作
checkNode(data, node, el) {
const checkedNodes = this.$refs.treeOption.getCheckedNodes();
const keyArr = [];
const valueArr = [];
checkedNodes.forEach((item) => {
if (item.rank >= this.selectLevel) {
keyArr.push(item.id);
valueArr.push(item.name);
},
/* 清空选中样式 */
clearSelected() {
const allNode = document.querySelectorAll("#treeOption .el-tree-node");
allNode.forEach((element) => element.classList.remove("is-current"));
},
// select多选时移除某项操作
removeTag(val) {
this.$refs.treeOption.setCheckedKeys([]);
},
// 点击叶子节点
nodeClick(data, node, el) {
if (data.rank >= this.selectLevel) {
this.selectValue = data.name;
this.selectKey = data.id;
}
});
this.selectValue = valueArr;
this.selectKey = keyArr;
},
// 节点选中操作
checkNode(data, node, el) {
const checkedNodes = this.$refs.treeOption.getCheckedNodes();
const keyArr = [];
const valueArr = [];
checkedNodes.forEach((item) => {
if (item.rank >= this.selectLevel) {
keyArr.push(item.id);
valueArr.push(item.name);
}
});
this.selectValue = valueArr;
this.selectKey = keyArr;
},
},
},
};
};
</script>
<style lang="scss" scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
max-height: 274px;
padding: 0;
overflow-y: auto;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
max-height: 274px;
padding: 0;
overflow-y: auto;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
ul li > .el-tree .el-tree-node__content {
height: auto;
padding: 0 20px;
}
ul li > .el-tree .el-tree-node__content {
height: auto;
padding: 0 20px;
}
.el-tree-node__label {
font-weight: normal;
}
.el-tree-node__label {
font-weight: normal;
}
.el-tree > .is-current .el-tree-node__label {
font-weight: 700;
color: #409eff;
}
.el-tree > .is-current .el-tree-node__label {
font-weight: 700;
color: #409eff;
}
.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
font-weight: normal;
color: #606266;
}
.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
font-weight: normal;
color: #606266;
}
</style>
<style lang="scss">
/* .vab-tree-select{
/* .vab-tree-select{
.el-tag__close.el-icon-close{
width:0;
overflow:hidden;

290
src/components/VabCharge/index.vue
View File

@ -23,169 +23,169 @@
</template>
<script>
export default {
name: "VabCharge",
props: {
styleObj: {
type: Object,
default: () => {
return {};
export default {
name: "VabCharge",
props: {
styleObj: {
type: Object,
default: () => {
return {};
},
},
startVal: {
type: Number,
default: 0,
},
endVal: {
type: Number,
default: 100,
},
},
startVal: {
type: Number,
default: 0,
data() {
return {
decimals: 2,
prefix: "",
suffix: "%",
separator: ",",
duration: 3000,
};
},
endVal: {
type: Number,
default: 100,
},
},
data() {
return {
decimals: 2,
prefix: "",
suffix: "%",
separator: ",",
duration: 3000,
};
},
created() {},
mounted() {},
methods: {},
};
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.content {
position: relative;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
width: 100%;
background: #000;
.g-number {
position: absolute;
top: 27%;
z-index: 99;
width: 300px;
font-size: 32px;
color: #fff;
text-align: center;
}
.g-container {
.content {
position: relative;
width: 300px;
height: 400px;
margin: auto;
}
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
width: 100%;
background: #000;
.g-contrast {
width: 300px;
height: 400px;
overflow: hidden;
background-color: #000;
filter: contrast(15) hue-rotate(0);
animation: hueRotate 10s infinite linear;
}
.g-circle {
position: relative;
box-sizing: border-box;
width: 300px;
height: 300px;
filter: blur(8px);
&::after {
.g-number {
position: absolute;
top: 40%;
left: 50%;
width: 200px;
height: 200px;
content: "";
background-color: #00ff6f;
border-radius: 42% 38% 62% 49% / 45%;
transform: translate(-50%, -50%) rotate(0);
animation: rotate 10s infinite linear;
}
&::before {
position: absolute;
top: 40%;
left: 50%;
top: 27%;
z-index: 99;
width: 176px;
height: 176px;
content: "";
width: 300px;
font-size: 32px;
color: #fff;
text-align: center;
}
.g-container {
position: relative;
width: 300px;
height: 400px;
margin: auto;
}
.g-contrast {
width: 300px;
height: 400px;
overflow: hidden;
background-color: #000;
filter: contrast(15) hue-rotate(0);
animation: hueRotate 10s infinite linear;
}
.g-circle {
position: relative;
box-sizing: border-box;
width: 300px;
height: 300px;
filter: blur(8px);
&::after {
position: absolute;
top: 40%;
left: 50%;
width: 200px;
height: 200px;
content: "";
background-color: #00ff6f;
border-radius: 42% 38% 62% 49% / 45%;
transform: translate(-50%, -50%) rotate(0);
animation: rotate 10s infinite linear;
}
&::before {
position: absolute;
top: 40%;
left: 50%;
z-index: 99;
width: 176px;
height: 176px;
content: "";
background-color: #000;
border-radius: 50%;
transform: translate(-50%, -50%);
}
}
.g-bubbles {
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
height: 40px;
background-color: #00ff6f;
filter: blur(5px);
border-radius: 100px 100px 0 0;
transform: translate(-50%, 0);
}
li {
position: absolute;
background: #00ff6f;
border-radius: 50%;
transform: translate(-50%, -50%);
}
}
.g-bubbles {
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
height: 40px;
background-color: #00ff6f;
filter: blur(5px);
border-radius: 100px 100px 0 0;
transform: translate(-50%, 0);
}
li {
position: absolute;
background: #00ff6f;
border-radius: 50%;
}
@for $i from 0 through 15 {
li:nth-child(#{$i}) {
$width: 15 + random(15) + px;
top: 50%;
left: 15 + random(70) + px;
width: $width;
height: $width;
transform: translate(-50%, -50%);
animation: moveToTop
#{random(6) +
3}s
ease-in-out -#{random(5000) /
1000}s
infinite;
}
}
@keyframes rotate {
50% {
border-radius: 45% / 42% 38% 58% 49%;
}
100% {
transform: translate(-50%, -50%) rotate(720deg);
}
}
@for $i from 0 through 15 {
li:nth-child(#{$i}) {
$width: 15 + random(15) + px;
@keyframes moveToTop {
90% {
opacity: 1;
top: 50%;
left: 15 + random(70) + px;
width: $width;
height: $width;
transform: translate(-50%, -50%);
animation: moveToTop
#{random(6) +
3}s
ease-in-out -#{random(5000) /
1000}s
infinite;
}
}
100% {
opacity: 0.1;
transform: translate(-50%, -180px);
}
}
@keyframes rotate {
50% {
border-radius: 45% / 42% 38% 58% 49%;
}
@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate(360deg);
100% {
transform: translate(-50%, -50%) rotate(720deg);
}
}
@keyframes moveToTop {
90% {
opacity: 1;
}
100% {
opacity: 0.1;
transform: translate(-50%, -180px);
}
}
@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate(360deg);
}
}
}
}
</style>

122
src/components/VabImage/index.vue
View File

@ -17,76 +17,76 @@
</template>
<script>
export default {
name: "VabImage",
components: {},
props: {
bigSrc: {
type: String,
default: "",
export default {
name: "VabImage",
components: {},
props: {
bigSrc: {
type: String,
default: "",
},
smallSrc: {
type: String,
default: "",
},
percent: {
type: Number,
default: 97,
},
},
smallSrc: {
type: String,
default: "",
data() {
return {};
},
percent: {
type: Number,
default: 97,
created() {},
mounted() {},
methods: {
clickBig() {
this.$emit("clickBig");
},
clickSmall() {
this.$emit("clickSmall");
},
},
},
data() {
return {};
},
created() {},
mounted() {},
methods: {
clickBig() {
this.$emit("clickBig");
},
clickSmall() {
this.$emit("clickSmall");
},
},
};
};
</script>
<style lang="scss" scoped>
.vab-image {
&__outter {
position: relative;
width: 100%;
height: 100%;
.vab-image {
&__outter {
position: relative;
width: 100%;
height: 100%;
::v-deep {
img {
::v-deep {
img {
border-radius: $base-border-radius;
}
}
&__small {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 100px;
border-bottom: 1px solid $base-color-white;
border-left: 1px solid $base-color-white;
border-radius: $base-border-radius;
}
&__percent {
position: absolute;
right: 0;
bottom: 0;
display: inline-block;
min-width: 50px;
height: 25px;
line-height: 25px;
color: $base-color-white;
text-align: center;
background-color: $base-color-red;
border-radius: $base-border-radius;
}
}
&__small {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 100px;
border-bottom: 1px solid $base-color-white;
border-left: 1px solid $base-color-white;
border-radius: $base-border-radius;
}
&__percent {
position: absolute;
right: 0;
bottom: 0;
display: inline-block;
min-width: 50px;
height: 25px;
line-height: 25px;
color: $base-color-white;
text-align: center;
background-color: $base-color-red;
border-radius: $base-border-radius;
}
}
}
</style>

446
src/components/VabProfile/index.vue
View File

@ -25,289 +25,289 @@
</template>
<script>
export default {
name: "VabProfile",
props: {
styleObj: {
type: Object,
default: () => {
return {};
export default {
name: "VabProfile",
props: {
styleObj: {
type: Object,
default: () => {
return {};
},
},
username: {
type: String,
default: "",
},
avatar: {
type: String,
default: "",
},
iconArray: {
type: Array,
default: () => {
return [
{ icon: "bell", url: "" },
{ icon: "bookmark", url: "" },
{ icon: "cloud-sun", url: "" },
];
},
},
},
username: {
type: String,
default: "",
data() {
return {};
},
avatar: {
type: String,
default: "",
},
iconArray: {
type: Array,
default: () => {
return [
{ icon: "bell", url: "" },
{ icon: "bookmark", url: "" },
{ icon: "cloud-sun", url: "" },
];
},
},
},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.card {
--card-bg-color: hsl(240, 31%, 25%);
--card-bg-color-transparent: hsla(240, 31%, 25%, 0.7);
.card {
--card-bg-color: hsl(240, 31%, 25%);
--card-bg-color-transparent: hsla(240, 31%, 25%, 0.7);
position: relative;
width: 100%;
height: 100%;
.card-borders {
position: absolute;
top: 0;
left: 0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.border-top {
.card-borders {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--card-bg-color);
transform: translateX(-100%);
animation: slide-in-horizontal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
forwards;
}
.border-right {
position: absolute;
right: 0;
width: 2px;
height: 100%;
background: var(--card-bg-color);
transform: translateY(100%);
animation: slide-in-vertical 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
forwards;
}
overflow: hidden;
.border-bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 2px;
background: var(--card-bg-color);
transform: translateX(100%);
animation: slide-in-horizontal-reverse 0.8s
cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.border-left {
position: absolute;
top: 0;
width: 2px;
height: 100%;
background: var(--card-bg-color);
transform: translateY(-100%);
animation: slide-in-vertical-reverse 0.8s
cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
}
.card-content {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: 40px 0 40px 0;
background: var(--card-bg-color-transparent);
opacity: 0;
transform: scale(0.6);
animation: bump-in 0.5s 0.8s forwards;
.avatar {
width: 80px;
height: 80px;
border: 1px solid $base-color-white;
border-radius: 50%;
opacity: 0;
transform: scale(0.6);
animation: bump-in 0.5s 1s forwards;
}
.username {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
font-size: 26px;
color: transparent;
letter-spacing: 2px;
animation: fill-text-white 1.2s 2s forwards;
&::before {
.border-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--card-bg-color);
transform: translateX(-100%);
animation: slide-in-horizontal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
forwards;
}
.border-right {
position: absolute;
right: 0;
width: 2px;
height: 100%;
color: black;
content: "";
background: #35b9f1;
transform: scaleX(0);
transform-origin: left;
animation: slide-in-out 1.2s 1.2s cubic-bezier(0.75, 0, 0, 1) forwards;
background: var(--card-bg-color);
transform: translateY(100%);
animation: slide-in-vertical 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
forwards;
}
.border-bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 2px;
background: var(--card-bg-color);
transform: translateX(100%);
animation: slide-in-horizontal-reverse 0.8s
cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.border-left {
position: absolute;
top: 0;
width: 2px;
height: 100%;
background: var(--card-bg-color);
transform: translateY(-100%);
animation: slide-in-vertical-reverse 0.8s
cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
}
.social-icons {
.card-content {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: 40px 0 40px 0;
background: var(--card-bg-color-transparent);
opacity: 0;
transform: scale(0.6);
animation: bump-in 0.5s 0.8s forwards;
.social-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 2.5em;
height: 2.5em;
margin: 0 15px;
color: white;
text-decoration: none;
.avatar {
width: 80px;
height: 80px;
border: 1px solid $base-color-white;
border-radius: 50%;
opacity: 0;
transform: scale(0.6);
animation: bump-in 0.5s 1s forwards;
}
@for $i from 1 through 3 {
&:nth-child(#{$i}) {
&::before {
animation-delay: 2s + 0.1s * $i;
}
.username {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
font-size: 26px;
color: transparent;
letter-spacing: 2px;
animation: fill-text-white 1.2s 2s forwards;
&::after {
animation-delay: 2.1s + 0.1s * $i;
}
svg {
animation-delay: 2.2s + 0.1s * $i;
}
}
}
&::before,
&::after {
&::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: black;
content: "";
border-radius: inherit;
transform: scale(0);
background: #35b9f1;
transform: scaleX(0);
transform-origin: left;
animation: slide-in-out 1.2s 1.2s cubic-bezier(0.75, 0, 0, 1) forwards;
}
}
&::before {
background: #f7f1e3;
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
}
.social-icons {
display: flex;
&::after {
background: #2c3e50;
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
}
.social-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 2.5em;
height: 2.5em;
margin: 0 15px;
color: white;
text-decoration: none;
border-radius: 50%;
svg {
z-index: 99;
transform: scale(0);
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
@for $i from 1 through 3 {
&:nth-child(#{$i}) {
&::before {
animation-delay: 2s + 0.1s * $i;
}
&::after {
animation-delay: 2.1s + 0.1s * $i;
}
svg {
animation-delay: 2.2s + 0.1s * $i;
}
}
}
&::before,
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: inherit;
transform: scale(0);
}
&::before {
background: #f7f1e3;
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
}
&::after {
background: #2c3e50;
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
}
svg {
z-index: 99;
transform: scale(0);
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
}
}
}
}
}
}
@keyframes bump-in {
50% {
transform: scale(1.05);
@keyframes bump-in {
50% {
transform: scale(1.05);
}
to {
opacity: 1;
transform: scale(1);
}
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slide-in-horizontal {
50% {
transform: translateX(0);
}
@keyframes slide-in-horizontal {
50% {
transform: translateX(0);
to {
transform: translateX(100%);
}
}
to {
transform: translateX(100%);
}
}
@keyframes slide-in-horizontal-reverse {
50% {
transform: translateX(0);
}
@keyframes slide-in-horizontal-reverse {
50% {
transform: translateX(0);
to {
transform: translateX(-100%);
}
}
to {
transform: translateX(-100%);
}
}
@keyframes slide-in-vertical {
50% {
transform: translateY(0);
}
@keyframes slide-in-vertical {
50% {
transform: translateY(0);
to {
transform: translateY(-100%);
}
}
to {
transform: translateY(-100%);
}
}
@keyframes slide-in-vertical-reverse {
50% {
transform: translateY(0);
}
@keyframes slide-in-vertical-reverse {
50% {
transform: translateY(0);
to {
transform: translateY(100%);
}
}
to {
transform: translateY(100%);
}
}
@keyframes slide-in-out {
50% {
transform: scaleX(1);
transform-origin: left;
}
@keyframes slide-in-out {
50% {
transform: scaleX(1);
transform-origin: left;
50.1% {
transform-origin: right;
}
100% {
transform: scaleX(0);
transform-origin: right;
}
}
50.1% {
transform-origin: right;
@keyframes fill-text-white {
to {
color: white;
}
}
100% {
transform: scaleX(0);
transform-origin: right;
@keyframes scale-in {
to {
transform: scale(1);
}
}
}
@keyframes fill-text-white {
to {
color: white;
}
}
@keyframes scale-in {
to {
transform: scale(1);
}
}
</style>

66
src/components/VabQrCode/index.vue
View File

@ -5,40 +5,40 @@
</template>
<script>
import VueQArt from "vue-qart";
import qrImg from "@/assets/qr_logo/lqr_logo.png";
import VueQArt from "vue-qart";
import qrImg from "@/assets/qr_logo/lqr_logo.png";
export default {
name: "VabQrCode",
components: {
VueQArt,
},
props: {
imagePath: {
type: String,
default: qrImg,
export default {
name: "VabQrCode",
components: {
VueQArt,
},
url: {
type: String,
default: "http://www.boyunvision.com/",
},
size: {
type: Number,
default: 500,
},
},
data() {
return {
config: {
value: this.url,
imagePath: this.imagePath,
filter: "color",
size: this.size,
props: {
imagePath: {
type: String,
default: qrImg,
},
};
},
created() {},
mounted() {},
methods: {},
};
url: {
type: String,
default: "http://www.boyunvision.com/",
},
size: {
type: Number,
default: 500,
},
},
data() {
return {
config: {
value: this.url,
imagePath: this.imagePath,
filter: "color",
size: this.size,
},
};
},
created() {},
mounted() {},
methods: {},
};
</script>

115
src/components/VabSnow/index.vue
View File

@ -5,77 +5,78 @@
</template>
<script>
export default {
name: "VabSnow",
props: {
styleObj: {
type: Object,
default: () => {
return {};
export default {
name: "VabSnow",
props: {
styleObj: {
type: Object,
default: () => {
return {};
},
},
},
},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
filter: drop-shadow(0 0 10px white);
}
.content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
filter: drop-shadow(0 0 10px white);
}
@function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
@function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
@return $random_range;
}
@return $random_range;
}
.snow {
$total: 200;
.snow {
$total: 200;
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
@for $i from 1 through $total {
$random-x: random(1000000) * 0.0001vw;
$random-offset: random_range(-100000, 100000) * 0.0001vw;
$random-x-end: $random-x + $random-offset;
$random-x-end-yoyo: $random-x + ($random-offset / 2);
$random-yoyo-time: random_range(30000, 80000) / 100000;
$random-yoyo-y: $random-yoyo-time * 100vh;
$random-scale: random(10000) * 0.0001;
$fall-duration: random_range(10, 30) * 1s;
$fall-delay: random(30) * -1s;
@for $i from 1 through $total {
$random-x: random(1000000) * 0.0001vw;
$random-offset: random_range(-100000, 100000) * 0.0001vw;
$random-x-end: $random-x + $random-offset;
$random-x-end-yoyo: $random-x + ($random-offset / 2);
$random-yoyo-time: random_range(30000, 80000) / 100000;
$random-yoyo-y: $random-yoyo-time * 100vh;
$random-scale: random(10000) * 0.0001;
$fall-duration: random_range(10, 30) * 1s;
$fall-delay: random(30) * -1s;
&:nth-child(#{$i}) {
opacity: random(10000) * 0.0001;
transform: translate($random-x, -10px) scale($random-scale);
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
}
@keyframes fall-#{$i} {
#{percentage($random-yoyo-time)} {
transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
&:nth-child(#{$i}) {
opacity: random(10000) * 0.0001;
transform: translate($random-x, -10px) scale($random-scale);
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
}
to {
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
@keyframes fall-#{$i} {
#{percentage($random-yoyo-time)} {
transform: translate($random-x-end, $random-yoyo-y)
scale($random-scale);
}
to {
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
}
}
}
}
}
</style>

140
src/components/VabSticky/index.vue
View File

@ -16,80 +16,80 @@
</template>
<script>
export default {
name: "VabSticky",
props: {
stickyTop: {
type: Number,
default: 0,
export default {
name: "VabSticky",
props: {
stickyTop: {
type: Number,
default: 0,
},
zIndex: {
type: Number,
default: 1,
},
className: {
type: String,
default: "",
},
},
zIndex: {
type: Number,
default: 1,
data() {
return {
active: false,
position: "",
width: undefined,
height: undefined,
isSticky: false,
};
},
className: {
type: String,
default: "",
mounted() {
this.height = this.$el.getBoundingClientRect().height;
window.addEventListener("scroll", this.handleScroll);
window.addEventListener("resize", this.handleResize);
},
},
data() {
return {
active: false,
position: "",
width: undefined,
height: undefined,
isSticky: false,
};
},
mounted() {
this.height = this.$el.getBoundingClientRect().height;
window.addEventListener("scroll", this.handleScroll);
window.addEventListener("resize", this.handleResize);
},
activated() {
this.handleScroll();
},
destroyed() {
window.removeEventListener("scroll", this.handleScroll);
window.removeEventListener("resize", this.handleResize);
},
methods: {
sticky() {
if (this.active) {
return;
}
this.position = "fixed";
this.active = true;
this.width = this.width + "px";
this.isSticky = true;
activated() {
this.handleScroll();
},
handleReset() {
if (!this.active) {
return;
}
this.reset();
destroyed() {
window.removeEventListener("scroll", this.handleScroll);
window.removeEventListener("resize", this.handleResize);
},
reset() {
this.position = "";
this.width = "auto";
this.active = false;
this.isSticky = false;
methods: {
sticky() {
if (this.active) {
return;
}
this.position = "fixed";
this.active = true;
this.width = this.width + "px";
this.isSticky = true;
},
handleReset() {
if (!this.active) {
return;
}
this.reset();
},
reset() {
this.position = "";
this.width = "auto";
this.active = false;
this.isSticky = false;
},
handleScroll() {
const width = this.$el.getBoundingClientRect().width;
this.width = width || "auto";
const offsetTop = this.$el.getBoundingClientRect().top;
if (offsetTop < this.stickyTop) {
this.sticky();
return;
}
this.handleReset();
},
handleResize() {
if (this.isSticky) {
this.width = this.$el.getBoundingClientRect().width + "px";
}
},
},
handleScroll() {
const width = this.$el.getBoundingClientRect().width;
this.width = width || "auto";
const offsetTop = this.$el.getBoundingClientRect().top;
if (offsetTop < this.stickyTop) {
this.sticky();
return;
}
this.handleReset();
},
handleResize() {
if (this.isSticky) {
this.width = this.$el.getBoundingClientRect().width + "px";
}
},
},
};
};
</script>

332
src/components/VabUpload/index.vue
View File

@ -11,8 +11,7 @@
:closable="false"
:title="`支持jpg、jpeg、png格式，单次可最多选择${limit}张图片，每张不可大于${size}M，如果大于${size}M会自动为您过滤`"
type="info"
>
</el-alert>
></el-alert>
<br />
<el-upload
ref="upload"
@ -68,155 +67,66 @@
type="success"
:loading="loading"
@click="submitUpload"
>开始上传
>
开始上传
</el-button>
</div>
</el-dialog>
</template>
<script>
import { tokenName } from "@/config/settings";
import { tokenName } from "@/config/settings";
export default {
name: "VabUpload",
props: {
url: {
type: String,
default: "/upload",
required: true,
export default {
name: "VabUpload",
props: {
url: {
type: String,
default: "/upload",
required: true,
},
name: {
type: String,
default: "file",
required: true,
},
limit: {
type: Number,
default: 50,
required: true,
},
size: {
type: Number,
default: 1,
required: true,
},
},
name: {
type: String,
default: "file",
required: true,
data() {
return {
show: false,
loading: false,
dialogVisible: false,
dialogImageUrl: "",
action: "",
headers: {},
fileList: [],
picture: "picture",
imgNum: 0,
imgSuccessNum: 0,
imgErrorNum: 0,
typeList: null,
title: "上传",
dialogFormVisible: false,
data: {},
};
},
limit: {
type: Number,
default: 50,
required: true,
computed: {
percentage() {
if (this.allImgNum == 0) return 0;
return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100;
},
},
size: {
type: Number,
default: 1,
required: true,
},
},
data() {
return {
show: false,
loading: false,
dialogVisible: false,
dialogImageUrl: "",
action: "",
headers: {},
fileList: [],
picture: "picture",
imgNum: 0,
imgSuccessNum: 0,
imgErrorNum: 0,
typeList: null,
title: "上传",
dialogFormVisible: false,
data: {},
};
},
computed: {
percentage() {
if (this.allImgNum == 0) return 0;
return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100;
},
},
created() {
if ("development" === process.env.NODE_ENV) {
this.api = process.env.VUE_APP_BASE_API;
} else {
this.api = `${window.location.protocol}//${window.location.host}`;
}
this.action = this.api + this.url;
this.headers[tokenName] = this.$baseAccessToken();
},
methods: {
submitUpload() {
this.$refs.upload.submit();
},
handleProgress(event, file, fileList) {
this.loading = true;
this.show = true;
},
handleChange(file, fileList) {
if (file.size > 1048576 * this.size) {
fileList.map((item, index) => {
if (item === file) {
fileList.splice(index, 1);
}
});
this.fileList = fileList;
} else {
this.allImgNum = fileList.length;
}
},
handleSuccess(response, file, fileList) {
this.imgNum = this.imgNum + 1;
this.imgSuccessNum = this.imgSuccessNum + 1;
if (fileList.length === this.imgNum) {
setTimeout(() => {
this.$emit("fetchDatas");
this.$baseMessage(
`上传完成! 共上传${fileList.length}张图片`,
"success"
);
}, 1000);
}
setTimeout(() => {
this.loading = false;
this.show = false;
}, 1000);
},
handleError(err, file, fileList) {
this.imgNum = this.imgNum + 1;
this.imgErrorNum = this.imgErrorNum + 1;
this.$baseMessage(
`文件[${file.raw.name}]上传失败,文件大小为${this.$baseLodash.round(
file.raw.size / 1024,
0
)}KB`,
"error"
);
setTimeout(() => {
this.loading = false;
this.show = false;
}, 1000);
},
handleRemove(file, fileList) {
this.imgNum = this.imgNum - 1;
this.allNum = this.allNum - 1;
},
handlePreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleExceed(files, fileList) {
this.$baseMessage(
`当前限制选择 ${this.limit} 个文件，本次选择了
${files.length}
个文件`,
"error"
);
},
handleShow(data) {
this.title = "上传";
this.data = data;
this.dialogFormVisible = true;
},
handleClose() {
this.fileList = [];
this.picture = "picture";
this.allImgNum = 0;
this.imgNum = 0;
this.imgSuccessNum = 0;
this.imgErrorNum = 0;
created() {
if ("development" === process.env.NODE_ENV) {
this.api = process.env.VUE_APP_BASE_API;
} else {
@ -225,43 +135,133 @@ export default {
this.action = this.api + this.url;
this.headers[tokenName] = this.$baseAccessToken();
this.dialogFormVisible = false;
},
},
};
methods: {
submitUpload() {
this.$refs.upload.submit();
},
handleProgress(event, file, fileList) {
this.loading = true;
this.show = true;
},
handleChange(file, fileList) {
if (file.size > 1048576 * this.size) {
fileList.map((item, index) => {
if (item === file) {
fileList.splice(index, 1);
}
});
this.fileList = fileList;
} else {
this.allImgNum = fileList.length;
}
},
handleSuccess(response, file, fileList) {
this.imgNum = this.imgNum + 1;
this.imgSuccessNum = this.imgSuccessNum + 1;
if (fileList.length === this.imgNum) {
setTimeout(() => {
this.$emit("fetchDatas");
this.$baseMessage(
`上传完成! 共上传${fileList.length}张图片`,
"success"
);
}, 1000);
}
setTimeout(() => {
this.loading = false;
this.show = false;
}, 1000);
},
handleError(err, file, fileList) {
this.imgNum = this.imgNum + 1;
this.imgErrorNum = this.imgErrorNum + 1;
this.$baseMessage(
`文件[${file.raw.name}]上传失败,文件大小为${this.$baseLodash.round(
file.raw.size / 1024,
0
)}KB`,
"error"
);
setTimeout(() => {
this.loading = false;
this.show = false;
}, 1000);
},
handleRemove(file, fileList) {
this.imgNum = this.imgNum - 1;
this.allNum = this.allNum - 1;
},
handlePreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleExceed(files, fileList) {
this.$baseMessage(
`当前限制选择 ${this.limit} 个文件，本次选择了
${files.length}
个文件`,
"error"
);
},
handleShow(data) {
this.title = "上传";
this.data = data;
this.dialogFormVisible = true;
},
handleClose() {
this.fileList = [];
this.picture = "picture";
this.allImgNum = 0;
this.imgNum = 0;
this.imgSuccessNum = 0;
this.imgErrorNum = 0;
if ("development" === process.env.NODE_ENV) {
this.api = process.env.VUE_APP_BASE_API;
} else {
this.api = `${window.location.protocol}//${window.location.host}`;
}
this.action = this.api + this.url;
this.headers[tokenName] = this.$baseAccessToken();
this.dialogFormVisible = false;
},
},
};
</script>
<style lang="scss" scoped>
.upload {
height: 600px;
.upload {
height: 600px;
.upload-content {
.el-upload__tip {
display: block;
height: 30px;
line-height: 30px;
}
::v-deep {
.el-upload--picture-card {
width: 128px;
height: 128px;
margin: 3px 8px 8px 8px;
border: 2px dashed #c0ccda;
.upload-content {
.el-upload__tip {
display: block;
height: 30px;
line-height: 30px;
}
.el-upload-list--picture {
margin-bottom: 20px;
}
.el-upload-list--picture-card {
.el-upload-list__item {
::v-deep {
.el-upload--picture-card {
width: 128px;
height: 128px;
margin: 3px 8px 8px 8px;
border: 2px dashed #c0ccda;
}
.el-upload-list--picture {
margin-bottom: 20px;
}
.el-upload-list--picture-card {
.el-upload-list__item {
width: 128px;
height: 128px;
margin: 3px 8px 8px 8px;
}
}
}
}
}
}
</style>

60
src/layouts/components/Ad/index.vue
View File

@ -9,44 +9,44 @@
indicator-position="none"
>
<el-carousel-item v-for="(item, index) in adList" :key="index">
<el-tag type="warning"> Ad</el-tag>
<a target="_blank" :href="item.url"> {{ item.title }}</a>
<el-tag type="warning">Ad</el-tag>
<a target="_blank" :href="item.url">{{ item.title }}</a>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
import { getList } from "@/api/ad";
export default {
data() {
return {
nodeEnv: process.env.NODE_ENV,
adList: [],
};
},
created() {
this.fetchData();
},
methods: {
async fetchData() {
const { data } = await getList();
this.adList = data;
import { getList } from "@/api/ad";
export default {
data() {
return {
nodeEnv: process.env.NODE_ENV,
adList: [],
};
},
},
};
created() {
this.fetchData();
},
methods: {
async fetchData() {
const { data } = await getList();
this.adList = data;
},
},
};
</script>
<style lang="scss" scoped>
.vab-ad {
height: 30px;
padding-right: $base-padding;
padding-left: $base-padding;
line-height: 30px;
cursor: pointer;
background: #eef1f6;
box-shadow: 0 -1px 2px rgba(0, 21, 41, 0.08) inset;
.vab-ad {
height: 30px;
padding-right: $base-padding;
padding-left: $base-padding;
line-height: 30px;
cursor: pointer;
background: #eef1f6;
box-shadow: 0 -1px 2px rgba(0, 21, 41, 0.08) inset;
a {
color: #999;
a {
color: #999;
}
}
}
</style>

427
src/layouts/index.vue
View File

@ -52,261 +52,262 @@
</template>
<script>
import { Ad, AppMain, NavBar, SideBar, TagsBar, TopBar } from "./components";
import { mapActions, mapGetters } from "vuex";
import { tokenName } from "@/config/settings";
export default {
name: "Layout",
components: {
Ad,
TopBar,
NavBar,
SideBar,
AppMain,
TagsBar,
},
data() {
return { oldLayout: "" };
},
computed: {
...mapGetters({
layout: "settings/layout",
tagsBar: "settings/tagsBar",
collapse: "settings/collapse",
header: "settings/header",
device: "settings/device",
}),
classObj() {
return {
mobile: this.device === "mobile",
};
import { Ad, AppMain, NavBar, SideBar, TagsBar, TopBar } from "./components";
import { mapActions, mapGetters } from "vuex";
import { tokenName } from "@/config/settings";
export default {
name: "Layout",
components: {
Ad,
TopBar,
NavBar,
SideBar,
AppMain,
TagsBar,
},
},
beforeMount() {
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
mounted() {
this.oldLayout = this.layout;
const userAgent = navigator.userAgent;
if (userAgent.includes("Juejin")) {
this.$baseAlert(
"vue-admin-beautiful不支持在掘金内置浏览器演示，请手动复制以下地址到浏览器中查看http://mpfhrd48.sanxing.uz7.cn/vue-admin-beautiful"
);
}
const isMobile = this.handleIsMobile();
if (isMobile) {
if (isMobile) {
//横向布局时如果是手机端访问那么改成纵向版
this.$store.dispatch("settings/changeLayout", "vertical");
} else {
this.$store.dispatch("settings/changeLayout", this.oldLayout);
data() {
return { oldLayout: "" };
},
computed: {
...mapGetters({
layout: "settings/layout",
tagsBar: "settings/tagsBar",
collapse: "settings/collapse",
header: "settings/header",
device: "settings/device",
}),
classObj() {
return {
mobile: this.device === "mobile",
};
},
},
beforeMount() {
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
mounted() {
this.oldLayout = this.layout;
const userAgent = navigator.userAgent;
if (userAgent.includes("Juejin")) {
this.$baseAlert(
"vue-admin-beautiful不支持在掘金内置浏览器演示，请手动复制以下地址到浏览器中查看http://mpfhrd48.sanxing.uz7.cn/vue-admin-beautiful"
);
}
this.$store.dispatch("settings/toggleDevice", "mobile");
setTimeout(() => {
this.$store.dispatch("settings/foldSideBar");
}, 2000);
} else {
this.$store.dispatch("settings/openSideBar");
}
this.$nextTick(() => {
window.addEventListener(
"storage",
(e) => {
if (e.key === tokenName || e.key === null) window.location.reload();
if (e.key === tokenName && e.value === null) window.location.reload();
},
false
);
});
},
methods: {
...mapActions({
handleFoldSideBar: "settings/foldSideBar",
}),
handleIsMobile() {
return document.body.getBoundingClientRect().width - 1 < 992;
},
handleResize() {
if (!document.hidden) {
const isMobile = this.handleIsMobile();
const isMobile = this.handleIsMobile();
if (isMobile) {
if (isMobile) {
//横向布局时如果是手机端访问那么改成纵向版
this.$store.dispatch("settings/changeLayout", "vertical");
} else {
this.$store.dispatch("settings/changeLayout", this.oldLayout);
}
this.$store.dispatch(
"settings/toggleDevice",
isMobile ? "mobile" : "desktop"
);
this.$store.dispatch("settings/toggleDevice", "mobile");
setTimeout(() => {
this.$store.dispatch("settings/foldSideBar");
}, 2000);
} else {
this.$store.dispatch("settings/openSideBar");
}
this.$nextTick(() => {
window.addEventListener(
"storage",
(e) => {
if (e.key === tokenName || e.key === null) window.location.reload();
if (e.key === tokenName && e.value === null)
window.location.reload();
},
false
);
});
},
},
};
methods: {
...mapActions({
handleFoldSideBar: "settings/foldSideBar",
}),
handleIsMobile() {
return document.body.getBoundingClientRect().width - 1 < 992;
},
handleResize() {
if (!document.hidden) {
const isMobile = this.handleIsMobile();
if (isMobile) {
//横向布局时如果是手机端访问那么改成纵向版
this.$store.dispatch("settings/changeLayout", "vertical");
} else {
this.$store.dispatch("settings/changeLayout", this.oldLayout);
}
this.$store.dispatch(
"settings/toggleDevice",
isMobile ? "mobile" : "desktop"
);
}
},
},
};
</script>
<style lang="scss" scoped>
@mixin fix-header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $base-z-index - 2;
width: 100%;
overflow: hidden;
}
.vue-admin-beautiful-wrapper {
position: relative;
width: 100%;
height: 100%;
.layout-container-horizontal {
position: relative;
&.fixed {
padding-top: calc(#{$base-top-bar-height} + #{$base-tags-bar-height});
}
&.fixed.no-tags-bar {
padding-top: $base-top-bar-height;
}
::v-deep {
.vab-main {
width: 88%;
margin: auto;
}
.fixed-header {
@include fix-header;
}
.tag-view-show {
background: $base-color-white;
box-shadow: $base-box-shadow;
}
.nav-bar-container {
.fold-unfold {
display: none;
}
}
.main-padding {
.app-main-container {
margin-top: $base-padding;
margin-bottom: $base-padding;
background: $base-color-white;
}
}
}
@mixin fix-header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $base-z-index - 2;
width: 100%;
overflow: hidden;
}
.layout-container-vertical {
.vue-admin-beautiful-wrapper {
position: relative;
width: 100%;
height: 100%;
.mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $base-z-index - 1;
width: 100%;
height: 100vh;
overflow: hidden;
background: #000;
opacity: 0.5;
}
&.fixed {
padding-top: calc(#{$base-nav-bar-height} + #{$base-tags-bar-height});
}
&.fixed.no-tags-bar {
padding-top: $base-nav-bar-height;
}
.vab-main {
.layout-container-horizontal {
position: relative;
min-height: 100%;
margin-left: $base-left-menu-width;
background: #f6f8f9;
transition: $base-transition;
&.fixed {
padding-top: calc(#{$base-top-bar-height} + #{$base-tags-bar-height});
}
&.fixed.no-tags-bar {
padding-top: $base-top-bar-height;
}
::v-deep {
.vab-main {
width: 88%;
margin: auto;
}
.fixed-header {
@include fix-header;
}
left: $base-left-menu-width;
width: $base-right-content-width;
.tag-view-show {
background: $base-color-white;
box-shadow: $base-box-shadow;
transition: $base-transition;
}
.nav-bar-container {
position: relative;
box-sizing: border-box;
.fold-unfold {
display: none;
}
}
.tags-bar-container {
box-sizing: border-box;
}
.app-main-container {
width: calc(100% - #{$base-padding} - #{$base-padding});
margin: $base-padding auto;
background: $base-color-white;
border-radius: $base-border-radius;
}
}
&.is-collapse-main {
margin-left: $base-left-menu-width-min;
::v-deep {
.fixed-header {
left: $base-left-menu-width-min;
width: calc(100% - 65px);
.main-padding {
.app-main-container {
margin-top: $base-padding;
margin-bottom: $base-padding;
background: $base-color-white;
}
}
}
}
}
/* 手机端开始 */
&.mobile {
::v-deep {
.el-pager,
.el-pagination__jump {
display: none;
.layout-container-vertical {
position: relative;
.mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $base-z-index - 1;
width: 100%;
height: 100vh;
overflow: hidden;
background: #000;
opacity: 0.5;
}
.layout-container-vertical {
.el-scrollbar.side-bar-container.is-collapse {
width: 0;
}
&.fixed {
padding-top: calc(#{$base-nav-bar-height} + #{$base-tags-bar-height});
}
.vab-main {
width: 100%;
margin-left: 0;
}
&.fixed.no-tags-bar {
padding-top: $base-nav-bar-height;
}
.vab-main {
.fixed-header {
left: 0 !important;
width: 100% !important;
position: relative;
min-height: 100%;
margin-left: $base-left-menu-width;
background: #f6f8f9;
transition: $base-transition;
::v-deep {
.fixed-header {
@include fix-header;
left: $base-left-menu-width;
width: $base-right-content-width;
box-shadow: $base-box-shadow;
transition: $base-transition;
}
.nav-bar-container {
position: relative;
box-sizing: border-box;
}
.tags-bar-container {
box-sizing: border-box;
}
.app-main-container {
width: calc(100% - #{$base-padding} - #{$base-padding});
margin: $base-padding auto;
background: $base-color-white;
border-radius: $base-border-radius;
}
}
&.is-collapse-main {
margin-left: $base-left-menu-width-min;
::v-deep {
.fixed-header {
left: $base-left-menu-width-min;
width: calc(100% - 65px);
}
}
}
}
}
}
/* 手机端结束 */
}
/* 手机端开始 */
&.mobile {
::v-deep {
.el-pager,
.el-pagination__jump {
display: none;
}
.layout-container-vertical {
.el-scrollbar.side-bar-container.is-collapse {
width: 0;
}
.vab-main {
width: 100%;
margin-left: 0;
}
}
.vab-main {
.fixed-header {
left: 0 !important;
width: 100% !important;
}
}
}
}
/* 手机端结束 */
}
</style>

2
src/utils/request.js
View File

@ -36,7 +36,7 @@ service.interceptors.request.use(
}
if (process.env.NODE_ENV !== "preview") {
if (contentType === "application/x-www-form-urlencoded;charset=UTF-8") {
if (config.data && !config.data.param) {
if (config.data) {
config.data = qs.stringify(config.data);
}
}

432
src/views/401.vue
View File

@ -43,254 +43,254 @@
</template>
<script>
export default {
name: "Page401",
data() {
return {
jumpTime: 5,
oops: "抱歉!",
headline: "您没有操作权限...",
info: "当前帐号没有操作权限,请联系管理员。",
btn: "返回",
timer: 0,
};
},
mounted() {
this.timeChange();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
timeChange() {
this.timer = setInterval(() => {
if (this.jumpTime) {
this.jumpTime--;
} else {
this.$router.push({ path: "/" });
this.$store.dispatch("tagsBar/delOthersRoutes", {
path: "/",
});
clearInterval(this.timer);
}
}, 1000);
export default {
name: "Page401",
data() {
return {
jumpTime: 5,
oops: "抱歉!",
headline: "您没有操作权限...",
info: "当前帐号没有操作权限,请联系管理员。",
btn: "返回",
timer: 0,
};
},
},
};
mounted() {
this.timeChange();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
timeChange() {
this.timer = setInterval(() => {
if (this.jumpTime) {
this.jumpTime--;
} else {
this.$router.push({ path: "/" });
this.$store.dispatch("tagsBar/delOthersRoutes", {
path: "/",
});
clearInterval(this.timer);
}
}, 1000);
},
},
};
</script>
<style lang="scss" scoped>
.error-container {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.error-container {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.error-content {
.pic-error {
position: relative;
float: left;
width: 120%;
overflow: hidden;
.error-content {
.pic-error {
position: relative;
float: left;
width: 120%;
overflow: hidden;
&-parent {
width: 100%;
}
&-child {
position: absolute;
&.left {
top: 17px;
left: 220px;
width: 80px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
&-parent {
width: 100%;
}
&.mid {
top: 10px;
left: 420px;
width: 46px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1.2s;
animation-fill-mode: forwards;
}
&-child {
position: absolute;
&.right {
top: 100px;
left: 500px;
width: 62px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes cloudLeft {
0% {
&.left {
top: 17px;
left: 220px;
width: 80px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
&.mid {
top: 10px;
left: 420px;
width: 46px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1.2s;
animation-fill-mode: forwards;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
&.right {
top: 100px;
left: 500px;
width: 62px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
80% {
top: 180px;
left: 340px;
opacity: 1;
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;
&-oops {
margin-bottom: 20px;
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: $base-color-blue;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&-headline {
margin-bottom: 10px;
font-size: 20px;
font-weight: bold;
line-height: 24px;
color: #222;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&-info {
margin-bottom: 30px;
font-size: 13px;
line-height: 21px;
color: $base-color-gray;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&-return-home {
display: block;
float: left;
width: 110px;
height: 36px;
font-size: 14px;
line-height: 36px;
color: #fff;
text-align: center;
cursor: pointer;
background: $base-color-blue;
border-radius: 100px;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(60px);
}
100% {
top: 200px;
left: 300px;
opacity: 0;
opacity: 1;
transform: translateY(0);
}
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;
&-oops {
margin-bottom: 20px;
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: $base-color-blue;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&-headline {
margin-bottom: 10px;
font-size: 20px;
font-weight: bold;
line-height: 24px;
color: #222;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&-info {
margin-bottom: 30px;
font-size: 13px;
line-height: 21px;
color: $base-color-gray;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&-return-home {
display: block;
float: left;
width: 110px;
height: 36px;
font-size: 14px;
line-height: 36px;
color: #fff;
text-align: center;
cursor: pointer;
background: $base-color-blue;
border-radius: 100px;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(60px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
}
}
}
</style>

432
src/views/404.vue
View File

@ -43,254 +43,254 @@
</template>
<script>
export default {
name: "Page404",
data() {
return {
jumpTime: 5,
oops: "抱歉!",
headline: "当前页面不存在...",
info: "请检查您输入的网址是否正确，或点击下面的按钮返回首页。",
btn: "返回首页",
timer: 0,
};
},
mounted() {
this.timeChange();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
timeChange() {
this.timer = setInterval(() => {
if (this.jumpTime) {
this.jumpTime--;
} else {
this.$router.push({ path: "/" });
this.$store.dispatch("tagsBar/delOthersRoutes", {
path: "/",
});
clearInterval(this.timer);
}
}, 1000);
export default {
name: "Page404",
data() {
return {
jumpTime: 5,
oops: "抱歉!",
headline: "当前页面不存在...",
info: "请检查您输入的网址是否正确，或点击下面的按钮返回首页。",
btn: "返回首页",
timer: 0,
};
},
},
};
mounted() {
this.timeChange();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
timeChange() {
this.timer = setInterval(() => {
if (this.jumpTime) {
this.jumpTime--;
} else {
this.$router.push({ path: "/" });
this.$store.dispatch("tagsBar/delOthersRoutes", {
path: "/",
});
clearInterval(this.timer);
}
}, 1000);
},
},
};
</script>
<style lang="scss" scoped>
.error-container {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.error-container {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.error-content {
.pic-error {
position: relative;
float: left;
width: 120%;
overflow: hidden;
.error-content {
.pic-error {
position: relative;
float: left;
width: 120%;
overflow: hidden;
&-parent {
width: 100%;
}
&-child {
position: absolute;
&.left {
top: 17px;
left: 220px;
width: 80px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
&-parent {
width: 100%;
}
&.mid {
top: 10px;
left: 420px;
width: 46px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1.2s;
animation-fill-mode: forwards;
}
&-child {
position: absolute;
&.right {
top: 100px;
left: 500px;
width: 62px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes cloudLeft {
0% {
&.left {
top: 17px;
left: 220px;
width: 80px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
&.mid {
top: 10px;
left: 420px;
width: 46px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1.2s;
animation-fill-mode: forwards;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
&.right {
top: 100px;
left: 500px;
width: 62px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
80% {
top: 180px;
left: 340px;
opacity: 1;
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;
&-oops {
margin-bottom: 20px;
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: $base-color-blue;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&-headline {
margin-bottom: 10px;
font-size: 20px;
font-weight: bold;
line-height: 24px;
color: #222;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&-info {
margin-bottom: 30px;
font-size: 13px;
line-height: 21px;
color: $base-color-gray;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&-return-home {
display: block;
float: left;
width: 110px;
height: 36px;
font-size: 14px;
line-height: 36px;
color: #fff;
text-align: center;
cursor: pointer;
background: $base-color-blue;
border-radius: 100px;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(60px);
}
100% {
top: 200px;
left: 300px;
opacity: 0;
opacity: 1;
transform: translateY(0);
}
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;
&-oops {
margin-bottom: 20px;
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: $base-color-blue;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&-headline {
margin-bottom: 10px;
font-size: 20px;
font-weight: bold;
line-height: 24px;
color: #222;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&-info {
margin-bottom: 30px;
font-size: 13px;
line-height: 21px;
color: $base-color-gray;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&-return-home {
display: block;
float: left;
width: 110px;
height: 36px;
font-size: 14px;
line-height: 36px;
color: #fff;
text-align: center;
cursor: pointer;
background: $base-color-blue;
border-radius: 100px;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(60px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
}
}
}
</style>

1019
src/views/index/index.vue
View File

File diff suppressed because it is too large Load Diff

446
src/views/login/index.vue
View File

@ -6,8 +6,7 @@
type="success"
:closable="false"
style="position: fixed;"
>
</el-alert>
></el-alert>
<el-row>
<el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
<div style="color: transparent;">占位符</div>
@ -65,7 +64,8 @@
class="login-btn"
type="primary"
@click="handleLogin"
>登录
>
登录
</el-button>
<router-link to="/register">
<div style="margin-top: 20px;">注册</div>
@ -77,246 +77,246 @@
</template>
<script>
import { isPassword } from "@/utils/validate";
import { isPassword } from "@/utils/validate";
export default {
name: "Login",
directives: {
focus: {
inserted(el) {
el.querySelector("input").focus();
export default {
name: "Login",
directives: {
focus: {
inserted(el) {
el.querySelector("input").focus();
},
},
},
},
data() {
const validateusername = (rule, value, callback) => {
if ("" == value) {
callback(new Error("用户名不能为空"));
} else {
callback();
}
};
const validatePassword = (rule, value, callback) => {
if (!isPassword(value)) {
callback(new Error("密码不能少于6位"));
} else {
callback();
}
};
return {
nodeEnv: process.env.NODE_ENV,
title: this.$baseTitle,
form: {
username: "",
password: "",
},
rules: {
username: [
{
required: true,
trigger: "blur",
validator: validateusername,
},
],
password: [
{
required: true,
trigger: "blur",
validator: validatePassword,
},
],
},
loading: false,
passwordType: "password",
redirect: undefined,
};
},
watch: {
$route: {
handler(route) {
this.redirect = (route.query && route.query.redirect) || "/";
},
immediate: true,
},
},
mounted() {
if ("production" !== process.env.NODE_ENV) {
this.form.username = "admin";
this.form.password = "123456";
}
},
methods: {
handlePassword() {
this.passwordType === "password"
? (this.passwordType = "")
: (this.passwordType = "password");
this.$nextTick(() => {
this.$refs.password.focus();
});
},
handleLogin() {
this.$refs.form.validate(async (valid) => {
if (valid) {
this.loading = true;
await this.$store.dispatch("user/login", this.form).catch(() => {
this.loading = false;
});
const routerPath =
this.redirect === "/404" || this.redirect === "/401"
? "/"
: this.redirect;
await this.$router.push(routerPath).catch(() => {});
this.loading = false;
data() {
const validateusername = (rule, value, callback) => {
if ("" == value) {
callback(new Error("用户名不能为空"));
} else {
return false;
callback();
}
});
setTimeout(() => {
window.open("https://github.com/chuzhixin/vue-admin-beautiful");
}, 30000);
};
const validatePassword = (rule, value, callback) => {
if (!isPassword(value)) {
callback(new Error("密码不能少于6位"));
} else {
callback();
}
};
return {
nodeEnv: process.env.NODE_ENV,
title: this.$baseTitle,
form: {
username: "",
password: "",
},
rules: {
username: [
{
required: true,
trigger: "blur",
validator: validateusername,
},
],
password: [
{
required: true,
trigger: "blur",
validator: validatePassword,
},
],
},
loading: false,
passwordType: "password",
redirect: undefined,
};
},
},
};
watch: {
$route: {
handler(route) {
this.redirect = (route.query && route.query.redirect) || "/";
},
immediate: true,
},
},
mounted() {
if ("production" !== process.env.NODE_ENV) {
this.form.username = "admin";
this.form.password = "123456";
}
},
methods: {
handlePassword() {
this.passwordType === "password"
? (this.passwordType = "")
: (this.passwordType = "password");
this.$nextTick(() => {
this.$refs.password.focus();
});
},
handleLogin() {
this.$refs.form.validate(async (valid) => {
if (valid) {
this.loading = true;
await this.$store.dispatch("user/login", this.form).catch(() => {
this.loading = false;
});
const routerPath =
this.redirect === "/404" || this.redirect === "/401"
? "/"
: this.redirect;
await this.$router.push(routerPath).catch(() => {});
this.loading = false;
} else {
return false;
}
});
setTimeout(() => {
window.open("https://github.com/chuzhixin/vue-admin-beautiful");
}, 30000);
},
},
};
</script>
<style lang="scss" scoped>
.login-container {
height: 100vh;
background: url("~@/assets/login_images/background.jpg") center center fixed
no-repeat;
background-size: cover;
.title {
font-size: 54px;
font-weight: 500;
color: rgba(14, 18, 26, 1);
}
.title-tips {
margin-top: 29px;
font-size: 26px;
font-weight: 400;
color: rgba(14, 18, 26, 1);
text-overflow: ellipsis;
white-space: nowrap;
}
.login-btn {
display: inherit;
width: 220px;
height: 60px;
margin-top: 5px;
border: 0;
&:hover {
opacity: 0.9;
}
}
.login-form {
position: relative;
max-width: 100%;
margin: calc((100vh - 425px) / 2) 10% 10%;
overflow: hidden;
.forget-password {
width: 100%;
margin-top: 40px;
text-align: left;
.forget-pass {
width: 129px;
height: 19px;
font-size: 20px;
font-weight: 400;
color: rgba(92, 102, 240, 1);
}
}
}
.tips {
margin-bottom: 10px;
font-size: $base-font-size-default;
color: $base-color-white;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.title-container {
position: relative;
.login-container {
height: 100vh;
background: url("~@/assets/login_images/background.jpg") center center fixed
no-repeat;
background-size: cover;
.title {
margin: 0 auto 40px auto;
font-size: 34px;
font-weight: bold;
color: $base-color-blue;
text-align: center;
font-size: 54px;
font-weight: 500;
color: rgba(14, 18, 26, 1);
}
}
.svg-container {
position: absolute;
top: 14px;
left: 15px;
z-index: $base-z-index;
font-size: 16px;
color: #d7dee3;
cursor: pointer;
user-select: none;
}
.title-tips {
margin-top: 29px;
font-size: 26px;
font-weight: 400;
color: rgba(14, 18, 26, 1);
text-overflow: ellipsis;
white-space: nowrap;
}
.show-password {
position: absolute;
top: 14px;
right: 25px;
font-size: 16px;
color: #d7dee3;
cursor: pointer;
user-select: none;
}
.login-btn {
display: inherit;
width: 220px;
height: 60px;
margin-top: 5px;
border: 0;
::v-deep {
.el-form-item {
padding-right: 0;
margin: 20px 0;
color: #454545;
background: transparent;
border: 1px solid transparent;
border-radius: 2px;
&__content {
min-height: $base-input-height;
line-height: $base-input-height;
}
&__error {
position: absolute;
top: 100%;
left: 18px;
font-size: $base-font-size-small;
line-height: 18px;
color: $base-color-red;
&:hover {
opacity: 0.9;
}
}
.el-input {
box-sizing: border-box;
.login-form {
position: relative;
max-width: 100%;
margin: calc((100vh - 425px) / 2) 10% 10%;
overflow: hidden;
input {
height: 58px;
padding-left: 45px;
font-size: $base-font-size-default;
line-height: 58px;
color: $base-font-color;
background: #f6f4fc;
border: 0;
caret-color: $base-font-color;
.forget-password {
width: 100%;
margin-top: 40px;
text-align: left;
.forget-pass {
width: 129px;
height: 19px;
font-size: 20px;
font-weight: 400;
color: rgba(92, 102, 240, 1);
}
}
}
.tips {
margin-bottom: 10px;
font-size: $base-font-size-default;
color: $base-color-white;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.title-container {
position: relative;
.title {
margin: 0 auto 40px auto;
font-size: 34px;
font-weight: bold;
color: $base-color-blue;
text-align: center;
}
}
.svg-container {
position: absolute;
top: 14px;
left: 15px;
z-index: $base-z-index;
font-size: 16px;
color: #d7dee3;
cursor: pointer;
user-select: none;
}
.show-password {
position: absolute;
top: 14px;
right: 25px;
font-size: 16px;
color: #d7dee3;
cursor: pointer;
user-select: none;
}
::v-deep {
.el-form-item {
padding-right: 0;
margin: 20px 0;
color: #454545;
background: transparent;
border: 1px solid transparent;
border-radius: 2px;
&__content {
min-height: $base-input-height;
line-height: $base-input-height;
}
&__error {
position: absolute;
top: 100%;
left: 18px;
font-size: $base-font-size-small;
line-height: 18px;
color: $base-color-red;
}
}
.el-input {
box-sizing: border-box;
input {
height: 58px;
padding-left: 45px;
font-size: $base-font-size-default;
line-height: 58px;
color: $base-font-color;
background: #f6f4fc;
border: 0;
caret-color: $base-font-color;
}
}
}
}
}
</style>

16
src/views/mall/goodsDetail/index.vue
View File

@ -3,12 +3,12 @@
</template>
<script>
export default {
name: "GoodsDetail",
data() {
return {};
},
created() {},
methods: {},
};
export default {
name: "GoodsDetail",
data() {
return {};
},
created() {},
methods: {},
};
</script>

167
src/views/mall/goodsList/index.vue
View File

@ -17,7 +17,8 @@
type="primary"
native-type="submit"
@click="handleQuery"
>查询
>
查询
</el-button>
</el-form-item>
</el-form>
@ -64,99 +65,99 @@
</template>
<script>
import { getList } from "@/api/goodsList";
import { getList } from "@/api/goodsList";
export default {
name: "Goods",
components: {},
data() {
return {
queryForm: {
pageNo: 1,
pageSize: 20,
title: "",
export default {
name: "Goods",
components: {},
data() {
return {
queryForm: {
pageNo: 1,
pageSize: 20,
title: "",
},
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
elementLoadingText: "正在加载...",
};
},
created() {
this.fetchData();
},
methods: {
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
handleQuery() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
},
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
elementLoadingText: "正在加载...",
};
},
created() {
this.fetchData();
},
methods: {
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
handleQuery() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
},
},
};
};
</script>
<style lang="scss" scoped>
.goods-list-container {
.goods-list-card-body {
position: relative;
text-align: center;
cursor: pointer;
.goods-list-container {
.goods-list-card-body {
position: relative;
text-align: center;
cursor: pointer;
.goods-list-tag-group {
position: absolute;
top: 10px;
right: 5px;
z-index: 9;
}
.goods-list-tag-group {
position: absolute;
top: 10px;
right: 5px;
z-index: 9;
}
.goods-list-image-group {
height: 400px;
overflow: hidden;
.goods-list-image {
width: 100%;
.goods-list-image-group {
height: 400px;
transition: all ease-in-out 0.3s;
overflow: hidden;
&:hover {
transform: scale(1.1);
.goods-list-image {
width: 100%;
height: 400px;
transition: all ease-in-out 0.3s;
&:hover {
transform: scale(1.1);
}
}
}
.goods-list-title {
margin: 8px 0;
font-size: 16px;
font-weight: bold;
}
.goods-list-description {
font-size: 14px;
color: #808695;
}
.goods-list-price {
margin: 8px 0;
font-size: 14px;
color: $base-color-orange;
s {
color: #c5c8ce;
}
}
}
.goods-list-title {
margin: 8px 0;
font-size: 16px;
font-weight: bold;
}
.goods-list-description {
font-size: 14px;
color: #808695;
}
.goods-list-price {
margin: 8px 0;
font-size: 14px;
color: $base-color-orange;
s {
color: #c5c8ce;
}
}
}
}
</style>

82
src/views/mall/pay/components/Step1.vue
View File

@ -25,48 +25,48 @@
</div>
</template>
<script>
export default {
data() {
return {
form: {
payAccount: "XXXXXXXXXXXXXXXX",
gatheringAccount: "1204505056@qq.com",
gatheringName: "chuzhixin",
price: "100",
},
rules: {
payAccount: [
{ required: true, message: "请选择付款账户", trigger: "blur" },
],
gatheringAccount: [
{ required: true, message: "请输入收款账户", trigger: "blur" },
{ type: "email", message: "账户名应为邮箱格式", trigger: "blur" },
],
gatheringName: [
{ required: true, message: "请输入收款人姓名", trigger: "blur" },
],
price: [
{ required: true, message: "请输入转账金额", trigger: "blur" },
{ pattern: /^(\d+)((?:\.\d+)?)$/, message: "请输入合法金额数字" },
],
},
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$emit("change-step", 2, this.form);
}
});
export default {
data() {
return {
form: {
payAccount: "XXXXXXXXXXXXXXXX",
gatheringAccount: "1204505056@qq.com",
gatheringName: "chuzhixin",
price: "100",
},
rules: {
payAccount: [
{ required: true, message: "请选择付款账户", trigger: "blur" },
],
gatheringAccount: [
{ required: true, message: "请输入收款账户", trigger: "blur" },
{ type: "email", message: "账户名应为邮箱格式", trigger: "blur" },
],
gatheringName: [
{ required: true, message: "请输入收款人姓名", trigger: "blur" },
],
price: [
{ required: true, message: "请输入转账金额", trigger: "blur" },
{ pattern: /^(\d+)((?:\.\d+)?)$/, message: "请输入合法金额数字" },
],
},
};
},
},
};
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$emit("change-step", 2, this.form);
}
});
},
},
};
</script>
<style lang="scss" scoped>
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
</style>

90
src/views/mall/pay/components/Step2.vue
View File

@ -25,60 +25,60 @@
</el-form-item>
</el-form>
<div class="pay-button-group">
<el-button type="primary" :loading="loading" @click="handleSubmit"
>提交</el-button
>
<el-button type="primary" :loading="loading" @click="handleSubmit">
提交
</el-button>
<el-button @click="handlePrev">上一步</el-button>
</div>
</div>
</template>
<script>
export default {
props: {
infoData: {
type: Object,
default: () => {
return {};
export default {
props: {
infoData: {
type: Object,
default: () => {
return {};
},
},
},
},
data() {
return {
form: {
password: "123456",
},
rules: {
password: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
},
loading: false,
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
setTimeout(() => {
this.$emit("change-step", 3);
data() {
return {
form: {
password: "123456",
},
rules: {
password: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
},
loading: false,
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
setTimeout(() => {
this.$emit("change-step", 3);
this.loading = false;
}, 2000);
} else {
this.loading = false;
}, 2000);
} else {
this.loading = false;
}
});
}
});
},
handlePrev() {
this.$emit("change-step", 1);
},
},
handlePrev() {
this.$emit("change-step", 1);
},
},
};
};
</script>
<style lang="scss" scoped>
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
</style>

112
src/views/mall/pay/components/Step3.vue
View File

@ -32,70 +32,70 @@
</div>
</template>
<script>
export default {
props: {
infoData: {
type: Object,
default: () => {
return {};
export default {
props: {
infoData: {
type: Object,
default: () => {
return {};
},
},
},
},
data() {
return {
form: {
password: "123456",
},
rules: {
password: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
},
loading: false,
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
setTimeout(() => {
this.$emit("change-step", 3);
data() {
return {
form: {
password: "123456",
},
rules: {
password: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
},
loading: false,
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
setTimeout(() => {
this.$emit("change-step", 3);
this.loading = false;
}, 2000);
} else {
this.loading = false;
}, 2000);
} else {
this.loading = false;
}
});
}
});
},
handlePrev() {
this.$emit("change-step", 1);
},
},
handlePrev() {
this.$emit("change-step", 1);
},
},
};
};
</script>
<style lang="scss" scoped>
.pay-top-content {
text-align: center;
.pay-top-content {
text-align: center;
.pay-success {
display: block;
margin: 20px auto 5px auto;
font-size: 40px;
color: $base-color-green;
.pay-success {
display: block;
margin: 20px auto 5px auto;
font-size: 40px;
color: $base-color-green;
}
}
}
.pay-bottom {
padding: 20px;
margin-top: 20px;
background: #f5f7f8;
border: 1px dashed $base-color-gray;
}
.pay-bottom {
padding: 20px;
margin-top: 20px;
background: #f5f7f8;
border: 1px dashed $base-color-gray;
}
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
</style>

46
src/views/mall/pay/index.vue
View File

@ -30,31 +30,31 @@
</template>
<script>
import Step1 from "./components/Step1";
import Step2 from "./components/Step2";
import Step3 from "./components/Step3";
export default {
name: "Pay",
components: { Step1, Step2, Step3 },
data() {
return {
active: 1,
form: {},
};
},
methods: {
handleSetStep(active, form) {
this.active = active;
if (form) this.form = Object.assign(this.form, form);
import Step1 from "./components/Step1";
import Step2 from "./components/Step2";
import Step3 from "./components/Step3";
export default {
name: "Pay",
components: { Step1, Step2, Step3 },
data() {
return {
active: 1,
form: {},
};
},
},
};
methods: {
handleSetStep(active, form) {
this.active = active;
if (form) this.form = Object.assign(this.form, form);
},
},
};
</script>
<style lang="scss" scoped>
.pay-container {
.steps {
justify-content: center;
margin-bottom: 20px;
.pay-container {
.steps {
justify-content: center;
margin-bottom: 20px;
}
}
}
</style>

20
src/views/personalCenter/index.vue
View File

@ -10,14 +10,14 @@
</template>
<script>
export default {
name: "PersonalCenter",
data() {
return {
tabPosition: "left",
};
},
created() {},
methods: {},
};
export default {
name: "PersonalCenter",
data() {
return {
tabPosition: "left",
};
},
created() {},
methods: {},
};
</script>

80
src/views/personnelManagement/menuManagement/components/MenuManagementEdit.vue
View File

@ -17,55 +17,55 @@
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消 </el-button>
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import { doEdit } from "@/api/menuManagement";
import { doEdit } from "@/api/menuManagement";
export default {
name: "MenuManagementEdit",
data() {
return {
form: {},
rules: {
id: [{ required: true, trigger: "blur", message: "请输入路径" }],
},
title: "",
dialogFormVisible: false,
};
},
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
this.title = "编辑";
this.form = Object.assign({}, row);
}
this.dialogFormVisible = true;
export default {
name: "MenuManagementEdit",
data() {
return {
form: {},
rules: {
id: [{ required: true, trigger: "blur", message: "请输入路径" }],
},
title: "",
dialogFormVisible: false,
};
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
return false;
this.title = "编辑";
this.form = Object.assign({}, row);
}
});
this.dialogFormVisible = true;
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
} else {
return false;
}
});
},
},
},
};
};
</script>

114
src/views/personnelManagement/menuManagement/index.vue
View File

@ -11,8 +11,8 @@
node-key="id"
:default-expanded-keys="['root']"
@node-click="handleNodeClick"
></el-tree
></el-col>
></el-tree>
</el-col>
<el-col :xs="24" :sm="24" :md="16" :lg="20" :xl="20">
<vab-query-form>
<vab-query-form-top-panel :span="12">
@ -107,11 +107,11 @@
width="200"
>
<template v-slot="scope">
<el-button type="text" @click="handleEdit(scope.row)"
>编辑
<el-button type="text" @click="handleEdit(scope.row)">
编辑
</el-button>
<el-button type="text" @click="handleDelete(scope.row)"
>删除
<el-button type="text" @click="handleDelete(scope.row)">
删除
</el-button>
</template>
</el-table-column>
@ -124,59 +124,59 @@
</template>
<script>
import { getRouterList as getList } from "@/api/router";
import { getTree, doDelete } from "@/api/menuManagement";
import Edit from "./components/MenuManagementEdit";
import { getRouterList as getList } from "@/api/router";
import { getTree, doDelete } from "@/api/menuManagement";
import Edit from "./components/MenuManagementEdit";
export default {
name: "MenuManagement",
components: { Edit },
data() {
return {
data: [],
defaultProps: {
children: "children",
label: "label",
},
list: [],
listLoading: true,
elementLoadingText: "正在加载...",
};
},
async created() {
const roleData = await getTree();
this.data = roleData.data;
this.fetchData();
},
methods: {
handleEdit(row) {
if (row.path) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
export default {
name: "MenuManagement",
components: { Edit },
data() {
return {
data: [],
defaultProps: {
children: "children",
label: "label",
},
list: [],
listLoading: true,
elementLoadingText: "正在加载...",
};
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
}
},
async fetchData() {
this.listLoading = true;
const { data } = await getList();
this.list = data;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
handleNodeClick(data) {
async created() {
const roleData = await getTree();
this.data = roleData.data;
this.fetchData();
},
},
};
methods: {
handleEdit(row) {
if (row.path) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
}
},
async fetchData() {
this.listLoading = true;
const { data } = await getList();
this.list = data;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
handleNodeClick(data) {
this.fetchData();
},
},
};
</script>

86
src/views/personnelManagement/roleManagement/components/RoleManagementEdit.vue
View File

@ -18,52 +18,52 @@
</template>
<script>
import { doEdit } from "@/api/roleManagement";
import { doEdit } from "@/api/roleManagement";
export default {
name: "RoleManagementEdit",
data() {
return {
form: {
id: "",
},
rules: {
permission: [
{ required: true, trigger: "blur", message: "请输入权限码" },
],
},
title: "",
dialogFormVisible: false,
};
},
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
this.title = "编辑";
this.form = Object.assign({}, row);
}
this.dialogFormVisible = true;
export default {
name: "RoleManagementEdit",
data() {
return {
form: {
id: "",
},
rules: {
permission: [
{ required: true, trigger: "blur", message: "请输入权限码" },
],
},
title: "",
dialogFormVisible: false,
};
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
return false;
this.title = "编辑";
this.form = Object.assign({}, row);
}
});
this.dialogFormVisible = true;
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
} else {
return false;
}
});
},
},
},
};
};
</script>

171
src/views/personnelManagement/roleManagement/index.vue
View File

@ -5,11 +5,11 @@
</el-divider>
<vab-query-form>
<vab-query-form-left-panel :span="12">
<el-button icon="el-icon-plus" type="primary" @click="handleEdit"
>添加</el-button
>
<el-button icon="el-icon-delete" type="danger" @click="handleDelete"
>批量删除
<el-button icon="el-icon-plus" type="primary" @click="handleEdit">
添加
</el-button>
<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
批量删除
</el-button>
</vab-query-form-left-panel>
<vab-query-form-right-panel :span="12">
@ -22,8 +22,8 @@
/>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" @click="queryData"
>查询
<el-button icon="el-icon-search" type="primary" @click="queryData">
查询
</el-button>
</el-form-item>
</el-form>
@ -41,8 +41,8 @@
show-overflow-tooltip
prop="id"
label="id"
></el-table-column
><el-table-column
></el-table-column>
<el-table-column
show-overflow-tooltip
prop="permission"
label="权限码"
@ -54,11 +54,9 @@
width="200"
>
<template v-slot="scope">
<el-button type="text" @click="handleEdit(scope.row)"
>编辑
</el-button>
<el-button type="text" @click="handleDelete(scope.row)"
>删除
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">
删除
</el-button>
</template>
</el-table-column>
@ -71,90 +69,89 @@
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
></el-pagination>
<edit ref="edit" @fetchData="fetchData"></edit>
</div>
</template>
<script>
import { getList, doDelete } from "@/api/roleManagement";
import Edit from "./components/RoleManagementEdit";
import { getList, doDelete } from "@/api/roleManagement";
import Edit from "./components/RoleManagementEdit";
export default {
name: "RoleManagement",
components: { Edit },
data() {
return {
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 10,
permission: "",
export default {
name: "RoleManagement",
components: { Edit },
data() {
return {
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 10,
permission: "",
},
};
},
created() {
this.fetchData();
},
methods: {
setSelectRows(val) {
this.selectRows = val;
},
};
},
created() {
this.fetchData();
},
methods: {
setSelectRows(val) {
this.selectRows = val;
},
handleEdit(row) {
if (row.id) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
if (this.selectRows.length > 0) {
const ids = this.selectRows.map((item) => item.id).join();
this.$baseConfirm("你确定要删除选中项吗", null, async () => {
const { msg } = await doDelete({ ids });
handleEdit(row) {
if (row.id) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
this.$baseMessage("未选中任何行", "error");
return false;
if (this.selectRows.length > 0) {
const ids = this.selectRows.map((item) => item.id).join();
this.$baseConfirm("你确定要删除选中项吗", null, async () => {
const { msg } = await doDelete({ ids });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
this.$baseMessage("未选中任何行", "error");
return false;
}
}
}
},
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
},
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
},
};
};
</script>

104
src/views/personnelManagement/userManagement/components/UserManagementEdit.vue
View File

@ -34,60 +34,62 @@
</template>
<script>
import { doEdit } from "@/api/userManagement";
import { doEdit } from "@/api/userManagement";
export default {
name: "UserManagementEdit",
data() {
return {
form: {
username: "",
password: "",
email: "",
permissions: [],
},
rules: {
username: [
{ required: true, trigger: "blur", message: "请输入用户名" },
],
password: [{ required: true, trigger: "blur", message: "请输入密码" }],
email: [{ required: true, trigger: "blur", message: "请输入邮箱" }],
permissions: [
{ required: true, trigger: "blur", message: "请选择权限" },
],
},
title: "",
dialogFormVisible: false,
};
},
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
this.title = "编辑";
this.form = Object.assign({}, row);
}
this.dialogFormVisible = true;
export default {
name: "UserManagementEdit",
data() {
return {
form: {
username: "",
password: "",
email: "",
permissions: [],
},
rules: {
username: [
{ required: true, trigger: "blur", message: "请输入用户名" },
],
password: [
{ required: true, trigger: "blur", message: "请输入密码" },
],
email: [{ required: true, trigger: "blur", message: "请输入邮箱" }],
permissions: [
{ required: true, trigger: "blur", message: "请选择权限" },
],
},
title: "",
dialogFormVisible: false,
};
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
return false;
this.title = "编辑";
this.form = Object.assign({}, row);
}
});
this.dialogFormVisible = true;
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
} else {
return false;
}
});
},
},
},
};
};
</script>

173
src/views/personnelManagement/userManagement/index.vue
View File

@ -2,11 +2,11 @@
<div class="userManagement-container">
<vab-query-form>
<vab-query-form-left-panel :span="12">
<el-button icon="el-icon-plus" type="primary" @click="handleEdit"
>添加</el-button
>
<el-button icon="el-icon-delete" type="danger" @click="handleDelete"
>批量删除
<el-button icon="el-icon-plus" type="primary" @click="handleEdit">
添加
</el-button>
<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
批量删除
</el-button>
</vab-query-form-left-panel>
<vab-query-form-right-panel :span="12">
@ -19,8 +19,8 @@
/>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" @click="queryData"
>查询
<el-button icon="el-icon-search" type="primary" @click="queryData">
查询
</el-button>
</el-form-item>
</el-form>
@ -52,9 +52,9 @@
<el-table-column show-overflow-tooltip label="权限">
<template v-slot="{ row }">
<el-tag v-for="(item, index) in row.permissions" :key="index">{{
item
}}</el-tag>
<el-tag v-for="(item, index) in row.permissions" :key="index">
{{ item }}
</el-tag>
</template>
</el-table-column>
@ -70,11 +70,9 @@
width="200"
>
<template v-slot="scope">
<el-button type="text" @click="handleEdit(scope.row)"
>编辑
</el-button>
<el-button type="text" @click="handleDelete(scope.row)"
>删除
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">
删除
</el-button>
</template>
</el-table-column>
@ -87,90 +85,89 @@
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
></el-pagination>
<edit ref="edit" @fetchData="fetchData"></edit>
</div>
</template>
<script>
import { getList, doDelete } from "@/api/userManagement";
import Edit from "./components/UserManagementEdit";
import { getList, doDelete } from "@/api/userManagement";
import Edit from "./components/UserManagementEdit";
export default {
name: "UserManagement",
components: { Edit },
data() {
return {
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 10,
username: "",
export default {
name: "UserManagement",
components: { Edit },
data() {
return {
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 10,
username: "",
},
};
},
created() {
this.fetchData();
},
methods: {
setSelectRows(val) {
this.selectRows = val;
},
};
},
created() {
this.fetchData();
},
methods: {
setSelectRows(val) {
this.selectRows = val;
},
handleEdit(row) {
if (row.id) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
if (this.selectRows.length > 0) {
const ids = this.selectRows.map((item) => item.id).join();
this.$baseConfirm("你确定要删除选中项吗", null, async () => {
const { msg } = await doDelete({ ids });
handleEdit(row) {
if (row.id) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
this.$baseMessage("未选中任何行", "error");
return false;
if (this.selectRows.length > 0) {
const ids = this.selectRows.map((item) => item.id).join();
this.$baseConfirm("你确定要删除选中项吗", null, async () => {
const { msg } = await doDelete({ ids });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
this.$baseMessage("未选中任何行", "error");
return false;
}
}
}
},
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
},
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
},
};
};
</script>

514
src/views/register/index.vue
View File

@ -6,8 +6,7 @@
type="success"
:closable="false"
style="position: fixed;"
>
</el-alert>
></el-alert>
<el-row>
<el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
<div style="color: transparent;">占位符</div>
@ -49,11 +48,12 @@
v-model.trim="form.phoneCode"
type="text"
placeholder="手机验证码"
><vab-icon
>
<vab-icon
slot="prefix"
:icon="['fas', 'envelope-open']"
></vab-icon
></el-input>
></vab-icon>
</el-input>
<el-button
type="primary"
class="show-pwd phone-code"
@ -69,15 +69,17 @@
type="password"
placeholder="设置密码"
autocomplete="new-password"
><vab-icon slot="prefix" :icon="['fas', 'unlock']"></vab-icon
></el-input>
>
<vab-icon slot="prefix" :icon="['fas', 'unlock']"></vab-icon>
</el-input>
</el-form-item>
<el-form-item>
<el-button
class="register-btn"
type="primary"
@click.native.prevent="handleReister"
>注册
>
注册
</el-button>
<router-link to="/login">
<div style="margin-top: 20px;">登录</div>
@ -89,280 +91,280 @@
</div>
</template>
<script>
import { isPassword, isPhone } from "@/utils/validate";
import { register } from "@/api/user";
export default {
username: "Register",
directives: {
focus: {
inserted(el) {
el.querySelector("input").focus();
import { isPassword, isPhone } from "@/utils/validate";
import { register } from "@/api/user";
export default {
username: "Register",
directives: {
focus: {
inserted(el) {
el.querySelector("input").focus();
},
},
},
},
data() {
const validateusername = (rule, value, callback) => {
if ("" == value) {
callback(new Error("用户名不能为空"));
} else {
callback();
}
};
const validatePassword = (rule, value, callback) => {
if (!isPassword(value)) {
callback(new Error("密码不能少于6位"));
} else {
callback();
}
};
const validatePhone = (rule, value, callback) => {
if (!isPhone(value)) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
};
return {
isGetphone: false,
getPhoneIntval: null,
phoneCode: "获取验证码",
showRegister: false,
nodeEnv: process.env.NODE_ENV,
title: this.$baseTitle,
form: {},
registerRules: {
username: [
{ required: true, trigger: "blur", message: "请输入用户名" },
{ max: 20, trigger: "blur", message: "最多不能超过20个字" },
{ validator: validateusername, trigger: "blur" },
],
phone: [
{ required: true, trigger: "blur", message: "请输入手机号码" },
{ validator: validatePhone, trigger: "blur" },
],
password: [
{ required: true, trigger: "blur", message: "请输入密码" },
{ validator: validatePassword, trigger: "blur" },
],
phoneCode: [
{ required: true, trigger: "blur", message: "请输入手机验证码" },
],
},
loading: false,
passwordType: "password",
};
},
created() {},
mounted() {},
beforeDestroy() {
this.getPhoneIntval = null;
clearInterval(this.getPhoneIntval);
},
methods: {
getPhoneCode() {
this.isGetphone = true;
let n = 60;
this.getPhoneIntval = setInterval(() => {
if (n > 0) {
n--;
this.phoneCode = "重新获取(" + n + "s)";
data() {
const validateusername = (rule, value, callback) => {
if ("" == value) {
callback(new Error("用户名不能为空"));
} else {
this.getPhoneIntval = null;
clearInterval(this.getPhoneIntval);
this.phoneCode = "获取验证码";
this.isGetphone = false;
callback();
}
}, 1000);
},
handleReister() {
this.$refs["registerForm"].validate(async (valid) => {
if (valid) {
const param = {
username: this.form.username,
phone: this.form.phone,
password: this.form.password,
phoneCode: this.form.phoneCode,
};
const { msg } = await register(param);
this.$baseMessage(msg, "success");
};
const validatePassword = (rule, value, callback) => {
if (!isPassword(value)) {
callback(new Error("密码不能少于6位"));
} else {
callback();
}
});
};
const validatePhone = (rule, value, callback) => {
if (!isPhone(value)) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
};
return {
isGetphone: false,
getPhoneIntval: null,
phoneCode: "获取验证码",
showRegister: false,
nodeEnv: process.env.NODE_ENV,
title: this.$baseTitle,
form: {},
registerRules: {
username: [
{ required: true, trigger: "blur", message: "请输入用户名" },
{ max: 20, trigger: "blur", message: "最多不能超过20个字" },
{ validator: validateusername, trigger: "blur" },
],
phone: [
{ required: true, trigger: "blur", message: "请输入手机号码" },
{ validator: validatePhone, trigger: "blur" },
],
password: [
{ required: true, trigger: "blur", message: "请输入密码" },
{ validator: validatePassword, trigger: "blur" },
],
phoneCode: [
{ required: true, trigger: "blur", message: "请输入手机验证码" },
],
},
loading: false,
passwordType: "password",
};
},
},
};
created() {},
mounted() {},
beforeDestroy() {
this.getPhoneIntval = null;
clearInterval(this.getPhoneIntval);
},
methods: {
getPhoneCode() {
this.isGetphone = true;
let n = 60;
this.getPhoneIntval = setInterval(() => {
if (n > 0) {
n--;
this.phoneCode = "重新获取(" + n + "s)";
} else {
this.getPhoneIntval = null;
clearInterval(this.getPhoneIntval);
this.phoneCode = "获取验证码";
this.isGetphone = false;
}
}, 1000);
},
handleReister() {
this.$refs["registerForm"].validate(async (valid) => {
if (valid) {
const param = {
username: this.form.username,
phone: this.form.phone,
password: this.form.password,
phoneCode: this.form.phoneCode,
};
const { msg } = await register(param);
this.$baseMessage(msg, "success");
}
});
},
},
};
</script>
<style lang="scss" scoped>
.register-container {
height: 100vh;
background: url("~@/assets/login_images/background.jpg") center center fixed
no-repeat;
background-size: cover;
.title {
font-size: 54px;
font-weight: 500;
color: rgba(14, 18, 26, 1);
}
.title-tips {
margin-top: 29px;
font-size: 26px;
font-weight: 400;
color: rgba(14, 18, 26, 1);
text-overflow: ellipsis;
white-space: nowrap;
}
.register-btn {
display: inherit;
width: 220px;
height: 60px;
margin-top: 5px;
border: 0;
&:hover {
opacity: 0.9;
}
}
.register-form {
position: relative;
max-width: 100%;
margin: calc((100vh - 499px) / 2) 10% 10%;
overflow: hidden;
.forget-password {
width: 100%;
margin-top: 40px;
text-align: left;
.forget-password {
width: 129px;
height: 19px;
font-size: 20px;
font-weight: 400;
color: rgba(92, 102, 240, 1);
}
}
.per-code {
width: 100px;
height: 36px;
font-size: 20px;
line-height: 36px;
color: #fff;
text-align: center;
cursor: pointer;
background: #bbc1ce;
}
.phone-code {
width: 120px;
height: 36px;
font-size: 14px;
color: #fff;
border-radius: 3px;
}
}
.tips {
margin-bottom: 10px;
font-size: $base-font-size-default;
color: $base-color-white;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.title-container {
position: relative;
.register-container {
height: 100vh;
background: url("~@/assets/login_images/background.jpg") center center fixed
no-repeat;
background-size: cover;
.title {
margin: 0 auto 40px auto;
font-size: 34px;
font-weight: bold;
color: $base-color-blue;
text-align: center;
font-size: 54px;
font-weight: 500;
color: rgba(14, 18, 26, 1);
}
}
.svg-container {
position: absolute;
top: 14px;
left: 15px;
z-index: $base-z-index;
font-size: 16px;
color: #d7dee3;
cursor: pointer;
user-select: none;
}
.title-tips {
margin-top: 29px;
font-size: 26px;
font-weight: 400;
color: rgba(14, 18, 26, 1);
text-overflow: ellipsis;
white-space: nowrap;
}
.show-pwd {
position: absolute;
top: 14px;
right: 25px;
font-size: 16px;
color: $base-font-color;
cursor: pointer;
user-select: none;
}
.register-btn {
display: inherit;
width: 220px;
height: 60px;
margin-top: 5px;
border: 0;
::v-deep {
.el-form-item {
padding-right: 0;
margin: 20px 0;
color: #454545;
background: transparent;
border: 1px solid transparent;
border-radius: 2px;
&__content {
min-height: $base-input-height;
line-height: $base-input-height;
}
&__error {
position: absolute;
top: 100%;
left: 18px;
font-size: $base-font-size-small;
line-height: 18px;
color: $base-color-red;
&:hover {
opacity: 0.9;
}
}
.el-input {
box-sizing: border-box;
.register-form {
position: relative;
max-width: 100%;
margin: calc((100vh - 499px) / 2) 10% 10%;
overflow: hidden;
.el-input__count {
.el-input__count-inner {
background: transparent;
.forget-password {
width: 100%;
margin-top: 40px;
text-align: left;
.forget-password {
width: 129px;
height: 19px;
font-size: 20px;
font-weight: 400;
color: rgba(92, 102, 240, 1);
}
}
.el-input__prefix {
left: 15px;
line-height: 56px;
.per-code {
width: 100px;
height: 36px;
font-size: 20px;
line-height: 36px;
color: #fff;
text-align: center;
cursor: pointer;
background: #bbc1ce;
}
.svg-inline--fa {
width: 20px;
.phone-code {
width: 120px;
height: 36px;
font-size: 14px;
color: #fff;
border-radius: 3px;
}
}
.tips {
margin-bottom: 10px;
font-size: $base-font-size-default;
color: $base-color-white;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.title-container {
position: relative;
.title {
margin: 0 auto 40px auto;
font-size: 34px;
font-weight: bold;
color: $base-color-blue;
text-align: center;
}
}
.svg-container {
position: absolute;
top: 14px;
left: 15px;
z-index: $base-z-index;
font-size: 16px;
color: #d7dee3;
cursor: pointer;
user-select: none;
}
.show-pwd {
position: absolute;
top: 14px;
right: 25px;
font-size: 16px;
color: $base-font-color;
cursor: pointer;
user-select: none;
}
::v-deep {
.el-form-item {
padding-right: 0;
margin: 20px 0;
color: #454545;
background: transparent;
border: 1px solid transparent;
border-radius: 2px;
&__content {
min-height: $base-input-height;
line-height: $base-input-height;
}
&__error {
position: absolute;
top: 100%;
left: 18px;
font-size: $base-font-size-small;
line-height: 18px;
color: $base-color-red;
}
}
input {
height: 58px;
padding-left: 45px;
font-size: $base-font-size-default;
line-height: 58px;
color: $base-font-color;
background: #f6f4fc;
border: 0;
caret-color: $base-font-color;
.el-input {
box-sizing: border-box;
.el-input__count {
.el-input__count-inner {
background: transparent;
}
}
.el-input__prefix {
left: 15px;
line-height: 56px;
.svg-inline--fa {
width: 20px;
}
}
input {
height: 58px;
padding-left: 45px;
font-size: $base-font-size-default;
line-height: 58px;
color: $base-font-color;
background: #f6f4fc;
border: 0;
caret-color: $base-font-color;
}
}
}
}
}
</style>

18
src/views/test/index.vue
View File

@ -4,13 +4,13 @@
</div>
</template>
<script>
export default {
name: "Test",
data() {
return { show: true };
},
created() {},
mounted() {},
methods: {},
};
export default {
name: "Test",
data() {
return { show: true };
},
created() {},
mounted() {},
methods: {},
};
</script>

18
src/views/vab/backToTop/index.vue
View File

@ -8,15 +8,15 @@
</template>
<script>
export default {
name: "BackToTop",
data() {
return {};
},
};
export default {
name: "BackToTop",
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.placeholder-container div {
margin: 10px;
}
.placeholder-container div {
margin: 10px;
}
</style>

90
src/views/vab/betterScroll/index.vue
View File

@ -14,8 +14,8 @@
<el-button @click="handleScrollTo(300)">滚动到300像素位置</el-button>
<el-button @click="handleScrollBy(100)">向下滚动100像素</el-button>
<el-button @click="handleScrollBy(-50)">向上滚动50像素</el-button>
<el-button @click="handleScrollToElement(15)">滚动到第15个 </el-button>
<el-button @click="handleScrollToElement(25)">滚动到第25个 </el-button>
<el-button @click="handleScrollToElement(15)">滚动到第15个</el-button>
<el-button @click="handleScrollToElement(25)">滚动到第25个</el-button>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<div ref="wrapper" class="right-content">
@ -29,55 +29,55 @@
</template>
<script>
import BScroll from "better-scroll";
import BScroll from "better-scroll";
export default {
name: "BetterScroll",
data() {
return {
time: 1000,
BS: null,
};
},
mounted() {
this.scrollInit();
},
beforeDestroy() {
this.scrollDestroy();
},
methods: {
handleScrollTo(y) {
this.BS.scrollTo(0, -y, this.time);
export default {
name: "BetterScroll",
data() {
return {
time: 1000,
BS: null,
};
},
handleScrollBy(y) {
this.BS.scrollBy(0, -y, this.time);
mounted() {
this.scrollInit();
},
handleScrollToElement(n) {
this.BS.scrollToElement(`#bs-item-${n}`, this.time);
beforeDestroy() {
this.scrollDestroy();
},
scrollInit() {
this.BS = new BScroll(this.$refs["wrapper"], {
mouseWheel: true,
scrollbar: {
fade: true,
interactive: false,
},
});
methods: {
handleScrollTo(y) {
this.BS.scrollTo(0, -y, this.time);
},
handleScrollBy(y) {
this.BS.scrollBy(0, -y, this.time);
},
handleScrollToElement(n) {
this.BS.scrollToElement(`#bs-item-${n}`, this.time);
},
scrollInit() {
this.BS = new BScroll(this.$refs["wrapper"], {
mouseWheel: true,
scrollbar: {
fade: true,
interactive: false,
},
});
},
scrollDestroy() {
if (this.BS) {
this.BS.destroy();
}
},
},
scrollDestroy() {
if (this.BS) {
this.BS.destroy();
}
},
},
};
};
</script>
<style lang="scss" scoped>
.better-scroll-container {
.right-content {
height: 500px;
margin-top: 40px;
overflow: hidden;
.better-scroll-container {
.right-content {
height: 500px;
margin-top: 40px;
overflow: hidden;
}
}
}
</style>

102
src/views/vab/card/index.vue
View File

@ -39,61 +39,61 @@
</template>
<script>
import { getList } from "@/api/table";
import VabImage from "@/components/VabImage";
import { getList } from "@/api/table";
import VabImage from "@/components/VabImage";
export default {
name: "Card",
components: {
VabImage,
},
data() {
return {
value: true,
currentDate: new Date(),
list: null,
listLoading: true,
pageNo: 1,
pageSize: 10,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
height: 0,
elementLoadingText: "正在加载...",
dialogFormVisible: false,
};
},
created() {
this.fetchData();
this.height = this.$baseTableHeight(1);
},
methods: {
bigClick(val) {
this.$baseAlert("点击了大图");
export default {
name: "Card",
components: {
VabImage,
},
smallClick(val) {
this.$baseAlert("点击了小图");
data() {
return {
value: true,
currentDate: new Date(),
list: null,
listLoading: true,
pageNo: 1,
pageSize: 10,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
height: 0,
elementLoadingText: "正在加载...",
dialogFormVisible: false,
};
},
handleSizeChange(val) {
this.pageSize = val;
created() {
this.fetchData();
this.height = this.$baseTableHeight(1);
},
handleCurrentChange(val) {
this.pageNo = val;
this.fetchData();
methods: {
bigClick(val) {
this.$baseAlert("点击了大图");
},
smallClick(val) {
this.$baseAlert("点击了小图");
},
handleSizeChange(val) {
this.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.pageNo = val;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList({
pageNo: this.pageNo,
pageSize: this.pageSize,
});
this.list = data;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList({
pageNo: this.pageNo,
pageSize: this.pageSize,
});
this.list = data;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
},
};
};
</script>

44
src/views/vab/codeGenerator/components/TableEditor.vue
View File

@ -8,30 +8,30 @@
</template>
<script>
import JsonEditor from "@/components/JsonEditor/index";
import JsonEditor from "@/components/JsonEditor/index";
const jsonData =
'{"code": 200, "msg": "操作成功", "pageNo": 1, "pageSize": 10, "totalPages": 4, "totalCount": 238, "data": [{"id": "", "title": "", "status": "", "author": "", "datetime": "", "pageViews": "", "img": "", "switch": ""}]}';
const jsonData =
'{"code": 200, "msg": "操作成功", "pageNo": 1, "pageSize": 10, "totalPages": 4, "totalCount": 238, "data": [{"id": "", "title": "", "status": "", "author": "", "datetime": "", "pageViews": "", "img": "", "switch": ""}]}';
export default {
components: { JsonEditor },
data() {
return {
value: JSON.parse(jsonData),
};
},
computed: {},
created() {
this.prettierJSON();
},
methods: {
prettierJSON() {
this.$emit("change", jsonData);
export default {
components: { JsonEditor },
data() {
return {
value: JSON.parse(jsonData),
};
},
prettierNewJSON(jsonData) {
this.$emit("change", jsonData);
computed: {},
created() {
this.prettierJSON();
},
},
};
methods: {
prettierJSON() {
this.$emit("change", jsonData);
},
prettierNewJSON(jsonData) {
this.$emit("change", jsonData);
},
},
};
</script>

118
src/views/vab/codeGenerator/components/TableExhibition.vue
View File

@ -13,69 +13,69 @@
</template>
<script>
import TableExhibitionBody from "./TableExhibitionBody";
import TableExhibitionQuery from "./TableExhibitionQuery";
import TableExhibitionHeader from "./TableExhibitionHeader";
import { genTableSnippet } from "./snippetTable.js";
import TableExhibitionBody from "./TableExhibitionBody";
import TableExhibitionQuery from "./TableExhibitionQuery";
import TableExhibitionHeader from "./TableExhibitionHeader";
import { genTableSnippet } from "./snippetTable.js";
export default {
components: {
TableExhibitionBody,
TableExhibitionHeader,
TableExhibitionQuery,
},
props: {
tableData: {
type: Object,
default: () => {
return {};
export default {
components: {
TableExhibitionBody,
TableExhibitionHeader,
TableExhibitionQuery,
},
props: {
tableData: {
type: Object,
default: () => {
return {};
},
},
},
},
data() {
return {
list: [],
code: "",
headers: [],
query: {
limit: 20,
cursor: 1,
},
total: 0,
};
},
watch: {
tableData: {
handler(val) {
this.list = val.data && val.data.slice(0, 3);
if (this.list) {
this.headers = Object.keys(this.list[0]).map((item) => {
// opt 为需要对 字段的操作，''空就不操作，'time' 处理时间，'template' 将字段放在template 里面，方便后续操作
return {
value: this.list[0][item],
key: item,
label: item,
show: true,
opt: "",
query: false,
};
});
}
},
immediate: true,
data() {
return {
list: [],
code: "",
headers: [],
query: {
limit: 20,
cursor: 1,
},
total: 0,
};
},
headers: {
handler(val) {
this.code = genTableSnippet(val, this.getTableAPI);
this.$store.dispatch("table/setTableCode", this.code);
watch: {
tableData: {
handler(val) {
this.list = val.data && val.data.slice(0, 3);
if (this.list) {
this.headers = Object.keys(this.list[0]).map((item) => {
// opt 为需要对 字段的操作，''空就不操作，'time' 处理时间，'template' 将字段放在template 里面，方便后续操作
return {
value: this.list[0][item],
key: item,
label: item,
show: true,
opt: "",
query: false,
};
});
}
},
immediate: true,
},
headers: {
handler(val) {
this.code = genTableSnippet(val, this.getTableAPI);
this.$store.dispatch("table/setTableCode", this.code);
},
deep: true,
},
deep: true,
},
},
created() {},
methods: {
editdata() {},
test(val) {},
},
};
created() {},
methods: {
editdata() {},
test(val) {},
},
};
</script>

63
src/views/vab/codeGenerator/components/TableExhibitionBody.vue
View File

@ -19,42 +19,41 @@
background
layout="total, sizes, prev, pager, next, jumper"
:total="1000"
>
</el-pagination>
></el-pagination>
</div>
</template>
<script>
export default {
props: {
list: {
type: null,
required: true,
},
headers: {
type: Array,
required: true,
},
},
data() {
return {
query: {
limit: 20,
cursor: 1,
export default {
props: {
list: {
type: null,
required: true,
},
headers: {
type: Array,
required: true,
},
table_key: 0,
total: 0,
};
},
watch: {
headers() {
this.table_key++;
},
},
created() {},
methods: {
editdata() {},
test(val) {},
},
};
data() {
return {
query: {
limit: 20,
cursor: 1,
},
table_key: 0,
total: 0,
};
},
watch: {
headers() {
this.table_key++;
},
},
created() {},
methods: {
editdata() {},
test(val) {},
},
};
</script>

121
src/views/vab/codeGenerator/components/TableExhibitionHeader.vue
View File

@ -17,11 +17,14 @@
effect="dark"
placement="top-start"
>
<el-button v-if="header.opt === ''" @click="opt(header, 'template')"
>{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
<el-button
v-if="header.opt === ''"
@click="opt(header, 'template')"
>
{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
</el-button>
<el-button v-else @click="opt(header, '')"
>{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
<el-button v-else @click="opt(header, '')">
{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
</el-button>
</el-tooltip>
<el-tooltip
@ -30,8 +33,8 @@
effect="dark"
placement="top-start"
>
<el-button @click="hide(header)"
>{{ header.show ? "点击隐藏字段" : "点击显示字段" }}
<el-button @click="hide(header)">
{{ header.show ? "点击隐藏字段" : "点击显示字段" }}
</el-button>
</el-tooltip>
<div slot="reference" class="table-header-card">
@ -50,67 +53,67 @@
</template>
<script>
import draggable from "vuedraggable";
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
props: {
headers: {
type: Array,
required: true,
export default {
components: {
draggable,
},
},
data() {
return {
tableHeaders: this.headers,
};
},
watch: {
headers(val) {
this.tableHeaders = val;
props: {
headers: {
type: Array,
required: true,
},
},
},
methods: {
set() {
this.$emit("update:headers", this.tableHeaders);
data() {
return {
tableHeaders: this.headers,
};
},
show(header) {
header.show = true;
watch: {
headers(val) {
this.tableHeaders = val;
},
},
hide(header) {
header.show = !header.show;
methods: {
set() {
this.$emit("update:headers", this.tableHeaders);
},
show(header) {
header.show = true;
},
hide(header) {
header.show = !header.show;
},
opt(header, opt) {
header.opt = opt;
},
query(header, query) {
header.query = query;
},
},
opt(header, opt) {
header.opt = opt;
},
query(header, query) {
header.query = query;
},
},
};
};
</script>
<style scoped>
.table-header-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
.table-header-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
.table-header >>> .el-input__inner {
border: none;
border-bottom: 1px solid #9e9e9e;
border-radius: 0;
}
.table-header >>> .el-input__inner {
border: none;
border-bottom: 1px solid #9e9e9e;
border-radius: 0;
}
.el-popover {
min-width: 100px !important;
}
.el-popover {
min-width: 100px !important;
}
</style>

101
src/views/vab/codeGenerator/components/TableExhibitionQuery.vue
View File

@ -2,8 +2,8 @@
<div class="table-query">
<div>
<el-button type="primary" @click="openCodeDialog">查看代码</el-button>
<el-button type="primary" @click="handleClipboard(srcTableCode, $event)"
>复制代码
<el-button type="primary" @click="handleClipboard(srcTableCode, $event)">
复制代码
</el-button>
</div>
<el-dialog destroy-on-close title="查看代码" :visible.sync="dialogVisible">
@ -11,69 +11,72 @@
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="closeCodeDialog(srcTableCode, $event)"
>复制代码</el-button
<el-button
type="primary"
@click="closeCodeDialog(srcTableCode, $event)"
>
复制代码
</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import clipboard from "@/utils/clipboard";
import CodeMirror from "codemirror";
import { mapGetters } from "vuex";
import clipboard from "@/utils/clipboard";
import CodeMirror from "codemirror";
export default {
props: {
headers: {
type: Array,
required: true,
export default {
props: {
headers: {
type: Array,
required: true,
},
},
},
data() {
return {
dialogVisible: false,
};
},
computed: {
...mapGetters({ srcTableCode: "table/srcTableCode" }),
},
methods: {
handleClipboard(text, event) {
clipboard(text, event);
data() {
return {
dialogVisible: false,
};
},
openCodeDialog() {
this.dialogVisible = true;
setTimeout(() => {
CodeMirror.fromTextArea(this.$refs.code, {
lineNumbers: true,
gutters: ["CodeMirror-lint-markers"],
theme: "rubyblue",
autoRefresh: true,
lint: true,
});
}, 0);
computed: {
...mapGetters({ srcTableCode: "table/srcTableCode" }),
},
closeCodeDialog(text, event) {
this.handleClipboard(text, event);
this.dialogVisible = false;
methods: {
handleClipboard(text, event) {
clipboard(text, event);
},
openCodeDialog() {
this.dialogVisible = true;
setTimeout(() => {
CodeMirror.fromTextArea(this.$refs.code, {
lineNumbers: true,
gutters: ["CodeMirror-lint-markers"],
theme: "rubyblue",
autoRefresh: true,
lint: true,
});
}, 0);
},
closeCodeDialog(text, event) {
this.handleClipboard(text, event);
this.dialogVisible = false;
},
},
},
};
};
</script>
<style lang="scss" scoped>
.table-query {
display: flex;
justify-content: flex-end;
height: 45px;
.table-query {
display: flex;
justify-content: flex-end;
height: 45px;
::v-deep {
.CodeMirror {
height: auto;
min-height: calc(100vh - 420px);
::v-deep {
.CodeMirror {
height: auto;
min-height: calc(100vh - 420px);
}
}
}
}
</style>

38
src/views/vab/codeGenerator/index.vue
View File

@ -12,25 +12,25 @@
</template>
<script>
import TableEditor from "./components/TableEditor";
import TableExhibition from "./components/TableExhibition";
import TableEditor from "./components/TableEditor";
import TableExhibition from "./components/TableExhibition";
export default {
name: "Index",
components: {
TableEditor,
TableExhibition,
},
data() {
return {
tableData: {},
getTableAPI: "",
};
},
methods: {
setTableData(val) {
this.tableData = JSON.parse(val);
export default {
name: "Index",
components: {
TableEditor,
TableExhibition,
},
},
};
data() {
return {
tableData: {},
getTableAPI: "",
};
},
methods: {
setTableData(val) {
this.tableData = JSON.parse(val);
},
},
};
</script>

1136
src/views/vab/echarts/index.vue
View File

File diff suppressed because it is too large Load Diff

164
src/views/vab/editor/index.vue
View File

@ -14,7 +14,7 @@
<vab-quill v-model="form.content" :min-height="400"></vab-quill>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSee">预览效果 </el-button>
<el-button type="primary" @click="handleSee">预览效果</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</el-form-item>
</el-form>
@ -28,101 +28,101 @@
</template>
<script>
import vabQuill from "@/plugins/vabQuill";
export default {
name: "Editor",
components: { vabQuill },
data() {
return {
borderColor: "#dcdfe6",
dialogTableVisible: false,
form: {
title: "",
module: "",
content: "",
},
rules: {
title: [
{
required: true,
message: "请输入标题",
trigger: "blur",
},
],
module: [
{
required: true,
message: "请选择模块",
trigger: "change",
},
],
content: [
{
required: true,
message: "请输入内容",
trigger: "blur",
},
],
},
};
},
methods: {
handleSee() {
this.$refs["form"].validate((valid) => {
this.$refs.form.validateField("content", (errorMsg) => {});
if (valid) {
this.dialogTableVisible = true;
} else {
return false;
}
});
import vabQuill from "@/plugins/vabQuill";
export default {
name: "Editor",
components: { vabQuill },
data() {
return {
borderColor: "#dcdfe6",
dialogTableVisible: false,
form: {
title: "",
module: "",
content: "",
},
rules: {
title: [
{
required: true,
message: "请输入标题",
trigger: "blur",
},
],
module: [
{
required: true,
message: "请选择模块",
trigger: "change",
},
],
content: [
{
required: true,
message: "请输入内容",
trigger: "blur",
},
],
},
};
},
handleSave() {
this.$refs["form"].validate((valid) => {
this.$refs.form.validateField("content", (errorMsg) => {
this.borderColor = "#dcdfe6";
if (errorMsg) {
this.borderColor = "#F56C6C";
methods: {
handleSee() {
this.$refs["form"].validate((valid) => {
this.$refs.form.validateField("content", (errorMsg) => {});
if (valid) {
this.dialogTableVisible = true;
} else {
return false;
}
});
if (valid) {
this.$baseMessage("submit!", "success");
} else {
return false;
}
});
},
handleSave() {
this.$refs["form"].validate((valid) => {
this.$refs.form.validateField("content", (errorMsg) => {
this.borderColor = "#dcdfe6";
if (errorMsg) {
this.borderColor = "#F56C6C";
}
});
if (valid) {
this.$baseMessage("submit!", "success");
} else {
return false;
}
});
},
},
},
};
};
</script>
<style lang="scss" scoped>
.editor-container {
.news {
&-title {
text-align: center;
}
.editor-container {
.news {
&-title {
text-align: center;
}
&-content {
::v-deep {
p {
line-height: 30px;
&-content {
::v-deep {
p {
line-height: 30px;
img {
display: block;
margin-right: auto;
margin-left: auto;
img {
display: block;
margin-right: auto;
margin-left: auto;
}
}
}
}
}
}
.vab-quill-content {
::v-deep {
.el-form-item__content {
line-height: normal;
.vab-quill-content {
::v-deep {
.el-form-item__content {
line-height: normal;
}
}
}
}
}
</style>

121
src/views/vab/element/index.vue
View File

@ -2,8 +2,8 @@
<div class="element-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
<el-button type="primary" @click="dialogVisible = !dialogVisible"
>element全部文档点这里
<el-button type="primary" @click="dialogVisible = !dialogVisible">
element全部文档点这里
</el-button>
<el-dialog
:fullscreen="true"
@ -16,8 +16,8 @@
frameborder="0"
></iframe>
</el-dialog>
<el-divider content-position="left"
>Tag 标签
<el-divider content-position="left">
Tag 标签
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/tag"
@ -36,8 +36,8 @@
<el-tag effect="dark" type="warning">标签四</el-tag>
<el-tag effect="dark" type="danger">标签五</el-tag>
<el-divider content-position="left"
>进度条
<el-divider content-position="left">
进度条
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/progress"
@ -90,8 +90,8 @@
status="exception"
></el-progress>
<el-divider content-position="left"
>按钮
<el-divider content-position="left">
按钮
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/button"
@ -133,13 +133,14 @@
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary"
>上传<i class="el-icon-upload el-icon--right"></i
></el-button>
<el-button type="primary">
上传
<i class="el-icon-upload el-icon--right"></i>
</el-button>
<el-button type="primary" :loading="true">加载中</el-button>
<el-divider content-position="left"
>文字链接
<el-divider content-position="left">
文字链接
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/link"
@ -147,8 +148,8 @@
文档
</a>
</el-divider>
<el-link href="https://element.eleme.io" target="_blank"
>默认链接
<el-link href="https://element.eleme.io" target="_blank">
默认链接
</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success">成功链接</el-link>
@ -163,8 +164,8 @@
<el-link type="info" disabled>信息链接</el-link>
<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>
<el-divider content-position="left"
>头像
<el-divider content-position="left">
头像
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/avatar"
@ -173,8 +174,8 @@
</a>
</el-divider>
<el-avatar icon="el-icon-user-solid"></el-avatar>
<el-divider content-position="left"
>页头
<el-divider content-position="left">
页头
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/page-header"
@ -183,8 +184,8 @@
</a>
</el-divider>
<el-page-header content="详情页面"></el-page-header>
<el-divider content-position="left"
>面包屑
<el-divider content-position="left">
面包屑
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/breadcrumb"
@ -204,50 +205,50 @@
</template>
<script>
export default {
name: "Element",
components: {},
data() {
return {
dialogVisible: false,
};
},
created() {},
mounted() {},
methods: {},
};
export default {
name: "Element",
components: {},
data() {
return {
dialogVisible: false,
};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.element-container {
::v-deep {
.el-dialog__wrapper {
position: fixed;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
.element-container {
::v-deep {
.el-dialog__wrapper {
position: fixed;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
.el-tag,
.el-button,
.el-link {
margin: 5px;
}
.el-progress {
margin: 20px;
}
}
.el-tag,
.el-button,
.el-link {
margin: 5px;
}
.el-progress {
margin: 20px;
.element-iframe {
position: absolute;
top: 55px;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 89vh;
}
}
.element-iframe {
position: absolute;
top: 55px;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 89vh;
}
}
</style>

12
src/views/vab/errorLog/components/ErrorTest.vue
View File

@ -4,10 +4,10 @@
</template>
<script>
export default {
name: "ErrorTest",
data() {
return {};
},
};
export default {
name: "ErrorTest",
data() {
return {};
},
};
</script>

32
src/views/vab/errorLog/index.vue
View File

@ -1,28 +1,28 @@
<template>
<div class="errorLog-container">
<el-divider content-position="left"
>这里会在顶部navbar上模拟一个控制台错误日志
<el-divider content-position="left">
这里会在顶部navbar上模拟一个控制台错误日志
</el-divider>
<el-button type="primary" @click="handleError"
>点击模拟一个chuzhixinjiayou的错误
<el-button type="primary" @click="handleError">
点击模拟一个chuzhixinjiayou的错误
</el-button>
<error-test v-if="show" />
</div>
</template>
<script>
import ErrorTest from "./components/ErrorTest";
import ErrorTest from "./components/ErrorTest";
export default {
name: "ErrorLog",
components: { ErrorTest },
data() {
return { show: false };
},
methods: {
handleError() {
this.show = true;
export default {
name: "ErrorLog",
components: { ErrorTest },
data() {
return { show: false };
},
},
};
methods: {
handleError() {
this.show = true;
},
},
};
</script>

107
src/views/vab/form/index.vue
View File

@ -39,8 +39,8 @@
<el-input v-model="ruleForm.desc" type="textarea"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>立即创建
<el-button type="primary" @click="submitForm('ruleForm')">
立即创建
</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
@ -51,54 +51,61 @@
</template>
<script>
export default {
name: "Form",
data() {
return {
ruleForm: {
name: "",
region: "",
delivery: false,
type: [],
resource: "",
desc: "",
},
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" },
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change",
},
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" },
],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
return false;
}
});
export default {
name: "Form",
data() {
return {
ruleForm: {
name: "",
region: "",
delivery: false,
type: [],
resource: "",
desc: "",
},
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{
min: 3,
max: 5,
message: "长度在 3 到 5 个字符",
trigger: "blur",
},
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" },
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change",
},
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" },
],
desc: [
{ required: true, message: "请填写活动形式", trigger: "blur" },
],
},
};
},
resetForm(formName) {
this.$refs[formName].resetFields();
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
},
};
};
</script>

168
src/views/vab/icon/colorfulIcon.vue
View File

@ -2,8 +2,8 @@
<div class="colorful-icon-container">
<el-row :gutter="20">
<el-col :span="24">
<el-divider content-position="left"
>多彩图标在演示环境中使用的是cdn加速服务，开发时需存储到本地，使用方法可查看群文档，点击图标即可复制源码
<el-divider content-position="left">
多彩图标在演示环境中使用的是cdn加速服务，开发时需存储到本地，使用方法可查看群文档，点击图标即可复制源码
</el-divider>
</el-col>
<el-col :span="24">
@ -12,8 +12,8 @@
<el-input v-model="queryForm.title"></el-input>
</el-form-item>
<el-form-item label-width="0">
<el-button native-type="submit" type="primary" @click="queryData"
>搜索
<el-button native-type="submit" type="primary" @click="queryData">
搜索
</el-button>
</el-form-item>
@ -60,96 +60,96 @@
</template>
<script>
import { getIconList } from "@/api/colorfulIcon";
import clip from "@/utils/clipboard";
import { getIconList } from "@/api/colorfulIcon";
import clip from "@/utils/clipboard";
export default {
name: "ColorfulIcon",
data() {
return {
copyText: "",
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
height: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryIcon: [],
queryForm: {
pageNo: 1,
pageSize: 72,
title: "",
export default {
name: "ColorfulIcon",
data() {
return {
copyText: "",
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
height: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryIcon: [],
queryForm: {
pageNo: 1,
pageSize: 72,
title: "",
},
};
},
created() {
this.fetchData();
},
methods: {
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
const { data, totalCount } = await getIconList(this.queryForm);
this.queryIcon = data;
this.allIcon = data;
this.total = totalCount;
},
handleCopyIcon(index, event) {
//const copyText = `<vab-colorful-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-colorful-icon@master/${this.queryIcon[index]}.svg" />`;
const copyText = `<vab-colorful-icon icon-class="${this.queryIcon[index]}" />`;
this.copyText = copyText;
clip(copyText, event);
},
};
},
created() {
this.fetchData();
},
methods: {
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
const { data, totalCount } = await getIconList(this.queryForm);
this.queryIcon = data;
this.allIcon = data;
this.total = totalCount;
},
handleCopyIcon(index, event) {
//const copyText = `<vab-colorful-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-colorful-icon@master/${this.queryIcon[index]}.svg" />`;
const copyText = `<vab-colorful-icon icon-class="${this.queryIcon[index]}" />`;
this.copyText = copyText;
clip(copyText, event);
},
},
};
};
</script>
<style lang="scss" scoped>
.colorful-icon-container {
::v-deep {
.el-card__body {
position: relative;
display: flex;
flex-direction: column;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
.colorful-icon-container {
::v-deep {
.el-card__body {
position: relative;
display: flex;
flex-direction: column;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
svg:not(:root) {
font-size: 35px;
font-weight: bold;
color: $base-color-gray;
text-align: center;
vertical-align: middle;
pointer-events: none;
cursor: pointer;
}
svg:not(:root) {
font-size: 35px;
font-weight: bold;
color: $base-color-gray;
text-align: center;
vertical-align: middle;
pointer-events: none;
cursor: pointer;
}
.svg-external-icon {
width: 35px;
height: 35px;
.svg-external-icon {
width: 35px;
height: 35px;
}
}
}
}
.icon-text {
height: 30px;
margin-top: -15px;
overflow: hidden;
font-size: 12px;
line-height: 30px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
.icon-text {
height: 30px;
margin-top: -15px;
overflow: hidden;
font-size: 12px;
line-height: 30px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>

154
src/views/vab/icon/index.vue
View File

@ -10,8 +10,8 @@
<el-input v-model="queryForm.title"></el-input>
</el-form-item>
<el-form-item label-width="0">
<el-button native-type="submit" type="primary" @click="queryData"
>搜索
<el-button native-type="submit" type="primary" @click="queryData">
搜索
</el-button>
</el-form-item>
</el-form>
@ -52,90 +52,90 @@
</template>
<script>
import clip from "@/utils/clipboard";
import { getIconList } from "@/api/icon";
import clip from "@/utils/clipboard";
import { getIconList } from "@/api/icon";
export default {
name: "AwesomeIcon",
data() {
return {
copyText: "",
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
height: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryIcon: [],
queryForm: {
pageNo: 1,
pageSize: 72,
title: "",
export default {
name: "AwesomeIcon",
data() {
return {
copyText: "",
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
height: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryIcon: [],
queryForm: {
pageNo: 1,
pageSize: 72,
title: "",
},
};
},
created() {
this.fetchData();
},
methods: {
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
const { data, totalCount } = await getIconList(this.queryForm);
this.queryIcon = data;
this.allIcon = data;
this.total = totalCount;
},
handleCopyIcon(index, event) {
const copyText = `<vab-icon :icon="['fas', '${this.queryIcon[index]}']"></vab-icon>`;
this.copyText = copyText;
clip(copyText, event);
},
};
},
created() {
this.fetchData();
},
methods: {
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
const { data, totalCount } = await getIconList(this.queryForm);
this.queryIcon = data;
this.allIcon = data;
this.total = totalCount;
},
handleCopyIcon(index, event) {
const copyText = `<vab-icon :icon="['fas', '${this.queryIcon[index]}']"></vab-icon>`;
this.copyText = copyText;
clip(copyText, event);
},
},
};
};
</script>
<style lang="scss" scoped>
.icon-container {
::v-deep {
.el-card__body {
position: relative;
display: flex;
flex-direction: column;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
.icon-container {
::v-deep {
.el-card__body {
position: relative;
display: flex;
flex-direction: column;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
svg:not(:root).svg-inline--fa {
font-size: 35px;
font-weight: bold;
color: $base-color-gray;
text-align: center;
vertical-align: middle;
pointer-events: none;
cursor: pointer;
svg:not(:root).svg-inline--fa {
font-size: 35px;
font-weight: bold;
color: $base-color-gray;
text-align: center;
vertical-align: middle;
pointer-events: none;
cursor: pointer;
}
}
}
}
.icon-text {
height: 30px;
margin-top: -15px;
overflow: hidden;
font-size: 12px;
line-height: 30px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
.icon-text {
height: 30px;
margin-top: -15px;
overflow: hidden;
font-size: 12px;
line-height: 30px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>

162
src/views/vab/icon/remixIcon.vue
View File

@ -2,8 +2,8 @@
<div class="colorful-icon-container">
<el-row :gutter="20">
<el-col :span="24">
<el-divider content-position="left"
>小清新图标在演示环境中使用的是cdn加速服务，开发时需存储到本地，使用方法可查看群文档，点击图标即可复制源码，点击图标即可复制源码
<el-divider content-position="left">
小清新图标在演示环境中使用的是cdn加速服务，开发时需存储到本地，使用方法可查看群文档，点击图标即可复制源码，点击图标即可复制源码
</el-divider>
</el-col>
<el-col :span="24">
@ -12,8 +12,8 @@
<el-input v-model="queryForm.title"></el-input>
</el-form-item>
<el-form-item label-width="0">
<el-button native-type="submit" type="primary" @click="queryData"
>搜索
<el-button native-type="submit" type="primary" @click="queryData">
搜索
</el-button>
</el-form-item>
@ -62,92 +62,92 @@
</template>
<script>
import { getIconList } from "@/api/remixIcon";
import clip from "@/utils/clipboard";
import { getIconList } from "@/api/remixIcon";
import clip from "@/utils/clipboard";
export default {
name: "RemixIcon",
data() {
return {
copyText: "",
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
height: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryIcon: [],
queryForm: {
pageNo: 1,
pageSize: 72,
title: "",
export default {
name: "RemixIcon",
data() {
return {
copyText: "",
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
height: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryIcon: [],
queryForm: {
pageNo: 1,
pageSize: 72,
title: "",
},
};
},
created() {
this.fetchData();
},
methods: {
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
const { data, totalCount } = await getIconList(this.queryForm);
this.queryIcon = data;
this.allIcon = data;
this.total = totalCount;
},
handleCopyIcon(index, event) {
//const copyText = `<vab-remix-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-remixicon@master/src/icons/svg/${this.queryIcon[index]}.svg" />`;
const copyText = `<vab-remix-icon icon-class="${this.queryIcon[index]}" />`;
this.copyText = copyText;
clip(copyText, event);
},
};
},
created() {
this.fetchData();
},
methods: {
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
const { data, totalCount } = await getIconList(this.queryForm);
this.queryIcon = data;
this.allIcon = data;
this.total = totalCount;
},
handleCopyIcon(index, event) {
//const copyText = `<vab-remix-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-remixicon@master/src/icons/svg/${this.queryIcon[index]}.svg" />`;
const copyText = `<vab-remix-icon icon-class="${this.queryIcon[index]}" />`;
this.copyText = copyText;
clip(copyText, event);
},
},
};
};
</script>
<style lang="scss" scoped>
.colorful-icon-container {
::v-deep {
.el-card__body {
position: relative;
display: flex;
flex-direction: column;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
.colorful-icon-container {
::v-deep {
.el-card__body {
position: relative;
display: flex;
flex-direction: column;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
svg:not(:root),
.svg-external-icon {
font-size: 28px;
font-weight: bold;
color: $base-color-gray;
text-align: center;
vertical-align: middle;
pointer-events: none;
cursor: pointer;
svg:not(:root),
.svg-external-icon {
font-size: 28px;
font-weight: bold;
color: $base-color-gray;
text-align: center;
vertical-align: middle;
pointer-events: none;
cursor: pointer;
}
}
}
}
.icon-text {
height: 30px;
margin-top: -15px;
overflow: hidden;
font-size: 12px;
line-height: 30px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
.icon-text {
height: 30px;
margin-top: -15px;
overflow: hidden;
font-size: 12px;
line-height: 30px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>

46
src/views/vab/imgComparison/index.vue
View File

@ -25,29 +25,29 @@
</template>
<script>
import VabComparison from "@/plugins/vabComparison";
import { random } from "@/utils";
import VabComparison from "@/plugins/vabComparison";
import { random } from "@/utils";
export default {
name: "ImgComparison",
components: { VabComparison },
data() {
return {
comparison: {
width: "100%",
height: "auto",
src1: require("@/assets/comparison/left.jpg"),
src2: require("@/assets/comparison/right.jpg"),
start: random(0, 100),
},
};
},
created() {},
mounted() {},
methods: {
random(m, n) {
return random(m, n).toString();
export default {
name: "ImgComparison",
components: { VabComparison },
data() {
return {
comparison: {
width: "100%",
height: "auto",
src1: require("@/assets/comparison/left.jpg"),
src2: require("@/assets/comparison/right.jpg"),
start: random(0, 100),
},
};
},
},
};
created() {},
mounted() {},
methods: {
random(m, n) {
return random(m, n).toString();
},
},
};
</script>

76
src/views/vab/loading/index.vue
View File

@ -11,59 +11,61 @@
<el-button type="primary" @click="handleLoading(7)">效果7</el-button>
<el-button type="primary" @click="handleLoading(8)">效果8</el-button>
<el-button type="primary" @click="handleLoading(9)">效果9</el-button>
<el-button type="primary" @click="test()"
>全局默认骨架屏(仿支付宝)
<el-button type="primary" @click="test()">
全局默认骨架屏(仿支付宝)
</el-button>
<br /><br /><br />
<br />
<br />
<br />
<el-divider content-position="left">多彩loading</el-divider>
<el-button type="primary" @click="handleColorfullLoading(1)"
>效果1
<el-button type="primary" @click="handleColorfullLoading(1)">
效果1
</el-button>
<el-button type="primary" @click="handleColorfullLoading(2)"
>效果2
<el-button type="primary" @click="handleColorfullLoading(2)">
效果2
</el-button>
<el-button type="primary" @click="handleColorfullLoading(3)"
>效果3
<el-button type="primary" @click="handleColorfullLoading(3)">
效果3
</el-button>
<el-button type="primary" @click="handleColorfullLoading(4)"
>效果4
<el-button type="primary" @click="handleColorfullLoading(4)">
效果4
</el-button>
</div>
</template>
<script>
export default {
name: "Loading",
data() {
return {};
},
methods: {
handleLoading(index) {
this.$baseLoading(index);
export default {
name: "Loading",
data() {
return {};
},
handleColorfullLoading(index) {
this.$baseColorfullLoading(index);
methods: {
handleLoading(index) {
this.$baseLoading(index);
},
handleColorfullLoading(index) {
this.$baseColorfullLoading(index);
},
test() {
location.reload();
},
},
test() {
location.reload();
},
},
};
};
</script>
<style lang="scss" scoped>
.loading-container {
::v-deep {
.el-button {
margin-top: 10px;
margin-right: 10px;
margin-left: 0;
}
.loading-container {
::v-deep {
.el-button {
margin-top: 10px;
margin-right: 10px;
margin-left: 0;
}
.el-button + .el-button {
margin-right: 10px;
margin-left: 0;
.el-button + .el-button {
margin-right: 10px;
margin-left: 0;
}
}
}
}
</style>

33
src/views/vab/lodash/index.vue
View File

@ -7,7 +7,8 @@
type="primary"
href="https://www.lodashjs.com/"
target="_blank"
>lodashjs官网
>
lodashjs官网
</el-link>
</el-card>
</el-col>
@ -187,24 +188,24 @@
</template>
<script>
export default {
name: "Lodash",
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
export default {
name: "Lodash",
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.lodash-container {
text-align: left;
.lodash-container {
text-align: left;
::v-deep {
.lodash-content {
min-height: 150px;
::v-deep {
.lodash-content {
min-height: 150px;
}
}
}
}
</style>

14
src/views/vab/magnifier/index.vue
View File

@ -24,12 +24,12 @@
</template>
<script>
import VabMagnifier from "@/plugins/vabMagnifier.js";
import VabMagnifier from "@/plugins/vabMagnifier.js";
export default {
name: "Magnifier",
components: {
VabMagnifier,
},
};
export default {
name: "Magnifier",
components: {
VabMagnifier,
},
};
</script>

28
src/views/vab/map/amap.vue
View File

@ -7,21 +7,21 @@
</template>
<script>
export default {
name: "Amap",
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
export default {
name: "Amap",
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.amap-container {
.container {
width: 100%;
height: calc(100vh - 214px);
.amap-container {
.container {
width: 100%;
height: calc(100vh - 214px);
}
}
}
</style>

192
src/views/vab/map/index.vue
View File

@ -5,111 +5,111 @@
</template>
<script>
import axios from "axios";
import * as mapv from "mapv";
export default {
name: "Map",
components: {},
data() {
return {};
},
created() {},
mounted() {
this.$nextTick(() => {
const map = this.$baseMap();
axios
.get(
"https://cdn.jsdelivr.net/npm/mapv@2.0.12/examples/data/od-xierqi.txt"
)
.then((rs) => {
let data = [];
let timeData = [];
import axios from "axios";
import * as mapv from "mapv";
export default {
name: "Map",
components: {},
data() {
return {};
},
created() {},
mounted() {
this.$nextTick(() => {
const map = this.$baseMap();
axios
.get(
"https://cdn.jsdelivr.net/npm/mapv@2.0.12/examples/data/od-xierqi.txt"
)
.then((rs) => {
let data = [];
let timeData = [];
rs = rs.data.split("\n");
let maxLength = 0;
for (let i = 0; i < rs.length; i++) {
let item = rs[i].split(",");
let coordinates = [];
if (item.length > maxLength) {
maxLength = item.length;
}
for (let j = 0; j < item.length; j += 2) {
let x = (Number(item[j]) / 20037508.34) * 180;
let y = (Number(item[j + 1]) / 20037508.34) * 180;
y =
(180 / Math.PI) *
(2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2);
if (x == 0 || y == NaN) {
continue;
rs = rs.data.split("\n");
let maxLength = 0;
for (let i = 0; i < rs.length; i++) {
let item = rs[i].split(",");
let coordinates = [];
if (item.length > maxLength) {
maxLength = item.length;
}
coordinates.push([x, y]);
timeData.push({
for (let j = 0; j < item.length; j += 2) {
let x = (Number(item[j]) / 20037508.34) * 180;
let y = (Number(item[j + 1]) / 20037508.34) * 180;
y =
(180 / Math.PI) *
(2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2);
if (x == 0 || y == NaN) {
continue;
}
coordinates.push([x, y]);
timeData.push({
geometry: {
type: "Point",
coordinates: [x, y],
},
count: 1,
time: j,
});
}
data.push({
geometry: {
type: "Point",
coordinates: [x, y],
type: "LineString",
coordinates: coordinates,
},
count: 1,
time: j,
});
}
data.push({
geometry: {
type: "LineString",
coordinates: coordinates,
let dataSet = new mapv.DataSet(data);
let options = {
strokeStyle: "rgba(53,57,255,0.5)",
// globalCompositeOperation: 'lighter',
shadowColor: "rgba(53,57,255,0.2)",
shadowBlur: 3,
lineWidth: 3.0,
draw: "simple",
};
let mapvLayer = new mapv.MaptalksLayer(
"mapv1",
dataSet,
options
).addTo(map);
let dataSet2 = new mapv.DataSet(timeData);
let options2 = {
fillStyle: "rgba(255, 250, 250, 0.2)",
globalCompositeOperation: "lighter",
size: 1.5,
animation: {
stepsRange: {
start: 0,
end: 100,
},
trails: 3,
duration: 5,
},
});
}
draw: "simple",
};
let dataSet = new mapv.DataSet(data);
let options = {
strokeStyle: "rgba(53,57,255,0.5)",
// globalCompositeOperation: 'lighter',
shadowColor: "rgba(53,57,255,0.2)",
shadowBlur: 3,
lineWidth: 3.0,
draw: "simple",
};
let mapvLayer = new mapv.MaptalksLayer(
"mapv1",
dataSet,
options
).addTo(map);
let dataSet2 = new mapv.DataSet(timeData);
let options2 = {
fillStyle: "rgba(255, 250, 250, 0.2)",
globalCompositeOperation: "lighter",
size: 1.5,
animation: {
stepsRange: {
start: 0,
end: 100,
},
trails: 3,
duration: 5,
},
draw: "simple",
};
let mapvLayer2 = new mapv.MaptalksLayer(
"mapv2",
dataSet2,
options2
).addTo(map);
});
});
},
methods: {},
};
let mapvLayer2 = new mapv.MaptalksLayer(
"mapv2",
dataSet2,
options2
).addTo(map);
});
});
},
methods: {},
};
</script>
<style lang="scss" scoped>
.map-container {
.container {
width: 100%;
height: calc(100vh - 214px);
.map-container {
.container {
width: 100%;
height: calc(100vh - 214px);
}
}
}
</style>

99
src/views/vab/markdown/index.vue
View File

@ -6,64 +6,63 @@
:key="index"
:label="item.label"
:value="item.value"
>
</el-option>
></el-option>
</el-select>
<div v-html="prettierList"></div>
</div>
</template>
<script>
import marked from "marked";
import "github-markdown-css/github-markdown.css";
import { getList } from "@/api/markdown";
export default {
name: "Markdown",
data() {
return {
listLoading: true,
elementLoadingText: "正在加载...",
options: [
{
value: "0",
label: "Prettier",
},
],
value: "0",
prettierList: null,
};
},
created() {
this.fetchData();
},
mounted() {},
methods: {
handleChange(val) {
this.value = val;
import marked from "marked";
import "github-markdown-css/github-markdown.css";
import { getList } from "@/api/markdown";
export default {
name: "Markdown",
data() {
return {
listLoading: true,
elementLoadingText: "正在加载...",
options: [
{
value: "0",
label: "Prettier",
},
],
value: "0",
prettierList: null,
};
},
created() {
this.fetchData();
},
async fetchData() {
this.listLoading = true;
switch (this.value) {
case "0":
const { data } = await getList();
this.prettierList = marked(data || "", {
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
});
mounted() {},
methods: {
handleChange(val) {
this.value = val;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
switch (this.value) {
case "0":
const { data } = await getList();
this.prettierList = marked(data || "", {
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
});
break;
}
setTimeout(() => {
this.listLoading = false;
}, 500);
break;
}
setTimeout(() => {
this.listLoading = false;
}, 500);
},
},
},
};
};
</script>

44
src/views/vab/markdownEditor/index.vue
View File

@ -23,29 +23,29 @@
</template>
<script>
import VabMarkdownEditor from "@/plugins/vabMarkdownEditor";
import VabMarkdownEditor from "@/plugins/vabMarkdownEditor";
export default {
name: "MarkdownEditor",
components: { VabMarkdownEditor },
data() {
return {
value: "# vue-admin-beautiful",
html: '<h1 id="vue-admin-beautiful">vue-admin-beautiful</h1>',
};
},
methods: {
handleAddText() {
this.$refs.mde.add("\n### 新增加的内容");
export default {
name: "MarkdownEditor",
components: { VabMarkdownEditor },
data() {
return {
value: "# vue-admin-beautiful",
html: '<h1 id="vue-admin-beautiful">vue-admin-beautiful</h1>',
};
},
handleAddImg() {
this.$refs.mde.add(
"\n![](https://chu1204505056.gitee.io/byui-bookmarks/img/ewm.png)"
);
methods: {
handleAddText() {
this.$refs.mde.add("\n### 新增加的内容");
},
handleAddImg() {
this.$refs.mde.add(
"\n![](https://chu1204505056.gitee.io/byui-bookmarks/img/ewm.png)"
);
},
handleShowHtml(html) {
this.html = html;
},
},
handleShowHtml(html) {
this.html = html;
},
},
};
};
</script>

69
src/views/vab/more/index.vue
View File

@ -8,8 +8,8 @@
<el-card>
<div slot="header">
开源版本
<el-button style="float: right; padding: 3px 0;" type="text"
>永久免费 个人/商业使用
<el-button style="float: right; padding: 3px 0;" type="text">
永久免费 个人/商业使用
</el-button>
</div>
<div>
@ -21,8 +21,9 @@
<a
target="_blank"
href="https://github.com/chuzhixin/vue-admin-beautiful"
>支持白嫖，也请给个star</a
>
支持白嫖，也请给个star
</a>
</li>
<li>
提供讨论群专属文档，QQ群 972435319
@ -36,9 +37,9 @@
<el-card>
<div slot="header">
VIP群
<el-button style="float: right; padding: 3px 0;" type="text"
>￥100</el-button
>
<el-button style="float: right; padding: 3px 0;" type="text">
￥100
</el-button>
</div>
<div>
<ul>
@ -56,9 +57,9 @@
<el-card>
<div slot="header">
商业用途 完全自定义版权
<el-button style="float: right; padding: 3px 0;" type="text"
>￥299</el-button
>
<el-button style="float: right; padding: 3px 0;" type="text">
￥299
</el-button>
</div>
<div>
<ul>
@ -78,38 +79,38 @@
</template>
<script>
export default {
name: "More",
components: {},
data() {
return { nodeEnv: process.env.NODE_ENV };
},
created() {},
mounted() {},
methods: {},
};
export default {
name: "More",
components: {},
data() {
return { nodeEnv: process.env.NODE_ENV };
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.more-container {
::v-deep {
.el-card__body {
> div {
min-height: 70vh;
padding: 20px;
.more-container {
::v-deep {
.el-card__body {
> div {
min-height: 70vh;
padding: 20px;
> ul {
> li {
line-height: 30px;
> ul {
> li {
line-height: 30px;
}
}
}
> img {
display: block;
margin: 40px auto;
border: 1px solid #dedede;
> img {
display: block;
margin: 40px auto;
border: 1px solid #dedede;
}
}
}
}
}
}
</style>

12
src/views/vab/nested/menu1/menu1-1/index.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="menu1-1-container">
<el-alert :closable="false" title="嵌套路由 1-1" type="success">
<router-view
/></el-alert>
<router-view />
</el-alert>
</div>
</template>
<style lang="scss" scoped>
[class*="-container"] {
padding: 15px;
background: $base-color-white;
}
[class*="-container"] {
padding: 15px;
background: $base-color-white;
}
</style>

8
src/views/vab/nested/menu1/menu1-1/menu1-1-1/index.vue
View File

@ -8,8 +8,8 @@
</div>
</template>
<style lang="scss" scoped>
[class*="-container"] {
padding: 15px;
background: $base-color-white;
}
[class*="-container"] {
padding: 15px;
background: $base-color-white;
}
</style>

87
src/views/vab/permissions/index.vue
View File

@ -14,8 +14,8 @@
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleChangePermission"
>切换权限
<el-button type="primary" @click="handleChangePermission">
切换权限
</el-button>
</el-form-item>
<el-form-item label="当前账号拥有的权限">
@ -119,47 +119,50 @@
</template>
<script>
import { mapGetters } from "vuex";
import { tokenTableName } from "@/config/settings";
import { getRouterList } from "@/api/router";
import JsonEditor from "@/components/JsonEditor";
import { mapGetters } from "vuex";
import { tokenTableName } from "@/config/settings";
import { getRouterList } from "@/api/router";
import JsonEditor from "@/components/JsonEditor";
export default {
name: "Permissions",
components: {
JsonEditor,
},
data() {
return {
form: {
account: "",
export default {
name: "Permissions",
components: {
JsonEditor,
},
data() {
return {
form: {
account: "",
},
tableData: [],
res: [],
};
},
computed: {
...mapGetters({
username: "user/username",
permissions: "user/permissions",
}),
},
created() {
this.fetchData();
},
mounted() {
this.form.account = this.username;
},
methods: {
handleChangePermission() {
localStorage.setItem(
tokenTableName,
`${this.form.account}-accessToken`
);
location.reload();
},
async fetchData() {
const res = await getRouterList();
this.tableData = res.data;
this.res = res;
},
tableData: [],
res: [],
};
},
computed: {
...mapGetters({
username: "user/username",
permissions: "user/permissions",
}),
},
created() {
this.fetchData();
},
mounted() {
this.form.account = this.username;
},
methods: {
handleChangePermission() {
localStorage.setItem(tokenTableName, `${this.form.account}-accessToken`);
location.reload();
},
async fetchData() {
const res = await getRouterList();
this.tableData = res.data;
this.res = res;
},
},
};
};
</script>

76
src/views/vab/player/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="player-container">
<el-divider content-position="left"
>视频地址采用cdn加速服务，开发时需部署到到本地，使用方法可查看群文档
<el-divider content-position="left">
视频地址采用cdn加速服务，开发时需部署到到本地，使用方法可查看群文档
</el-divider>
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
@ -33,41 +33,41 @@
</template>
<script>
import { VabPlayerMp4, VabPlayerHls } from "@/plugins/vabPlayer.js";
import { VabPlayerMp4, VabPlayerHls } from "@/plugins/vabPlayer.js";
export default {
name: "Player",
components: {
VabPlayerMp4,
VabPlayerHls,
},
data() {
return {
config1: {
id: "mse1",
url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.mp4",
volume: 1,
autoplay: false,
},
Player1: null,
config2: {
id: "mse2",
url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.m3u8",
volume: 1,
autoplay: false,
},
Player2: null,
config3: {
id: "mse3",
url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.flv",
volume: 1,
autoplay: false,
},
Player3: null,
};
},
created() {},
mounted() {},
methods: {},
};
export default {
name: "Player",
components: {
VabPlayerMp4,
VabPlayerHls,
},
data() {
return {
config1: {
id: "mse1",
url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.mp4",
volume: 1,
autoplay: false,
},
Player1: null,
config2: {
id: "mse2",
url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.m3u8",
volume: 1,
autoplay: false,
},
Player2: null,
config3: {
id: "mse3",
url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.flv",
volume: 1,
autoplay: false,
},
Player3: null,
};
},
created() {},
mounted() {},
methods: {},
};
</script>

46
src/views/vab/qrCode/index.vue
View File

@ -14,33 +14,33 @@
</template>
<script>
import VabQrCode from "@/components/VabQrCode";
import VabQrCode from "@/components/VabQrCode";
export default {
name: "QrCode",
components: {
VabQrCode,
},
data() {
return {
url: "https://www.baidu.com",
imagePath: require("@/assets/qr_logo/lqr_logo.png"),
};
},
created() {},
mounted() {},
methods: {},
};
export default {
name: "QrCode",
components: {
VabQrCode,
},
data() {
return {
url: "https://www.baidu.com",
imagePath: require("@/assets/qr_logo/lqr_logo.png"),
};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.qr-code-container {
::v-deep {
.el-card__body {
display: flex;
align-content: center;
justify-content: center;
.qr-code-container {
::v-deep {
.el-card__body {
display: flex;
align-content: center;
justify-content: center;
}
}
}
}
</style>

113
src/views/vab/smallComponents/index.vue
View File

@ -20,7 +20,8 @@
style="float: right; padding: 3px 0;"
type="text"
@click="handleProfile"
>重载
>
重载
</el-button>
</div>
<vab-profile
@ -43,67 +44,67 @@
</template>
<script>
import VabSnow from "@/components/VabSnow";
import VabProfile from "@/components/VabProfile";
import VabCharge from "@/components/VabCharge";
import VabSnow from "@/components/VabSnow";
import VabProfile from "@/components/VabProfile";
import VabCharge from "@/components/VabCharge";
export default {
name: "Sticky",
components: {
VabSnow,
VabProfile,
VabCharge,
},
data() {
return {
profileShow: true,
faultTextShow: true,
solidTextShow: true,
startVal: 0,
endVal: 20,
timeInterval: null,
};
},
mounted() {
this.handleProfile();
this.handleSolidText();
this.timeInterval = setInterval(() => {
if (this.endVal < 100) {
this.startVal = this.endVal;
this.endVal++;
export default {
name: "Sticky",
components: {
VabSnow,
VabProfile,
VabCharge,
},
data() {
return {
profileShow: true,
faultTextShow: true,
solidTextShow: true,
startVal: 0,
endVal: 20,
timeInterval: null,
};
},
mounted() {
this.handleProfile();
this.handleSolidText();
this.timeInterval = setInterval(() => {
if (this.endVal < 100) {
this.startVal = this.endVal;
this.endVal++;
}
}, 5000);
},
beforeDestroy() {
if (this.clearInterval) {
clearInterval(this.timeInterval);
}
}, 5000);
},
beforeDestroy() {
if (this.clearInterval) {
clearInterval(this.timeInterval);
}
},
methods: {
handleProfile() {
this.profileShow = false;
setTimeout(() => {
this.profileShow = true;
});
},
handleSolidText() {
this.solidTextShow = false;
setTimeout(() => {
this.solidTextShow = true;
});
methods: {
handleProfile() {
this.profileShow = false;
setTimeout(() => {
this.profileShow = true;
});
},
handleSolidText() {
this.solidTextShow = false;
setTimeout(() => {
this.solidTextShow = true;
});
},
},
},
};
};
</script>
<style lang="scss" scoped>
.small-components-container {
::v-deep {
.el-card__body {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 430px;
.small-components-container {
::v-deep {
.el-card__body {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 430px;
}
}
}
}
</style>

52
src/views/vab/sticky/index.vue
View File

@ -280,35 +280,35 @@
</template>
<script>
import VabSticky from "@/components/VabSticky";
import VabSticky from "@/components/VabSticky";
export default {
name: "Sticky",
components: { VabSticky },
data() {
return {
time: "",
url: "",
platforms: ["a-platform"],
platformsOptions: [
{ key: "a-platform", name: "platformA" },
{ key: "b-platform", name: "platformB" },
{ key: "c-platform", name: "platformC" },
],
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
export default {
name: "Sticky",
components: { VabSticky },
data() {
return {
time: "",
url: "",
platforms: ["a-platform"],
platformsOptions: [
{ key: "a-platform", name: "platformA" },
{ key: "b-platform", name: "platformB" },
{ key: "c-platform", name: "platformC" },
],
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
},
};
},
};
};
},
};
</script>
<style lang="scss" scoped>
.sticky-container {
div {
height: 40px;
line-height: 40px;
.sticky-container {
div {
height: 40px;
line-height: 40px;
}
}
}
</style>

90
src/views/vab/table/components/TableEdit.vue
View File

@ -21,55 +21,55 @@
</template>
<script>
import { doEdit } from "@/api/table";
import { doEdit } from "@/api/table";
export default {
name: "TableEdit",
data() {
return {
form: {
export default {
name: "TableEdit",
data() {
return {
form: {
title: "",
author: "",
},
rules: {
title: [{ required: true, trigger: "blur", message: "请输入标题" }],
author: [{ required: true, trigger: "blur", message: "请输入作者" }],
},
title: "",
author: "",
},
rules: {
title: [{ required: true, trigger: "blur", message: "请输入标题" }],
author: [{ required: true, trigger: "blur", message: "请输入作者" }],
},
title: "",
dialogFormVisible: false,
};
},
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
this.title = "编辑";
this.form = Object.assign({}, row);
}
this.dialogFormVisible = true;
dialogFormVisible: false,
};
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
this.$emit("fetchData");
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$refs["form"].resetFields();
this.dialogFormVisible = false;
this.$emit("fetchData");
this.form = this.$options.data().form;
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
return false;
this.title = "编辑";
this.form = Object.assign({}, row);
}
});
this.dialogFormVisible = true;
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
this.$emit("fetchData");
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$refs["form"].resetFields();
this.dialogFormVisible = false;
this.$emit("fetchData");
this.form = this.$options.data().form;
} else {
return false;
}
});
},
},
},
};
};
</script>

261
src/views/vab/table/index.vue
View File

@ -2,11 +2,11 @@
<div class="table-container">
<vab-query-form>
<vab-query-form-left-panel>
<el-button icon="el-icon-plus" type="primary" @click="handleAdd"
>添加
<el-button icon="el-icon-plus" type="primary" @click="handleAdd">
添加
</el-button>
<el-button icon="el-icon-delete" type="danger" @click="handleDelete"
>删除
<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
删除
</el-button>
<el-button type="primary" @click="testMessage">baseMessage</el-button>
<el-button type="primary" @click="testALert">baseAlert</el-button>
@ -29,7 +29,8 @@
type="primary"
native-type="submit"
@click="handleQuery"
>查询
>
查询
</el-button>
</el-form-item>
</el-form>
@ -87,8 +88,8 @@
effect="dark"
placement="top-start"
>
<el-tag :type="scope.row.status | statusFilter"
>{{ scope.row.status }}
<el-tag :type="scope.row.status | statusFilter">
{{ scope.row.status }}
</el-tag>
</el-tooltip>
</template>
@ -106,11 +107,9 @@
fixed="right"
>
<template slot-scope="scope">
<el-button type="text" @click="handleEdit(scope.row)"
>编辑
</el-button>
<el-button type="text" @click="handleDelete(scope.row)"
>删除
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">
删除
</el-button>
</template>
</el-table-column>
@ -129,137 +128,137 @@
</template>
<script>
import { getList, doDelete } from "@/api/table";
import TableEdit from "./components/TableEdit";
export default {
name: "ComprehensiveTable",
components: {
TableEdit,
},
filters: {
statusFilter(status) {
const statusMap = {
published: "success",
draft: "gray",
deleted: "danger",
};
return statusMap[status];
import { getList, doDelete } from "@/api/table";
import TableEdit from "./components/TableEdit";
export default {
name: "ComprehensiveTable",
components: {
TableEdit,
},
},
data() {
return {
imgShow: true,
list: [],
imageList: [],
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
selectRows: "",
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 20,
title: "",
filters: {
statusFilter(status) {
const statusMap = {
published: "success",
draft: "gray",
deleted: "danger",
};
return statusMap[status];
},
};
},
created() {
this.fetchData();
},
beforeDestroy() {},
mounted() {},
methods: {
tableSortChange() {
const imageList = [];
this.$refs.tableSort.tableData.forEach((item, index) => {
imageList.push(item.img);
});
this.imageList = imageList;
},
setSelectRows(val) {
this.selectRows = val;
data() {
return {
imgShow: true,
list: [],
imageList: [],
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
selectRows: "",
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 20,
title: "",
},
};
},
handleAdd() {
this.$refs["edit"].showEdit();
created() {
this.fetchData();
},
handleEdit(row) {
this.$refs["edit"].showEdit(row);
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
beforeDestroy() {},
mounted() {},
methods: {
tableSortChange() {
const imageList = [];
this.$refs.tableSort.tableData.forEach((item, index) => {
imageList.push(item.img);
});
} else {
if (this.selectRows.length > 0) {
const ids = this.selectRows.map((item) => item.id).join();
this.$baseConfirm("你确定要删除选中项吗", null, async () => {
const { msg } = await doDelete({ ids: ids });
this.imageList = imageList;
},
setSelectRows(val) {
this.selectRows = val;
},
handleAdd() {
this.$refs["edit"].showEdit();
},
handleEdit(row) {
this.$refs["edit"].showEdit(row);
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
this.$baseMessage("未选中任何行", "error");
return false;
if (this.selectRows.length > 0) {
const ids = this.selectRows.map((item) => item.id).join();
this.$baseConfirm("你确定要删除选中项吗", null, async () => {
const { msg } = await doDelete({ ids: ids });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
this.$baseMessage("未选中任何行", "error");
return false;
}
}
}
},
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
handleQuery() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
const imageList = [];
data.forEach((item, index) => {
imageList.push(item.img);
});
this.imageList = imageList;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 500);
},
testMessage() {
this.$baseMessage("test1", "success");
},
testALert() {
this.$baseAlert("11");
this.$baseAlert("11", "自定义标题", () => {
/* 可以写回调; */
});
this.$baseAlert("11", null, () => {
/* 可以写回调; */
});
},
testConfirm() {
this.$baseConfirm(
"你确定要执行该操作?",
null,
() => {
},
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
handleQuery() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
const imageList = [];
data.forEach((item, index) => {
imageList.push(item.img);
});
this.imageList = imageList;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 500);
},
testMessage() {
this.$baseMessage("test1", "success");
},
testALert() {
this.$baseAlert("11");
this.$baseAlert("11", "自定义标题", () => {
/* 可以写回调; */
},
() => {
});
this.$baseAlert("11", null, () => {
/* 可以写回调; */
}
);
});
},
testConfirm() {
this.$baseConfirm(
"你确定要执行该操作?",
null,
() => {
/* 可以写回调; */
},
() => {
/* 可以写回调; */
}
);
},
testNotify() {
this.$baseNotify("测试消息提示", "test", "success", "bottom-right");
},
},
testNotify() {
this.$baseNotify("测试消息提示", "test", "success", "bottom-right");
},
},
};
};
</script>

74
src/views/vab/table/inlineEditTable.vue
View File

@ -66,44 +66,44 @@
</template>
<script>
import { getList } from "@/api/table";
import { getList } from "@/api/table";
export default {
name: "InlineEditTable",
data() {
return {
list: null,
listLoading: true,
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 20,
title: "",
export default {
name: "InlineEditTable",
data() {
return {
list: null,
listLoading: true,
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 20,
title: "",
},
};
},
created() {
this.getList();
},
methods: {
async getList() {
this.listLoading = true;
const { data } = await getList(this.queryForm);
this.list = data.map((v) => {
this.$set(v, "edit", false);
v.originalTitle = v.title;
return v;
});
this.listLoading = false;
},
cancelEdit(row) {
row.title = row.originalTitle;
row.edit = false;
},
confirmEdit(row) {
row.edit = false;
row.originalTitle = row.title;
},
};
},
created() {
this.getList();
},
methods: {
async getList() {
this.listLoading = true;
const { data } = await getList(this.queryForm);
this.list = data.map((v) => {
this.$set(v, "edit", false);
v.originalTitle = v.title;
return v;
});
this.listLoading = false;
},
cancelEdit(row) {
row.title = row.originalTitle;
row.edit = false;
},
confirmEdit(row) {
row.edit = false;
row.originalTitle = row.title;
},
},
};
};
</script>

525
src/views/vab/tree/index.vue
View File

@ -32,21 +32,24 @@
class="vab-tree-btn"
title="添加"
@click="() => append(node, data, 0)"
><i class="el-icon-plus"></i
></a>
>
<i class="el-icon-plus"></i>
</a>
<a
class="vab-tree-btn"
title="编辑"
@click="() => edit(node, data, 1)"
><i class="el-icon-edit"></i
></a>
>
<i class="el-icon-edit"></i>
</a>
<a
v-if="node.data.rank !== 1"
class="vab-tree-btn"
title="刪除"
@click="() => remove(node, data)"
><i class="el-icon-delete"></i
></a>
>
<i class="el-icon-delete"></i>
</a>
</span>
</span>
</el-tree>
@ -85,9 +88,9 @@
>
<i class="el-icon-plus"></i>
</a>
<a class="vab-tree-btn" title="编辑"
><i class="el-icon-edit"></i
></a>
<a class="vab-tree-btn" title="编辑">
<i class="el-icon-edit"></i>
</a>
<a
v-if="node.data.rank !== 1"
class="vab-tree-btn"
@ -119,12 +122,16 @@
</span>
<span class="vab-tree-options">
<!-- <a v-if="node.data.rank !== 4" class="vab-tree-btn" title="添加""><i class="el-icon-plus"></i></a> -->
<a class="vab-tree-btn" title="编辑"
><i class="el-icon-edit"></i
></a>
<a v-if="node.data.rank !== 1" class="vab-tree-btn" title="刪除"
><i class="el-icon-delete"></i
></a>
<a class="vab-tree-btn" title="编辑">
<i class="el-icon-edit"></i>
</a>
<a
v-if="node.data.rank !== 1"
class="vab-tree-btn"
title="刪除"
>
<i class="el-icon-delete"></i>
</a>
</span>
</span>
</el-tree>
@ -214,258 +221,258 @@
</template>
<script>
import { getTreeList } from "@/api/tree";
import { getTreeList } from "@/api/tree";
export default {
name: "Tree",
data() {
return {
dialogTitle: "添加节点",
treeFlag: 0,
treeDialogVisible: false,
treeForm: {
id: "",
name: "",
},
checkNodeKeys: [],
filterText: "",
data2: [],
defaultProps: {
children: "children",
label: "name",
},
defaultExpendedKeys: [],
defaultCheckedKeys: [],
loading: true,
keyW: "",
filterDevLlist: [],
isShow: false,
updateTree: true,
/* 单选树-多选树---------开始 */
selectLevel: 4, // 树可选叶子level等级
singleSelectTreeVal: "", //单选树默认label值
singleSelectTreeKey: "", //单选树默认key值
selectTreeData: [], //单选树的值
selectTreeDefaultSelectedKeys: [], //单选树默认展开的key值数组
selectTreeDefaultProps: {
children: "children",
label: "name",
},
multipleSelectTreeVal: [], //多选树默认label值
multipleSelectTreeKey: "", //多选树默认key值
/* 单选树-多选树---------结束 */
};
},
watch: {
filterText(val) {
this.$refs.demoTree.filter(val);
export default {
name: "Tree",
data() {
return {
dialogTitle: "添加节点",
treeFlag: 0,
treeDialogVisible: false,
treeForm: {
id: "",
name: "",
},
checkNodeKeys: [],
filterText: "",
data2: [],
defaultProps: {
children: "children",
label: "name",
},
defaultExpendedKeys: [],
defaultCheckedKeys: [],
loading: true,
keyW: "",
filterDevLlist: [],
isShow: false,
updateTree: true,
/* 单选树-多选树---------开始 */
selectLevel: 4, // 树可选叶子level等级
singleSelectTreeVal: "", //单选树默认label值
singleSelectTreeKey: "", //单选树默认key值
selectTreeData: [], //单选树的值
selectTreeDefaultSelectedKeys: [], //单选树默认展开的key值数组
selectTreeDefaultProps: {
children: "children",
label: "name",
},
multipleSelectTreeVal: [], //多选树默认label值
multipleSelectTreeKey: "", //多选树默认key值
/* 单选树-多选树---------结束 */
};
},
},
mounted() {
this.$nextTick(() => {
this.getTreeListFuc(1);
this.setCheckedKeys();
// 初始化单选树
this.initSingleTree("single");
// 初始化多选树
this.initSingleTree("multiple");
});
},
methods: {
// 树level小于n级展开方法
openTree(treeData, n) {
const each = (data) => {
data.forEach((e) => {
if (e.rank <= n) {
this.defaultExpendedKeys.push(e.id);
}
if (e.children.length > 0) {
each(e.children);
watch: {
filterText(val) {
this.$refs.demoTree.filter(val);
},
},
mounted() {
this.$nextTick(() => {
this.getTreeListFuc(1);
this.setCheckedKeys();
// 初始化单选树
this.initSingleTree("single");
// 初始化多选树
this.initSingleTree("multiple");
});
},
methods: {
// 树level小于n级展开方法
openTree(treeData, n) {
const each = (data) => {
data.forEach((e) => {
if (e.rank <= n) {
this.defaultExpendedKeys.push(e.id);
}
if (e.children.length > 0) {
each(e.children);
}
});
};
each(treeData);
},
// 获取tree数据
async getTreeListFuc(flag) {
const { data } = await getTreeList();
this.data2 = data;
if (flag) {
this.openTree(this.data2, 2);
}
},
// 节点过滤操作
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
// 添加节点操作
append(node, data, flag) {
this.treeFlag = flag;
this.dialogTitle = "添加节点";
this.treeForm = {
id: "",
name: "",
};
this.treeDialogVisible = true;
},
// 编辑节点操作
edit(node, data, flag) {
this.treeFlag = flag;
this.dialogTitle = "编辑节点";
this.treeForm = {
id: data.id,
name: data.name,
};
this.treeDialogVisible = true;
},
// 删除节点操作
remove(node, data) {
this.$baseConfirm("你确定要删除该节点?", null, async () => {
const { msg } = getTreeList();
this.$baseMessage(msg, "success");
this.getTreeListFuc(0);
});
},
// 保存添加和编辑
saveTree() {
this.$refs.treeForm.validate(async (valid) => {
if (valid) {
const { msg } = await getTreeList();
this.$baseMessage(msg, "success");
this.treeDialogVisible = false;
this.getTreeListFuc(0);
}
});
};
each(treeData);
},
// 获取tree数据
async getTreeListFuc(flag) {
const { data } = await getTreeList();
this.data2 = data;
if (flag) {
this.openTree(this.data2, 2);
}
},
// 节点过滤操作
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
// 添加节点操作
append(node, data, flag) {
this.treeFlag = flag;
this.dialogTitle = "添加节点";
this.treeForm = {
id: "",
name: "",
};
this.treeDialogVisible = true;
},
// 编辑节点操作
edit(node, data, flag) {
this.treeFlag = flag;
this.dialogTitle = "编辑节点";
this.treeForm = {
id: data.id,
name: data.name,
};
this.treeDialogVisible = true;
},
// 删除节点操作
remove(node, data) {
this.$baseConfirm("你确定要删除该节点?", null, async () => {
const { msg } = getTreeList();
this.$baseMessage(msg, "success");
this.getTreeListFuc(0);
});
},
// 保存添加和编辑
saveTree() {
this.$refs.treeForm.validate(async (valid) => {
if (valid) {
const { msg } = await getTreeList();
this.$baseMessage(msg, "success");
this.treeDialogVisible = false;
this.getTreeListFuc(0);
}
});
},
// 设置节点选中
setCheckedKeys() {
this.$refs.demoTree.setCheckedKeys([1]);
},
// 点击叶子节点
nodeClick(data, node, el) {},
// 节点选中操作
checkNode(data, node, el) {
this.checkNodeKeys = node.checkedKeys;
},
// 节点展开操作
nodeExpand(data, node, el) {
this.defaultExpendedKeys.push(data.id);
},
// 节点关闭操作
nodeCollapse(data, node, el) {
this.defaultExpendedKeys.splice(
this.defaultExpendedKeys.findIndex((item) => item.id === data.id),
1
);
},
async loadNode(node, resolve) {
if (node.level === 0) {
const { data } = await getTreeList();
this.loading = false;
return resolve(data);
} else {
const { data } = await getTreeList();
return resolve(res.data);
}
},
//懒加载树输入框筛选方法
async showTreeList(value) {
if (typeof value === "string") {
this.keyW = value.trim();
}
if (this.keyW.length !== 0) {
// 请求后台返回查询结果
let treeOption = {};
treeOption = {
keyWord: this.keyW,
};
const { data } = await getTreeList();
this.filterDevLlist = data;
this.isShow = true;
} else {
this.isShow = false;
}
},
/* 单选/多选树方法-------------------开始 */
// 初始化单选树的值
async initSingleTree(treeType) {
const { data } = await getTreeList();
this.selectTreeData = data;
this.$nextTick(() => {
this.selectTreeDefaultSelectedKeys = this.singleSelectTreeKey.split(
","
); // 设置默认展开
if (treeType == "single") {
//单选树
this.$refs.singleSelectTree.setCurrentKey(this.singleSelectTreeKey); // 设置默认选中
},
// 设置节点选中
setCheckedKeys() {
this.$refs.demoTree.setCheckedKeys([1]);
},
// 点击叶子节点
nodeClick(data, node, el) {},
// 节点选中操作
checkNode(data, node, el) {
this.checkNodeKeys = node.checkedKeys;
},
// 节点展开操作
nodeExpand(data, node, el) {
this.defaultExpendedKeys.push(data.id);
},
// 节点关闭操作
nodeCollapse(data, node, el) {
this.defaultExpendedKeys.splice(
this.defaultExpendedKeys.findIndex((item) => item.id === data.id),
1
);
},
async loadNode(node, resolve) {
if (node.level === 0) {
const { data } = await getTreeList();
this.loading = false;
return resolve(data);
} else {
// 多选树
this.$refs.multipleSelectTree.setCheckedKeys(
this.selectTreeDefaultSelectedKeys
);
const { data } = await getTreeList();
return resolve(res.data);
}
});
},
// 清除单选树选中
selectTreeClearHandle(type) {
this.selectTreeDefaultSelectedKeys = [];
this.clearSelected();
if (type == "single") {
this.singleSelectTreeVal = "";
this.singleSelectTreeKey = "";
this.$refs.singleSelectTree.setCurrentKey(""); // 设置默认选中
} else {
this.multipleSelectTreeVal = [];
this.multipleSelectTreeKey = "";
this.$refs.multipleSelectTree.setCheckedKeys([]);
}
},
/* 清空选中样式 */
clearSelected() {
const allNode = document.querySelectorAll(
"#singleSelectTree .el-tree-node"
);
allNode.forEach((element) => element.classList.remove("is-current"));
},
// select多选时移除某项操作
removeSelectTreeTag(val) {
const stack = JSON.parse(JSON.stringify(this.selectTreeData));
while (stack.length) {
const curr = stack.shift();
if (curr.name == val) {
return this.$refs.multipleSelectTree.setChecked(curr.id, false);
},
//懒加载树输入框筛选方法
async showTreeList(value) {
if (typeof value === "string") {
this.keyW = value.trim();
}
if (curr.children && curr.children.length) {
stack.unshift(...curr.children);
if (this.keyW.length !== 0) {
// 请求后台返回查询结果
let treeOption = {};
treeOption = {
keyWord: this.keyW,
};
const { data } = await getTreeList();
this.filterDevLlist = data;
this.isShow = true;
} else {
this.isShow = false;
}
}
},
changeMultipleSelectTreeHandle(val) {},
// 点击叶子节点
selectTreeNodeClick(data, node, el) {
if (data.rank >= this.selectLevel) {
this.singleSelectTreeVal = data.name;
this.singleSelectTreeKey = data.id;
this.$refs.singleTree.blur();
}
},
// 节点选中操作
multipleSelectTreeCheckNode(data, node, el) {
const checkedNodes = this.$refs.multipleSelectTree.getCheckedNodes();
const keyArr = [];
const valueArr = [];
checkedNodes.forEach((item) => {
if (item.rank >= this.selectLevel) {
keyArr.push(item.id);
valueArr.push(item.name);
},
/* 单选/多选树方法-------------------开始 */
// 初始化单选树的值
async initSingleTree(treeType) {
const { data } = await getTreeList();
this.selectTreeData = data;
this.$nextTick(() => {
this.selectTreeDefaultSelectedKeys = this.singleSelectTreeKey.split(
","
); // 设置默认展开
if (treeType == "single") {
//单选树
this.$refs.singleSelectTree.setCurrentKey(this.singleSelectTreeKey); // 设置默认选中
} else {
// 多选树
this.$refs.multipleSelectTree.setCheckedKeys(
this.selectTreeDefaultSelectedKeys
);
}
});
},
// 清除单选树选中
selectTreeClearHandle(type) {
this.selectTreeDefaultSelectedKeys = [];
this.clearSelected();
if (type == "single") {
this.singleSelectTreeVal = "";
this.singleSelectTreeKey = "";
this.$refs.singleSelectTree.setCurrentKey(""); // 设置默认选中
} else {
this.multipleSelectTreeVal = [];
this.multipleSelectTreeKey = "";
this.$refs.multipleSelectTree.setCheckedKeys([]);
}
});
this.multipleSelectTreeVal = valueArr;
this.multipleSelectTreeKey = keyArr.join(",");
},
/* 清空选中样式 */
clearSelected() {
const allNode = document.querySelectorAll(
"#singleSelectTree .el-tree-node"
);
allNode.forEach((element) => element.classList.remove("is-current"));
},
// select多选时移除某项操作
removeSelectTreeTag(val) {
const stack = JSON.parse(JSON.stringify(this.selectTreeData));
while (stack.length) {
const curr = stack.shift();
if (curr.name == val) {
return this.$refs.multipleSelectTree.setChecked(curr.id, false);
}
if (curr.children && curr.children.length) {
stack.unshift(...curr.children);
}
}
},
changeMultipleSelectTreeHandle(val) {},
// 点击叶子节点
selectTreeNodeClick(data, node, el) {
if (data.rank >= this.selectLevel) {
this.singleSelectTreeVal = data.name;
this.singleSelectTreeKey = data.id;
this.$refs.singleTree.blur();
}
},
// 节点选中操作
multipleSelectTreeCheckNode(data, node, el) {
const checkedNodes = this.$refs.multipleSelectTree.getCheckedNodes();
const keyArr = [];
const valueArr = [];
checkedNodes.forEach((item) => {
if (item.rank >= this.selectLevel) {
keyArr.push(item.id);
valueArr.push(item.name);
}
});
this.multipleSelectTreeVal = valueArr;
this.multipleSelectTreeKey = keyArr.join(",");
},
/* 单选/多选树方法-------------------结束 */
},
/* 单选/多选树方法-------------------结束 */
},
};
};
</script>

34
src/views/vab/upload/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="upload-container">
<el-divider content-position="left">演示环境可能无法模拟上传 </el-divider>
<el-divider content-position="left">演示环境可能无法模拟上传</el-divider>
<vab-upload
ref="vabUpload"
url="/upload"
@ -8,27 +8,27 @@
:limit="50"
:size="2"
></vab-upload>
<el-button type="primary" @click="handleShow({ key: 'value' })"
>模拟上传
<el-button type="primary" @click="handleShow({ key: 'value' })">
模拟上传
</el-button>
</div>
</template>
<script>
import VabUpload from "@/components/VabUpload";
import VabUpload from "@/components/VabUpload";
export default {
name: "Upload",
components: {
VabUpload,
},
data() {
return {};
},
methods: {
handleShow(data) {
this.$refs["vabUpload"].handleShow(data);
export default {
name: "Upload",
components: {
VabUpload,
},
},
};
data() {
return {};
},
methods: {
handleShow(data) {
this.$refs["vabUpload"].handleShow(data);
},
},
};
</script>

36
src/views/vab/verify/index.vue
View File

@ -12,24 +12,24 @@
</template>
<script>
import VabVerify from "@/plugins/vabVerify";
export default {
name: "Verify",
components: { VabVerify },
data() {
return {
text: "向右滑动",
};
},
created() {},
mounted() {},
methods: {
handleSuccess() {
this.$baseMessage("校验成功", "success");
import VabVerify from "@/plugins/vabVerify";
export default {
name: "Verify",
components: { VabVerify },
data() {
return {
text: "向右滑动",
};
},
handleError() {
this.$baseMessage("校验失败", "error");
created() {},
mounted() {},
methods: {
handleSuccess() {
this.$baseMessage("校验成功", "success");
},
handleError() {
this.$baseMessage("校验失败", "error");
},
},
},
};
};
</script>

114
src/views/vab/webSocket/index.vue
View File

@ -14,7 +14,7 @@
<el-input v-model="form.message"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">发送消息 </el-button>
<el-button type="primary" @click="submit">发送消息</el-button>
</el-form-item>
<el-form-item label="返回信息汇总">
{{ data }}
@ -26,62 +26,62 @@
</template>
<script>
export default {
name: "WebSocket",
components: {},
data() {
return {
url: "ws://123.207.136.134:9010/ajaxchattest",
webSocket: null,
data: [],
status: "",
form: { message: null },
rules: {
message: [{ required: true, message: "请输入消息", trigger: "blur" }],
export default {
name: "WebSocket",
components: {},
data() {
return {
url: "ws://123.207.136.134:9010/ajaxchattest",
webSocket: null,
data: [],
status: "",
form: { message: null },
rules: {
message: [{ required: true, message: "请输入消息", trigger: "blur" }],
},
};
},
created() {
this.init();
},
destroyed() {
this.webSocket.close();
},
methods: {
submit() {
this.$refs["form"].validate((valid) => {
if (valid) {
this.send(this.form.message);
} else {
return false;
}
});
},
init() {
const wsuri = this.url;
this.webSocket = new WebSocket(wsuri);
this.webSocket.onmessage = this.onmessage;
this.webSocket.onopen = this.onopen;
this.webSocket.onerror = this.onerror;
this.webSocket.onclose = this.onclose;
},
onopen() {
this.status = "成功";
},
onerror() {
this.status = "失败";
this.initWebSocket();
},
onmessage({ data }) {
//截掉测试webSocket地址广告
this.data.push(data.substring(0, data.length - 66));
},
send(Data) {
this.webSocket.send(Data);
},
onclose(e) {
this.status = "断开";
},
};
},
created() {
this.init();
},
destroyed() {
this.webSocket.close();
},
methods: {
submit() {
this.$refs["form"].validate((valid) => {
if (valid) {
this.send(this.form.message);
} else {
return false;
}
});
},
init() {
const wsuri = this.url;
this.webSocket = new WebSocket(wsuri);
this.webSocket.onmessage = this.onmessage;
this.webSocket.onopen = this.onopen;
this.webSocket.onerror = this.onerror;
this.webSocket.onclose = this.onclose;
},
onopen() {
this.status = "成功";
},
onerror() {
this.status = "失败";
this.initWebSocket();
},
onmessage({ data }) {
//截掉测试webSocket地址广告
this.data.push(data.substring(0, data.length - 66));
},
send(Data) {
this.webSocket.send(Data);
},
onclose(e) {
this.status = "断开";
},
},
};
};
</script>