JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-11-04 05:12:09 +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, bracketSpacing: true,
jsxBracketSameLine: false, jsxBracketSameLine: false,
arrowParens: "always", arrowParens: "always",
vueIndentScriptAndStyle: false, htmlWhitespaceSensitivity: "ignore",
vueIndentScriptAndStyle: true,
endOfLine: "lf", endOfLine: "lf",
}; };

8
src/App.vue
View File

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

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

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

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

@ -31,168 +31,168 @@
</template> </template>
<script> <script>
export default { export default {
name: "SelectTreeTemplate", name: "SelectTreeTemplate",
props: { props: {
/* 树形结构数据 */ /* 树形结构数据 */
treeOptions: { treeOptions: {
type: Array, type: Array,
default: () => { default: () => {
return []; 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;
},
}, },
}, },
/* 单选/多选 */ data() {
selectType: { return {
type: String, defaultProps: {
default: () => { children: "children",
return "single"; 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 */ mounted() {
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() {
const that = this; const that = this;
if (that.selectedKey) { this.initTree();
that.defaultSelectedKeys = that.selectedKey.split(","); // 设置默认展开 },
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") { if (that.selectType == "single") {
that.$refs.treeOption.setCurrentKey(that.selectedKey); // 设置默认选中 that.$refs.treeOption.setCurrentKey(""); // 设置默认选中
} else { } else {
that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys); that.$refs.treeOption.setCheckedKeys([]);
} }
} },
}, /* 清空选中样式 */
// 清除选中 clearSelected() {
clearHandle() { const allNode = document.querySelectorAll("#treeOption .el-tree-node");
const that = this; allNode.forEach((element) => element.classList.remove("is-current"));
this.selectValue = ""; },
this.selectKey = ""; // select多选时移除某项操作
this.defaultSelectedKeys = []; removeTag(val) {
this.currentNodeKey = ""; this.$refs.treeOption.setCheckedKeys([]);
this.clearSelected(); },
if (that.selectType == "single") { // 点击叶子节点
that.$refs.treeOption.setCurrentKey(""); // 设置默认选中 nodeClick(data, node, el) {
} else { if (data.rank >= this.selectLevel) {
that.$refs.treeOption.setCheckedKeys([]); this.selectValue = data.name;
} this.selectKey = data.id;
},
/* 清空选中样式 */
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);
} }
}); },
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item { .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto; height: auto;
max-height: 274px; max-height: 274px;
padding: 0; padding: 0;
overflow-y: auto; overflow-y: auto;
} }
.el-select-dropdown__item.selected { .el-select-dropdown__item.selected {
font-weight: normal; font-weight: normal;
} }
ul li > .el-tree .el-tree-node__content { ul li > .el-tree .el-tree-node__content {
height: auto; height: auto;
padding: 0 20px; padding: 0 20px;
} }
.el-tree-node__label { .el-tree-node__label {
font-weight: normal; font-weight: normal;
} }
.el-tree > .is-current .el-tree-node__label { .el-tree > .is-current .el-tree-node__label {
font-weight: 700; font-weight: 700;
color: #409eff; color: #409eff;
} }
.el-tree > .is-current .el-tree-node__children .el-tree-node__label { .el-tree > .is-current .el-tree-node__children .el-tree-node__label {
font-weight: normal; font-weight: normal;
color: #606266; color: #606266;
} }
</style> </style>
<style lang="scss"> <style lang="scss">
/* .vab-tree-select{ /* .vab-tree-select{
.el-tag__close.el-icon-close{ .el-tag__close.el-icon-close{
width:0; width:0;
overflow:hidden; overflow:hidden;

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

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

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

@ -17,76 +17,76 @@
</template> </template>
<script> <script>
export default { export default {
name: "VabImage", name: "VabImage",
components: {}, components: {},
props: { props: {
bigSrc: { bigSrc: {
type: String, type: String,
default: "", default: "",
},
smallSrc: {
type: String,
default: "",
},
percent: {
type: Number,
default: 97,
},
}, },
smallSrc: { data() {
type: String, return {};
default: "",
}, },
percent: { created() {},
type: Number, mounted() {},
default: 97, methods: {
clickBig() {
this.$emit("clickBig");
},
clickSmall() {
this.$emit("clickSmall");
},
}, },
}, };
data() {
return {};
},
created() {},
mounted() {},
methods: {
clickBig() {
this.$emit("clickBig");
},
clickSmall() {
this.$emit("clickSmall");
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.vab-image { .vab-image {
&__outter { &__outter {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
::v-deep { ::v-deep {
img { 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; 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> </style>

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

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

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

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

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

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

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

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

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

@ -11,8 +11,7 @@
:closable="false" :closable="false"
:title="`支持jpg、jpeg、png格式，单次可最多选择${limit}张图片，每张不可大于${size}M，如果大于${size}M会自动为您过滤`" :title="`支持jpg、jpeg、png格式，单次可最多选择${limit}张图片，每张不可大于${size}M，如果大于${size}M会自动为您过滤`"
type="info" type="info"
> ></el-alert>
</el-alert>
<br /> <br />
<el-upload <el-upload
ref="upload" ref="upload"
@ -68,155 +67,66 @@
type="success" type="success"
:loading="loading" :loading="loading"
@click="submitUpload" @click="submitUpload"
>开始上传 >
开始上传
</el-button> </el-button>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { tokenName } from "@/config/settings"; import { tokenName } from "@/config/settings";
export default { export default {
name: "VabUpload", name: "VabUpload",
props: { props: {
url: { url: {
type: String, type: String,
default: "/upload", default: "/upload",
required: true, required: true,
},
name: {
type: String,
default: "file",
required: true,
},
limit: {
type: Number,
default: 50,
required: true,
},
size: {
type: Number,
default: 1,
required: true,
},
}, },
name: { data() {
type: String, return {
default: "file", show: false,
required: true, loading: false,
dialogVisible: false,
dialogImageUrl: "",
action: "",
headers: {},
fileList: [],
picture: "picture",
imgNum: 0,
imgSuccessNum: 0,
imgErrorNum: 0,
typeList: null,
title: "上传",
dialogFormVisible: false,
data: {},
};
}, },
limit: { computed: {
type: Number, percentage() {
default: 50, if (this.allImgNum == 0) return 0;
required: true, return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100;
},
}, },
size: { created() {
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;
if ("development" === process.env.NODE_ENV) { if ("development" === process.env.NODE_ENV) {
this.api = process.env.VUE_APP_BASE_API; this.api = process.env.VUE_APP_BASE_API;
} else { } else {
@ -225,43 +135,133 @@ export default {
this.action = this.api + this.url; this.action = this.api + this.url;
this.headers[tokenName] = this.$baseAccessToken(); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.upload { .upload {
height: 600px; height: 600px;
.upload-content { .upload-content {
.el-upload__tip { .el-upload__tip {
display: block; display: block;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
}
::v-deep {
.el-upload--picture-card {
width: 128px;
height: 128px;
margin: 3px 8px 8px 8px;
border: 2px dashed #c0ccda;
} }
.el-upload-list--picture { ::v-deep {
margin-bottom: 20px; .el-upload--picture-card {
}
.el-upload-list--picture-card {
.el-upload-list__item {
width: 128px; width: 128px;
height: 128px; height: 128px;
margin: 3px 8px 8px 8px; 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> </style>

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

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

427
src/layouts/index.vue
View File

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

2
src/utils/request.js
View File

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

432
src/views/401.vue
View File

@ -43,254 +43,254 @@
</template> </template>
<script> <script>
export default { export default {
name: "Page401", name: "Page401",
data() { data() {
return { return {
jumpTime: 5, jumpTime: 5,
oops: "抱歉!", oops: "抱歉!",
headline: "您没有操作权限...", headline: "您没有操作权限...",
info: "当前帐号没有操作权限,请联系管理员。", info: "当前帐号没有操作权限,请联系管理员。",
btn: "返回", btn: "返回",
timer: 0, 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);
}, },
}, 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.error-container { .error-container {
position: absolute; position: absolute;
top: 40%; top: 40%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
.error-content { .error-content {
.pic-error { .pic-error {
position: relative; position: relative;
float: left; float: left;
width: 120%; width: 120%;
overflow: hidden; overflow: hidden;
&-parent { &-parent {
width: 100%; 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;
} }
&.mid { &-child {
top: 10px; position: absolute;
left: 420px;
width: 46px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1.2s;
animation-fill-mode: forwards;
}
&.right { &.left {
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% {
top: 17px; top: 17px;
left: 220px; left: 220px;
width: 80px;
opacity: 0; opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
} }
20% { &.mid {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px; top: 10px;
left: 420px; left: 420px;
width: 46px;
opacity: 0; opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1.2s;
animation-fill-mode: forwards;
} }
20% { &.right {
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; top: 100px;
left: 500px; left: 500px;
width: 62px;
opacity: 0; opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
} }
20% { @keyframes cloudLeft {
top: 120px; 0% {
left: 460px; top: 17px;
opacity: 1; 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% { @keyframes cloudMid {
top: 180px; 0% {
left: 340px; top: 10px;
opacity: 1; 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% { 100% {
top: 200px; opacity: 1;
left: 300px; transform: translateY(0);
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% {
opacity: 1;
transform: translateY(0);
}
}
}
} }
}
</style> </style>

432
src/views/404.vue
View File

@ -43,254 +43,254 @@
</template> </template>
<script> <script>
export default { export default {
name: "Page404", name: "Page404",
data() { data() {
return { return {
jumpTime: 5, jumpTime: 5,
oops: "抱歉!", oops: "抱歉!",
headline: "当前页面不存在...", headline: "当前页面不存在...",
info: "请检查您输入的网址是否正确，或点击下面的按钮返回首页。", info: "请检查您输入的网址是否正确，或点击下面的按钮返回首页。",
btn: "返回首页", btn: "返回首页",
timer: 0, 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);
}, },
}, 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.error-container { .error-container {
position: absolute; position: absolute;
top: 40%; top: 40%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
.error-content { .error-content {
.pic-error { .pic-error {
position: relative; position: relative;
float: left; float: left;
width: 120%; width: 120%;
overflow: hidden; overflow: hidden;
&-parent { &-parent {
width: 100%; 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;
} }
&.mid { &-child {
top: 10px; position: absolute;
left: 420px;
width: 46px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1.2s;
animation-fill-mode: forwards;
}
&.right { &.left {
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% {
top: 17px; top: 17px;
left: 220px; left: 220px;
width: 80px;
opacity: 0; opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
} }
20% { &.mid {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px; top: 10px;
left: 420px; left: 420px;
width: 46px;
opacity: 0; opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1.2s;
animation-fill-mode: forwards;
} }
20% { &.right {
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; top: 100px;
left: 500px; left: 500px;
width: 62px;
opacity: 0; opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
} }
20% { @keyframes cloudLeft {
top: 120px; 0% {
left: 460px; top: 17px;
opacity: 1; 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% { @keyframes cloudMid {
top: 180px; 0% {
left: 340px; top: 10px;
opacity: 1; 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% { 100% {
top: 200px; opacity: 1;
left: 300px; transform: translateY(0);
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% {
opacity: 1;
transform: translateY(0);
}
}
}
} }
}
</style> </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" type="success"
:closable="false" :closable="false"
style="position: fixed;" style="position: fixed;"
> ></el-alert>
</el-alert>
<el-row> <el-row>
<el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16"> <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
<div style="color: transparent;">占位符</div> <div style="color: transparent;">占位符</div>
@ -65,7 +64,8 @@
class="login-btn" class="login-btn"
type="primary" type="primary"
@click="handleLogin" @click="handleLogin"
>登录 >
登录
</el-button> </el-button>
<router-link to="/register"> <router-link to="/register">
<div style="margin-top: 20px;">注册</div> <div style="margin-top: 20px;">注册</div>
@ -77,246 +77,246 @@
</template> </template>
<script> <script>
import { isPassword } from "@/utils/validate"; import { isPassword } from "@/utils/validate";
export default { export default {
name: "Login", name: "Login",
directives: { directives: {
focus: { focus: {
inserted(el) { inserted(el) {
el.querySelector("input").focus(); el.querySelector("input").focus();
},
}, },
}, },
}, data() {
data() { const validateusername = (rule, value, callback) => {
const validateusername = (rule, value, callback) => { if ("" == value) {
if ("" == value) { callback(new Error("用户名不能为空"));
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;
} else { } else {
return false; callback();
} }
}); };
setTimeout(() => { const validatePassword = (rule, value, callback) => {
window.open("https://github.com/chuzhixin/vue-admin-beautiful"); if (!isPassword(value)) {
}, 30000); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login-container { .login-container {
height: 100vh; height: 100vh;
background: url("~@/assets/login_images/background.jpg") center center fixed background: url("~@/assets/login_images/background.jpg") center center fixed
no-repeat; no-repeat;
background-size: cover; 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;
.title { .title {
margin: 0 auto 40px auto; font-size: 54px;
font-size: 34px; font-weight: 500;
font-weight: bold; color: rgba(14, 18, 26, 1);
color: $base-color-blue;
text-align: center;
} }
}
.svg-container { .title-tips {
position: absolute; margin-top: 29px;
top: 14px; font-size: 26px;
left: 15px; font-weight: 400;
z-index: $base-z-index; color: rgba(14, 18, 26, 1);
font-size: 16px; text-overflow: ellipsis;
color: #d7dee3; white-space: nowrap;
cursor: pointer; }
user-select: none;
}
.show-password { .login-btn {
position: absolute; display: inherit;
top: 14px; width: 220px;
right: 25px; height: 60px;
font-size: 16px; margin-top: 5px;
color: #d7dee3; border: 0;
cursor: pointer;
user-select: none;
}
::v-deep { &:hover {
.el-form-item { opacity: 0.9;
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 { .login-form {
box-sizing: border-box; position: relative;
max-width: 100%;
margin: calc((100vh - 425px) / 2) 10% 10%;
overflow: hidden;
input { .forget-password {
height: 58px; width: 100%;
padding-left: 45px; margin-top: 40px;
font-size: $base-font-size-default; text-align: left;
line-height: 58px;
color: $base-font-color; .forget-pass {
background: #f6f4fc; width: 129px;
border: 0; height: 19px;
caret-color: $base-font-color; 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> </style>

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

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

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

@ -17,7 +17,8 @@
type="primary" type="primary"
native-type="submit" native-type="submit"
@click="handleQuery" @click="handleQuery"
>查询 >
查询
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -64,99 +65,99 @@
</template> </template>
<script> <script>
import { getList } from "@/api/goodsList"; import { getList } from "@/api/goodsList";
export default { export default {
name: "Goods", name: "Goods",
components: {}, components: {},
data() { data() {
return { return {
queryForm: { queryForm: {
pageNo: 1, pageNo: 1,
pageSize: 20, pageSize: 20,
title: "", 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.goods-list-container { .goods-list-container {
.goods-list-card-body { .goods-list-card-body {
position: relative; position: relative;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
.goods-list-tag-group { .goods-list-tag-group {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 5px; right: 5px;
z-index: 9; z-index: 9;
} }
.goods-list-image-group { .goods-list-image-group {
height: 400px;
overflow: hidden;
.goods-list-image {
width: 100%;
height: 400px; height: 400px;
transition: all ease-in-out 0.3s; overflow: hidden;
&:hover { .goods-list-image {
transform: scale(1.1); 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> </style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -6,8 +6,7 @@
type="success" type="success"
:closable="false" :closable="false"
style="position: fixed;" style="position: fixed;"
> ></el-alert>
</el-alert>
<el-row> <el-row>
<el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16"> <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
<div style="color: transparent;">占位符</div> <div style="color: transparent;">占位符</div>
@ -49,11 +48,12 @@
v-model.trim="form.phoneCode" v-model.trim="form.phoneCode"
type="text" type="text"
placeholder="手机验证码" placeholder="手机验证码"
><vab-icon >
<vab-icon
slot="prefix" slot="prefix"
:icon="['fas', 'envelope-open']" :icon="['fas', 'envelope-open']"
></vab-icon ></vab-icon>
></el-input> </el-input>
<el-button <el-button
type="primary" type="primary"
class="show-pwd phone-code" class="show-pwd phone-code"
@ -69,15 +69,17 @@
type="password" type="password"
placeholder="设置密码" placeholder="设置密码"
autocomplete="new-password" 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-form-item> <el-form-item>
<el-button <el-button
class="register-btn" class="register-btn"
type="primary" type="primary"
@click.native.prevent="handleReister" @click.native.prevent="handleReister"
>注册 >
注册
</el-button> </el-button>
<router-link to="/login"> <router-link to="/login">
<div style="margin-top: 20px;">登录</div> <div style="margin-top: 20px;">登录</div>
@ -89,280 +91,280 @@
</div> </div>
</template> </template>
<script> <script>
import { isPassword, isPhone } from "@/utils/validate"; import { isPassword, isPhone } from "@/utils/validate";
import { register } from "@/api/user"; import { register } from "@/api/user";
export default { export default {
username: "Register", username: "Register",
directives: { directives: {
focus: { focus: {
inserted(el) { inserted(el) {
el.querySelector("input").focus(); el.querySelector("input").focus();
},
}, },
}, },
}, data() {
data() { const validateusername = (rule, value, callback) => {
const validateusername = (rule, value, callback) => { if ("" == value) {
if ("" == value) { callback(new Error("用户名不能为空"));
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)";
} else { } else {
this.getPhoneIntval = null; callback();
clearInterval(this.getPhoneIntval);
this.phoneCode = "获取验证码";
this.isGetphone = false;
} }
}, 1000); };
}, const validatePassword = (rule, value, callback) => {
handleReister() { if (!isPassword(value)) {
this.$refs["registerForm"].validate(async (valid) => { callback(new Error("密码不能少于6位"));
if (valid) { } else {
const param = { callback();
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 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.register-container { .register-container {
height: 100vh; height: 100vh;
background: url("~@/assets/login_images/background.jpg") center center fixed background: url("~@/assets/login_images/background.jpg") center center fixed
no-repeat; no-repeat;
background-size: cover; 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;
.title { .title {
margin: 0 auto 40px auto; font-size: 54px;
font-size: 34px; font-weight: 500;
font-weight: bold; color: rgba(14, 18, 26, 1);
color: $base-color-blue;
text-align: center;
} }
}
.svg-container { .title-tips {
position: absolute; margin-top: 29px;
top: 14px; font-size: 26px;
left: 15px; font-weight: 400;
z-index: $base-z-index; color: rgba(14, 18, 26, 1);
font-size: 16px; text-overflow: ellipsis;
color: #d7dee3; white-space: nowrap;
cursor: pointer; }
user-select: none;
}
.show-pwd { .register-btn {
position: absolute; display: inherit;
top: 14px; width: 220px;
right: 25px; height: 60px;
font-size: 16px; margin-top: 5px;
color: $base-font-color; border: 0;
cursor: pointer;
user-select: none;
}
::v-deep { &:hover {
.el-form-item { opacity: 0.9;
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 { .register-form {
box-sizing: border-box; position: relative;
max-width: 100%;
margin: calc((100vh - 499px) / 2) 10% 10%;
overflow: hidden;
.el-input__count { .forget-password {
.el-input__count-inner { width: 100%;
background: transparent; 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 { .per-code {
left: 15px; width: 100px;
line-height: 56px; height: 36px;
font-size: 20px;
line-height: 36px;
color: #fff;
text-align: center;
cursor: pointer;
background: #bbc1ce;
}
.svg-inline--fa { .phone-code {
width: 20px; 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 { .el-input {
height: 58px; box-sizing: border-box;
padding-left: 45px;
font-size: $base-font-size-default; .el-input__count {
line-height: 58px; .el-input__count-inner {
color: $base-font-color; background: transparent;
background: #f6f4fc; }
border: 0; }
caret-color: $base-font-color;
.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> </style>

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

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

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

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

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

@ -39,61 +39,61 @@
</template> </template>
<script> <script>
import { getList } from "@/api/table"; import { getList } from "@/api/table";
import VabImage from "@/components/VabImage"; import VabImage from "@/components/VabImage";
export default { export default {
name: "Card", name: "Card",
components: { components: {
VabImage, 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("点击了大图");
}, },
smallClick(val) { data() {
this.$baseAlert("点击了小图"); 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) { created() {
this.pageSize = val;
this.fetchData(); this.fetchData();
this.height = this.$baseTableHeight(1);
}, },
handleCurrentChange(val) { methods: {
this.pageNo = val; bigClick(val) {
this.fetchData(); 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> </script>

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

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

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

@ -13,69 +13,69 @@
</template> </template>
<script> <script>
import TableExhibitionBody from "./TableExhibitionBody"; import TableExhibitionBody from "./TableExhibitionBody";
import TableExhibitionQuery from "./TableExhibitionQuery"; import TableExhibitionQuery from "./TableExhibitionQuery";
import TableExhibitionHeader from "./TableExhibitionHeader"; import TableExhibitionHeader from "./TableExhibitionHeader";
import { genTableSnippet } from "./snippetTable.js"; import { genTableSnippet } from "./snippetTable.js";
export default { export default {
components: { components: {
TableExhibitionBody, TableExhibitionBody,
TableExhibitionHeader, TableExhibitionHeader,
TableExhibitionQuery, TableExhibitionQuery,
}, },
props: { props: {
tableData: { tableData: {
type: Object, type: Object,
default: () => { default: () => {
return {}; return {};
},
}, },
}, },
}, data() {
data() { return {
return { list: [],
list: [], code: "",
code: "", headers: [],
headers: [], query: {
query: { limit: 20,
limit: 20, cursor: 1,
cursor: 1, },
}, total: 0,
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,
}, },
headers: { watch: {
handler(val) { tableData: {
this.code = genTableSnippet(val, this.getTableAPI); handler(val) {
this.$store.dispatch("table/setTableCode", this.code); 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() {},
created() {}, methods: {
methods: { editdata() {},
editdata() {}, test(val) {},
test(val) {}, },
}, };
};
</script> </script>

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,28 +1,28 @@
<template> <template>
<div class="errorLog-container"> <div class="errorLog-container">
<el-divider content-position="left" <el-divider content-position="left">
>这里会在顶部navbar上模拟一个控制台错误日志 这里会在顶部navbar上模拟一个控制台错误日志
</el-divider> </el-divider>
<el-button type="primary" @click="handleError" <el-button type="primary" @click="handleError">
>点击模拟一个chuzhixinjiayou的错误 点击模拟一个chuzhixinjiayou的错误
</el-button> </el-button>
<error-test v-if="show" /> <error-test v-if="show" />
</div> </div>
</template> </template>
<script> <script>
import ErrorTest from "./components/ErrorTest"; import ErrorTest from "./components/ErrorTest";
export default { export default {
name: "ErrorLog", name: "ErrorLog",
components: { ErrorTest }, components: { ErrorTest },
data() { data() {
return { show: false }; return { show: false };
},
methods: {
handleError() {
this.show = true;
}, },
}, methods: {
}; handleError() {
this.show = true;
},
},
};
</script> </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-input v-model="ruleForm.desc" type="textarea"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')" <el-button type="primary" @click="submitForm('ruleForm')">
>立即创建 立即创建
</el-button> </el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item> </el-form-item>
@ -51,54 +51,61 @@
</template> </template>
<script> <script>
export default { export default {
name: "Form", name: "Form",
data() { data() {
return { return {
ruleForm: { ruleForm: {
name: "", name: "",
region: "", region: "",
delivery: false, delivery: false,
type: [], type: [],
resource: "", resource: "",
desc: "", desc: "",
}, },
rules: { rules: {
name: [ name: [
{ required: true, message: "请输入活动名称", trigger: "blur" }, { required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }, {
], min: 3,
region: [ max: 5,
{ required: true, message: "请选择活动区域", trigger: "change" }, message: "长度在 3 到 5 个字符",
], trigger: "blur",
type: [ },
{ ],
type: "array", region: [
required: true, { required: true, message: "请选择活动区域", trigger: "change" },
message: "请至少选择一个活动性质", ],
trigger: "change", type: [
}, {
], type: "array",
resource: [ required: true,
{ required: true, message: "请选择活动资源", trigger: "change" }, message: "请至少选择一个活动性质",
], trigger: "change",
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }], },
}, ],
}; resource: [
}, { required: true, message: "请选择活动资源", trigger: "change" },
methods: { ],
submitForm(formName) { desc: [
this.$refs[formName].validate((valid) => { { required: true, message: "请填写活动形式", trigger: "blur" },
if (valid) { ],
alert("submit!"); },
} else { };
return false;
}
});
}, },
resetForm(formName) { methods: {
this.$refs[formName].resetFields(); submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
}, },
}, };
};
</script> </script>

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

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

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

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

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

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

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

@ -25,29 +25,29 @@
</template> </template>
<script> <script>
import VabComparison from "@/plugins/vabComparison"; import VabComparison from "@/plugins/vabComparison";
import { random } from "@/utils"; import { random } from "@/utils";
export default { export default {
name: "ImgComparison", name: "ImgComparison",
components: { VabComparison }, components: { VabComparison },
data() { data() {
return { return {
comparison: { comparison: {
width: "100%", width: "100%",
height: "auto", height: "auto",
src1: require("@/assets/comparison/left.jpg"), src1: require("@/assets/comparison/left.jpg"),
src2: require("@/assets/comparison/right.jpg"), src2: require("@/assets/comparison/right.jpg"),
start: random(0, 100), start: random(0, 100),
}, },
}; };
},
created() {},
mounted() {},
methods: {
random(m, n) {
return random(m, n).toString();
}, },
}, created() {},
}; mounted() {},
methods: {
random(m, n) {
return random(m, n).toString();
},
},
};
</script> </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(7)">效果7</el-button>
<el-button type="primary" @click="handleLoading(8)">效果8</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="handleLoading(9)">效果9</el-button>
<el-button type="primary" @click="test()" <el-button type="primary" @click="test()">
>全局默认骨架屏(仿支付宝) 全局默认骨架屏(仿支付宝)
</el-button> </el-button>
<br /><br /><br /> <br />
<br />
<br />
<el-divider content-position="left">多彩loading</el-divider> <el-divider content-position="left">多彩loading</el-divider>
<el-button type="primary" @click="handleColorfullLoading(1)" <el-button type="primary" @click="handleColorfullLoading(1)">
>效果1 效果1
</el-button> </el-button>
<el-button type="primary" @click="handleColorfullLoading(2)" <el-button type="primary" @click="handleColorfullLoading(2)">
>效果2 效果2
</el-button> </el-button>
<el-button type="primary" @click="handleColorfullLoading(3)" <el-button type="primary" @click="handleColorfullLoading(3)">
>效果3 效果3
</el-button> </el-button>
<el-button type="primary" @click="handleColorfullLoading(4)" <el-button type="primary" @click="handleColorfullLoading(4)">
>效果4 效果4
</el-button> </el-button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "Loading", name: "Loading",
data() { data() {
return {}; return {};
},
methods: {
handleLoading(index) {
this.$baseLoading(index);
}, },
handleColorfullLoading(index) { methods: {
this.$baseColorfullLoading(index); handleLoading(index) {
this.$baseLoading(index);
},
handleColorfullLoading(index) {
this.$baseColorfullLoading(index);
},
test() {
location.reload();
},
}, },
test() { };
location.reload();
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.loading-container { .loading-container {
::v-deep { ::v-deep {
.el-button { .el-button {
margin-top: 10px; margin-top: 10px;
margin-right: 10px; margin-right: 10px;
margin-left: 0; margin-left: 0;
} }
.el-button + .el-button { .el-button + .el-button {
margin-right: 10px; margin-right: 10px;
margin-left: 0; margin-left: 0;
}
} }
} }
}
</style> </style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -14,8 +14,8 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleChangePermission" <el-button type="primary" @click="handleChangePermission">
>切换权限 切换权限
</el-button> </el-button>
</el-form-item> </el-form-item>
<el-form-item label="当前账号拥有的权限"> <el-form-item label="当前账号拥有的权限">
@ -119,47 +119,50 @@
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { tokenTableName } from "@/config/settings"; import { tokenTableName } from "@/config/settings";
import { getRouterList } from "@/api/router"; import { getRouterList } from "@/api/router";
import JsonEditor from "@/components/JsonEditor"; import JsonEditor from "@/components/JsonEditor";
export default { export default {
name: "Permissions", name: "Permissions",
components: { components: {
JsonEditor, JsonEditor,
}, },
data() { data() {
return { return {
form: { form: {
account: "", 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> </script>

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -66,44 +66,44 @@
</template> </template>
<script> <script>
import { getList } from "@/api/table"; import { getList } from "@/api/table";
export default { export default {
name: "InlineEditTable", name: "InlineEditTable",
data() { data() {
return { return {
list: null, list: null,
listLoading: true, listLoading: true,
elementLoadingText: "正在加载...", elementLoadingText: "正在加载...",
queryForm: { queryForm: {
pageNo: 1, pageNo: 1,
pageSize: 20, pageSize: 20,
title: "", 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> </script>

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

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

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

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

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

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

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

@ -14,7 +14,7 @@
<el-input v-model="form.message"></el-input> <el-input v-model="form.message"></el-input>
</el-form-item> </el-form-item>
<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>
<el-form-item label="返回信息汇总"> <el-form-item label="返回信息汇总">
{{ data }} {{ data }}
@ -26,62 +26,62 @@
</template> </template>
<script> <script>
export default { export default {
name: "WebSocket", name: "WebSocket",
components: {}, components: {},
data() { data() {
return { return {
url: "ws://123.207.136.134:9010/ajaxchattest", url: "ws://123.207.136.134:9010/ajaxchattest",
webSocket: null, webSocket: null,
data: [], data: [],
status: "", status: "",
form: { message: null }, form: { message: null },
rules: { rules: {
message: [{ required: true, message: "请输入消息", trigger: "blur" }], 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> </script>