Skip to content

V
vipSupplier
Commit 6664949d by 初志鑫
Options

prettier代码格式重新配置

parent d134f932
Showing with 5559 additions and 5530 deletions
prettier.config.js
...@@ -10,6 +10,7 @@ module.exports = { ...@@ -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",
}; };
src/App.vue
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
</template> </template>
<script> <script>
export default { export default {
name: "App", name: "App",
mounted() {}, mounted() {},
}; };
</script> </script>
src/components/JsonEditor/index.vue
...@@ -7,105 +7,105 @@ ...@@ -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");
} }
}); if (value !== editorValue) {
}, this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
methods: { }
getValue() { },
return this.jsonEditor.getValue();
}, },
isJsonString(str) { mounted() {
try { this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
if (typeof JSON.parse(str) == "object") { lineNumbers: true,
return 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());
} }
} catch (e) {} });
return false; },
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>
src/components/SelectTree/index.vue
...@@ -31,168 +31,168 @@ ...@@ -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: {
selectType: { type: String,
type: String, default: () => {
default: () => { return "single";
return "single"; },
}, },
}, /* 初始选中值key */
/* 初始选中值key */ selectedKey: {
selectedKey: { type: String,
type: String, default: () => {
default: () => { return "";
return ""; },
}, },
}, /* 初始选中值name */
/* 初始选中值name */ selectedValue: {
selectedValue: { type: String,
type: String, default: () => {
default: () => { return "";
return ""; },
}, },
}, /* 可做选择的层级 */
/* 可做选择的层级 */ selectLevel: {
selectLevel: { type: [String, Number],
type: [String, Number], default: () => {
default: () => { return "";
return ""; },
}, },
}, /* 可清空选项 */
/* 可清空选项 */ clearable: {
clearable: { type: Boolean,
type: Boolean, default: () => {
default: () => { return true;
return true; },
}, },
}, },
}, data() {
data() { return {
return { defaultProps: {
defaultProps: { children: "children",
children: "children", label: "name",
label: "name", },
}, defaultSelectedKeys: [], //初始选中值数组
defaultSelectedKeys: [], //初始选中值数组 currentNodeKey: this.selectedKey,
currentNodeKey: this.selectedKey, selectValue:
selectValue: this.selectType == "multiple"
this.selectType == "multiple" ? this.selectedValue.split(",")
? this.selectedValue.split(",") : this.selectedValue, //下拉框选中值label
: this.selectedValue, //下拉框选中值label selectKey:
selectKey: this.selectType == "multiple"
this.selectType == "multiple" ? this.selectedKey.split(",")
? this.selectedKey.split(",") : this.selectedKey, //下拉框选中值value
: this.selectedKey, //下拉框选中值value };
}; },
}, mounted() {
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;
......
src/components/VabCharge/index.vue
...@@ -23,169 +23,169 @@ ...@@ -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: "",
endVal: { suffix: "%",
type: Number, separator: ",",
default: 100, duration: 3000,
};
}, },
}, created() {},
data() { mounted() {},
return { methods: {},
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; position: absolute;
height: 400px; top: 27%;
overflow: hidden; z-index: 99;
background-color: #000; width: 300px;
filter: contrast(15) hue-rotate(0); font-size: 32px;
animation: hueRotate 10s infinite linear; color: #fff;
} text-align: center;
}
.g-circle { .g-container {
position: relative; position: relative;
box-sizing: border-box; width: 300px;
width: 300px; height: 400px;
height: 300px; margin: auto;
filter: blur(8px); }
.g-contrast {
width: 300px;
height: 400px;
overflow: hidden;
background-color: #000;
filter: contrast(15) hue-rotate(0);
animation: hueRotate 10s infinite linear;
}
&::after { .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; position: absolute;
top: 40%; bottom: 0;
left: 50%; left: 50%;
width: 200px; width: 100px;
height: 200px; height: 40px;
content: "";
background-color: #00ff6f; background-color: #00ff6f;
border-radius: 42% 38% 62% 49% / 45%; filter: blur(5px);
transform: translate(-50%, -50%) rotate(0); border-radius: 100px 100px 0 0;
animation: rotate 10s infinite linear; transform: translate(-50%, 0);
} }
&::before { li {
position: absolute; position: absolute;
top: 40%; background: #00ff6f;
left: 50%;
z-index: 99;
width: 176px;
height: 176px;
content: "";
background-color: #000;
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 { @for $i from 0 through 15 {
position: absolute; li:nth-child(#{$i}) {
background: #00ff6f; $width: 15 + random(15) + px;
border-radius: 50%;
} top: 50%;
left: 15 + random(70) + px;
@for $i from 0 through 15 { width: $width;
li:nth-child(#{$i}) { height: $width;
$width: 15 + random(15) + px; transform: translate(-50%, -50%);
animation: moveToTop
top: 50%; #{random(6) +
left: 15 + random(70) + px; 3}s
width: $width; ease-in-out -#{random(5000) /
height: $width; 1000}s
transform: translate(-50%, -50%); infinite;
animation: moveToTop }
#{random(6) +
3}s
ease-in-out -#{random(5000) /
1000}s
infinite;
} }
}
@keyframes rotate { @keyframes rotate {
50% { 50% {
border-radius: 45% / 42% 38% 58% 49%; border-radius: 45% / 42% 38% 58% 49%;
} }
100% { 100% {
transform: translate(-50%, -50%) rotate(720deg); transform: translate(-50%, -50%) rotate(720deg);
}
} }
}
@keyframes moveToTop { @keyframes moveToTop {
90% { 90% {
opacity: 1; opacity: 1;
} }
100% { 100% {
opacity: 0.1; opacity: 0.1;
transform: translate(-50%, -180px); transform: translate(-50%, -180px);
}
} }
}
@keyframes hueRotate { @keyframes hueRotate {
100% { 100% {
filter: contrast(15) hue-rotate(360deg); filter: contrast(15) hue-rotate(360deg);
}
} }
} }
}
</style> </style>
src/components/VabImage/index.vue
...@@ -17,76 +17,76 @@ ...@@ -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; border-radius: $base-border-radius;
}
} }
}
&__small { &__small {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 80px; width: 80px;
height: 100px; height: 100px;
border-bottom: 1px solid $base-color-white; border-bottom: 1px solid $base-color-white;
border-left: 1px solid $base-color-white; border-left: 1px solid $base-color-white;
border-radius: $base-border-radius; border-radius: $base-border-radius;
} }
&__percent { &__percent {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
display: inline-block; display: inline-block;
min-width: 50px; min-width: 50px;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
color: $base-color-white; color: $base-color-white;
text-align: center; text-align: center;
background-color: $base-color-red; background-color: $base-color-red;
border-radius: $base-border-radius; border-radius: $base-border-radius;
}
} }
} }
}
</style> </style>
src/components/VabProfile/index.vue
...@@ -25,289 +25,289 @@ ...@@ -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: {
username: { type: String,
type: String, default: "",
default: "",
},
avatar: {
type: String,
default: "",
},
iconArray: {
type: Array,
default: () => {
return [
{ icon: "bell", url: "" },
{ icon: "bookmark", url: "" },
{ icon: "cloud-sun", url: "" },
];
}, },
avatar: {
type: String,
default: "",
},
iconArray: {
type: Array,
default: () => {
return [
{ icon: "bell", url: "" },
{ icon: "bookmark", url: "" },
{ icon: "cloud-sun", url: "" },
];
},
},
},
data() {
return {};
}, },
}, created() {},
data() { mounted() {},
return {}; methods: {},
}, };
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 {
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 { .border-top {
position: absolute; position: absolute;
top: 0; top: 0;
width: 2px; width: 100%;
height: 100%; height: 2px;
background: var(--card-bg-color); background: var(--card-bg-color);
transform: translateY(-100%); transform: translateX(-100%);
animation: slide-in-vertical-reverse 0.8s animation: slide-in-horizontal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
cubic-bezier(0.645, 0.045, 0.355, 1) forwards; forwards;
} }
}
.card-content { .border-right {
display: flex; position: absolute;
flex-direction: column; right: 0;
align-items: center; width: 2px;
height: 100%; height: 100%;
padding: 40px 0 40px 0; background: var(--card-bg-color);
background: var(--card-bg-color-transparent); transform: translateY(100%);
opacity: 0; animation: slide-in-vertical 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
transform: scale(0.6); forwards;
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 { .border-bottom {
position: relative; position: absolute;
margin-top: 20px; bottom: 0;
margin-bottom: 20px; width: 100%;
font-size: 26px; height: 2px;
color: transparent; background: var(--card-bg-color);
letter-spacing: 2px; transform: translateX(100%);
animation: fill-text-white 1.2s 2s forwards; animation: slide-in-horizontal-reverse 0.8s
cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
&::before { .border-left {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; width: 2px;
width: 100%;
height: 100%; height: 100%;
color: black; background: var(--card-bg-color);
content: ""; transform: translateY(-100%);
background: #35b9f1; animation: slide-in-vertical-reverse 0.8s
transform: scaleX(0); cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
transform-origin: left;
animation: slide-in-out 1.2s 1.2s cubic-bezier(0.75, 0, 0, 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;
&::after { letter-spacing: 2px;
animation-delay: 2.1s + 0.1s * $i; animation: fill-text-white 1.2s 2s forwards;
}
svg {
animation-delay: 2.2s + 0.1s * $i;
}
}
}
&::before, &::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%;
@for $i from 1 through 3 {
&:nth-child(#{$i}) {
&::before {
animation-delay: 2s + 0.1s * $i;
}
&::after {
animation-delay: 2.1s + 0.1s * $i;
}
svg {
animation-delay: 2.2s + 0.1s * $i;
}
}
}
&::before,
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: inherit;
transform: scale(0);
}
&::before {
background: #f7f1e3;
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
}
svg { &::after {
z-index: 99; background: #2c3e50;
transform: scale(0); animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
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 { to {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
}
} }
}
@keyframes slide-in-horizontal { @keyframes slide-in-horizontal {
50% { 50% {
transform: translateX(0); transform: translateX(0);
} }
to { to {
transform: translateX(100%); transform: translateX(100%);
}
} }
}
@keyframes slide-in-horizontal-reverse { @keyframes slide-in-horizontal-reverse {
50% { 50% {
transform: translateX(0); transform: translateX(0);
} }
to { to {
transform: translateX(-100%); transform: translateX(-100%);
}
} }
}
@keyframes slide-in-vertical { @keyframes slide-in-vertical {
50% { 50% {
transform: translateY(0); transform: translateY(0);
} }
to { to {
transform: translateY(-100%); transform: translateY(-100%);
}
} }
}
@keyframes slide-in-vertical-reverse { @keyframes slide-in-vertical-reverse {
50% { 50% {
transform: translateY(0); transform: translateY(0);
} }
to { to {
transform: translateY(100%); transform: translateY(100%);
}
} }
}
@keyframes slide-in-out { @keyframes slide-in-out {
50% { 50% {
transform: scaleX(1); transform: scaleX(1);
transform-origin: left; transform-origin: left;
} }
50.1% { 50.1% {
transform-origin: right; transform-origin: right;
} }
100% { 100% {
transform: scaleX(0); transform: scaleX(0);
transform-origin: right; transform-origin: right;
}
} }
}
@keyframes fill-text-white { @keyframes fill-text-white {
to { to {
color: white; color: white;
}
} }
}
@keyframes scale-in { @keyframes scale-in {
to { to {
transform: scale(1); transform: scale(1);
}
} }
}
</style> </style>
src/components/VabQrCode/index.vue
...@@ -5,40 +5,40 @@ ...@@ -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,
},
url: {
type: String,
default: "http://www.boyunvision.com/",
},
size: {
type: Number,
default: 500,
},
}, },
size: { data() {
type: Number, return {
default: 500, config: {
value: this.url,
imagePath: this.imagePath,
filter: "color",
size: this.size,
},
};
}, },
}, created() {},
data() { mounted() {},
return { methods: {},
config: { };
value: this.url,
imagePath: this.imagePath,
filter: "color",
size: this.size,
},
};
},
created() {},
mounted() {},
methods: {},
};
</script> </script>
src/components/VabSnow/index.vue
...@@ -5,77 +5,78 @@ ...@@ -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) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
@return $random_range; @function random_range($min, $max) {
} $rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
.snow { @return $random_range;
$total: 200; }
position: absolute; .snow {
width: 10px; $total: 200;
height: 10px;
background: white;
border-radius: 50%;
@for $i from 1 through $total { position: absolute;
$random-x: random(1000000) * 0.0001vw; width: 10px;
$random-offset: random_range(-100000, 100000) * 0.0001vw; height: 10px;
$random-x-end: $random-x + $random-offset; background: white;
$random-x-end-yoyo: $random-x + ($random-offset / 2); border-radius: 50%;
$random-yoyo-time: random_range(30000, 80000) / 100000;
$random-yoyo-y: $random-yoyo-time * 100vh;
$random-scale: random(10000) * 0.0001;
$fall-duration: random_range(10, 30) * 1s;
$fall-delay: random(30) * -1s;
&:nth-child(#{$i}) { @for $i from 1 through $total {
opacity: random(10000) * 0.0001; $random-x: random(1000000) * 0.0001vw;
transform: translate($random-x, -10px) scale($random-scale); $random-offset: random_range(-100000, 100000) * 0.0001vw;
animation: fall-#{$i} $fall-duration $fall-delay linear infinite; $random-x-end: $random-x + $random-offset;
} $random-x-end-yoyo: $random-x + ($random-offset / 2);
$random-yoyo-time: random_range(30000, 80000) / 100000;
$random-yoyo-y: $random-yoyo-time * 100vh;
$random-scale: random(10000) * 0.0001;
$fall-duration: random_range(10, 30) * 1s;
$fall-delay: random(30) * -1s;
@keyframes fall-#{$i} { &:nth-child(#{$i}) {
#{percentage($random-yoyo-time)} { opacity: random(10000) * 0.0001;
transform: translate($random-x-end, $random-yoyo-y) scale($random-scale); transform: translate($random-x, -10px) scale($random-scale);
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
} }
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>
src/components/VabSticky/index.vue
...@@ -16,80 +16,80 @@ ...@@ -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>
src/components/VabUpload/index.vue
...@@ -11,8 +11,7 @@ ...@@ -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 @@ ...@@ -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 {
name: "VabUpload",
props: {
url: {
type: String,
default: "/upload",
required: true,
},
name: {
type: String,
default: "file",
required: true,
},
limit: {
type: Number,
default: 50,
required: true,
},
size: {
type: Number,
default: 1,
required: true,
},
},
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; export default {
this.headers[tokenName] = this.$baseAccessToken(); name: "VabUpload",
}, props: {
methods: { url: {
submitUpload() { type: String,
this.$refs.upload.submit(); default: "/upload",
required: true,
},
name: {
type: String,
default: "file",
required: true,
},
limit: {
type: Number,
default: 50,
required: true,
},
size: {
type: Number,
default: 1,
required: true,
},
}, },
handleProgress(event, file, fileList) { data() {
this.loading = true; return {
this.show = true; show: false,
loading: false,
dialogVisible: false,
dialogImageUrl: "",
action: "",
headers: {},
fileList: [],
picture: "picture",
imgNum: 0,
imgSuccessNum: 0,
imgErrorNum: 0,
typeList: null,
title: "上传",
dialogFormVisible: false,
data: {},
};
}, },
handleChange(file, fileList) { computed: {
if (file.size > 1048576 * this.size) { percentage() {
fileList.map((item, index) => { if (this.allImgNum == 0) return 0;
if (item === file) { return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100;
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) { created() {
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 { ...@@ -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() {
</script> 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);
}
<style lang="scss" scoped> setTimeout(() => {
.upload { this.loading = false;
height: 600px; 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}`;
}
.upload-content { this.action = this.api + this.url;
.el-upload__tip { this.headers[tokenName] = this.$baseAccessToken();
display: block; this.dialogFormVisible = false;
height: 30px; },
line-height: 30px; },
} };
</script>
::v-deep { <style lang="scss" scoped>
.el-upload--picture-card { .upload {
width: 128px; height: 600px;
height: 128px;
margin: 3px 8px 8px 8px;
border: 2px dashed #c0ccda;
}
.el-upload-list--picture { .upload-content {
margin-bottom: 20px; .el-upload__tip {
display: block;
height: 30px;
line-height: 30px;
} }
.el-upload-list--picture-card { ::v-deep {
.el-upload-list__item { .el-upload--picture-card {
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>
src/layouts/components/Ad/index.vue
...@@ -9,44 +9,44 @@ ...@@ -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>
src/layouts/index.vue
...@@ -52,261 +52,262 @@ ...@@ -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) {
//横向布局时如果是手机端访问那么改成纵向版
this.$store.dispatch("settings/changeLayout", "vertical");
} else {
this.$store.dispatch("settings/changeLayout", this.oldLayout);
}
this.$store.dispatch("settings/toggleDevice", "mobile");
setTimeout(() => {
this.$store.dispatch("settings/foldSideBar");
}, 2000);
} else {
this.$store.dispatch("settings/openSideBar");
}
this.$nextTick(() => {
window.addEventListener(
"storage",
(e) => {
if (e.key === tokenName || e.key === null) window.location.reload();
if (e.key === tokenName && e.value === null) window.location.reload();
},
false
);
});
},
methods: {
...mapActions({
handleFoldSideBar: "settings/foldSideBar",
}),
handleIsMobile() {
return document.body.getBoundingClientRect().width - 1 < 992;
}, },
handleResize() { beforeMount() {
if (!document.hidden) { window.addEventListener("resize", this.handleResize);
const isMobile = this.handleIsMobile(); },
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
mounted() {
this.oldLayout = this.layout;
const userAgent = navigator.userAgent;
if (userAgent.includes("Juejin")) {
this.$baseAlert(
"vue-admin-beautiful不支持在掘金内置浏览器演示，请手动复制以下地址到浏览器中查看http://mpfhrd48.sanxing.uz7.cn/vue-admin-beautiful"
);
}
const isMobile = this.handleIsMobile();
if (isMobile) {
if (isMobile) { 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 { .vue-admin-beautiful-wrapper {
position: relative; position: relative;
width: 100%;
height: 100%;
&.fixed { .layout-container-horizontal {
padding-top: calc(#{$base-top-bar-height} + #{$base-tags-bar-height}); position: relative;
}
&.fixed.no-tags-bar {
padding-top: $base-top-bar-height;
}
::v-deep { &.fixed {
.vab-main { padding-top: calc(#{$base-top-bar-height} + #{$base-tags-bar-height});
width: 88%;
margin: auto;
} }
.fixed-header { &.fixed.no-tags-bar {
@include fix-header; padding-top: $base-top-bar-height;
} }
.tag-view-show { ::v-deep {
background: $base-color-white; .vab-main {
box-shadow: $base-box-shadow; width: 88%;
} margin: auto;
}
.nav-bar-container { .fixed-header {
.fold-unfold { @include fix-header;
display: none;
} }
}
.main-padding { .tag-view-show {
.app-main-container {
margin-top: $base-padding;
margin-bottom: $base-padding;
background: $base-color-white; 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 { .layout-container-vertical {
position: relative; position: relative;
.mask { .mask {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: $base-z-index - 1; z-index: $base-z-index - 1;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background: #000; background: #000;
opacity: 0.5; opacity: 0.5;
} }
&.fixed { &.fixed {
padding-top: calc(#{$base-nav-bar-height} + #{$base-tags-bar-height}); padding-top: calc(#{$base-nav-bar-height} + #{$base-tags-bar-height});
} }
&.fixed.no-tags-bar { &.fixed.no-tags-bar {
padding-top: $base-nav-bar-height; padding-top: $base-nav-bar-height;
} }
.vab-main { .vab-main {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
margin-left: $base-left-menu-width; margin-left: $base-left-menu-width;
background: #f6f8f9; background: #f6f8f9;
transition: $base-transition; transition: $base-transition;
::v-deep { ::v-deep {
.fixed-header { .fixed-header {
@include fix-header; @include fix-header;
left: $base-left-menu-width; left: $base-left-menu-width;
width: $base-right-content-width; width: $base-right-content-width;
box-shadow: $base-box-shadow; box-shadow: $base-box-shadow;
transition: $base-transition; transition: $base-transition;
} }
.nav-bar-container { .nav-bar-container {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
} }
.tags-bar-container { .tags-bar-container {
box-sizing: border-box; box-sizing: border-box;
} }
.app-main-container { .app-main-container {
width: calc(100% - #{$base-padding} - #{$base-padding}); width: calc(100% - #{$base-padding} - #{$base-padding});
margin: $base-padding auto; margin: $base-padding auto;
background: $base-color-white; background: $base-color-white;
border-radius: $base-border-radius; border-radius: $base-border-radius;
}
} }
}
&.is-collapse-main { &.is-collapse-main {
margin-left: $base-left-menu-width-min; margin-left: $base-left-menu-width-min;
::v-deep { ::v-deep {
.fixed-header { .fixed-header {
left: $base-left-menu-width-min; left: $base-left-menu-width-min;
width: calc(100% - 65px); width: calc(100% - 65px);
}
} }
} }
} }
} }
}
/* 手机端开始 */ /* 手机端开始 */
&.mobile { &.mobile {
::v-deep { ::v-deep {
.el-pager, .el-pager,
.el-pagination__jump { .el-pagination__jump {
display: none; display: none;
}
.layout-container-vertical {
.el-scrollbar.side-bar-container.is-collapse {
width: 0;
} }
.vab-main { .layout-container-vertical {
width: 100%; .el-scrollbar.side-bar-container.is-collapse {
margin-left: 0; width: 0;
}
.vab-main {
width: 100%;
margin-left: 0;
}
} }
}
.vab-main { .vab-main {
.fixed-header { .fixed-header {
left: 0 !important; left: 0 !important;
width: 100% !important; width: 100% !important;
}
} }
} }
} }
}
/* 手机端结束 */ /* 手机端结束 */
} }
</style> </style>
src/utils/request.js
...@@ -36,7 +36,7 @@ service.interceptors.request.use( ...@@ -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);
} }
} }
......
src/views/401.vue
...@@ -43,254 +43,254 @@ ...@@ -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() { mounted() {
this.timeChange(); this.timeChange();
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer); 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);
}, },
}, 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 {
.pic-error {
position: relative;
float: left;
width: 120%;
overflow: hidden;
&-parent { .error-content {
width: 100%; .pic-error {
} position: relative;
float: left;
&-child { width: 120%;
position: absolute; overflow: hidden;
&.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 { &-parent {
top: 10px; width: 100%;
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 { &-child {
top: 100px; position: absolute;
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 { &.left {
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;
}
80% { 20% {
top: 180px; top: 33px;
left: 340px; left: 188px;
opacity: 1; opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
} }
100% { @keyframes cloudMid {
top: 200px; 0% {
left: 300px; top: 10px;
opacity: 0; 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;
}
} }
}
}
}
.bullshit { @keyframes cloudRight {
position: relative; 0% {
float: left; top: 100px;
width: 300px; left: 500px;
padding: 30px 0; opacity: 0;
overflow: hidden; }
&-oops { 20% {
margin-bottom: 20px; top: 120px;
font-size: 32px; left: 460px;
font-weight: bold; opacity: 1;
line-height: 40px; }
color: $base-color-blue;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&-headline { 80% {
margin-bottom: 10px; top: 180px;
font-size: 20px; left: 340px;
font-weight: bold; opacity: 1;
line-height: 24px; }
color: #222;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&-info { 100% {
margin-bottom: 30px; top: 200px;
font-size: 13px; left: 300px;
line-height: 21px; opacity: 0;
color: $base-color-gray; }
opacity: 0; }
animation-name: slideUp; }
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
} }
&-return-home { .bullshit {
display: block; position: relative;
float: left; float: left;
width: 110px; width: 300px;
height: 36px; padding: 30px 0;
font-size: 14px; overflow: hidden;
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 { &-oops {
0% { margin-bottom: 20px;
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: $base-color-blue;
opacity: 0; opacity: 0;
transform: translateY(60px); 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;
} }
100% { @keyframes slideUp {
opacity: 1; 0% {
transform: translateY(0); opacity: 0;
transform: translateY(60px);
}
100% {
opacity: 1;
transform: translateY(0);
}
} }
} }
} }
} }
}
</style> </style>
src/views/404.vue
...@@ -43,254 +43,254 @@ ...@@ -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() { mounted() {
this.timeChange(); this.timeChange();
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer); 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);
}, },
}, 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 {
.pic-error {
position: relative;
float: left;
width: 120%;
overflow: hidden;
&-parent { .error-content {
width: 100%; .pic-error {
} position: relative;
float: left;
&-child { width: 120%;
position: absolute; overflow: hidden;
&.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 { &-parent {
top: 10px; width: 100%;
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 { &-child {
top: 100px; position: absolute;
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 { &.left {
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;
}
80% { 20% {
top: 180px; top: 33px;
left: 340px; left: 188px;
opacity: 1; opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
} }
100% { @keyframes cloudMid {
top: 200px; 0% {
left: 300px; top: 10px;
opacity: 0; 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;
}
} }
}
}
}
.bullshit { @keyframes cloudRight {
position: relative; 0% {
float: left; top: 100px;
width: 300px; left: 500px;
padding: 30px 0; opacity: 0;
overflow: hidden; }
&-oops { 20% {
margin-bottom: 20px; top: 120px;
font-size: 32px; left: 460px;
font-weight: bold; opacity: 1;
line-height: 40px; }
color: $base-color-blue;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&-headline { 80% {
margin-bottom: 10px; top: 180px;
font-size: 20px; left: 340px;
font-weight: bold; opacity: 1;
line-height: 24px; }
color: #222;
opacity: 0;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&-info { 100% {
margin-bottom: 30px; top: 200px;
font-size: 13px; left: 300px;
line-height: 21px; opacity: 0;
color: $base-color-gray; }
opacity: 0; }
animation-name: slideUp; }
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
} }
&-return-home { .bullshit {
display: block; position: relative;
float: left; float: left;
width: 110px; width: 300px;
height: 36px; padding: 30px 0;
font-size: 14px; overflow: hidden;
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 { &-oops {
0% { margin-bottom: 20px;
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: $base-color-blue;
opacity: 0; opacity: 0;
transform: translateY(60px); 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;
} }
100% { @keyframes slideUp {
opacity: 1; 0% {
transform: translateY(0); opacity: 0;
transform: translateY(60px);
}
100% {
opacity: 1;
transform: translateY(0);
}
} }
} }
} }
} }
}
</style> </style>
src/views/index/index.vue
...@@ -44,8 +44,8 @@ ...@@ -44,8 +44,8 @@
:options="fwl" :options="fwl"
/> />
<div class="bottom"> <div class="bottom">
<span <span>
>日均访问量: 日均访问量:
<vab-count <vab-count
:start-val="config1.startVal" :start-val="config1.startVal"
...@@ -71,8 +71,8 @@ ...@@ -71,8 +71,8 @@
:options="sqs" :options="sqs"
/> />
<div class="bottom"> <div class="bottom">
<span <span>
>总授权数: 总授权数:
<vab-count <vab-count
:start-val="config2.startVal" :start-val="config2.startVal"
:end-val="config2.endVal" :end-val="config2.endVal"
...@@ -81,7 +81,8 @@ ...@@ -81,7 +81,8 @@
:prefix="config2.prefix" :prefix="config2.prefix"
:suffix="config2.suffix" :suffix="config2.suffix"
:decimals="config2.decimals" :decimals="config2.decimals"
/></span> />
</span>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
...@@ -98,8 +99,9 @@ ...@@ -98,8 +99,9 @@
@click="handleClick" @click="handleClick"
/> />
<div class="bottom"> <div class="bottom">
<span <span>
>词云数量:<vab-count 词云数量:
<vab-count
:start-val="config3.startVal" :start-val="config3.startVal"
:end-val="config3.endVal" :end-val="config3.endVal"
:duration="config3.duration" :duration="config3.duration"
...@@ -107,7 +109,8 @@ ...@@ -107,7 +109,8 @@
:prefix="config3.prefix" :prefix="config3.prefix"
:suffix="config3.suffix" :suffix="config3.suffix"
:decimals="config3.decimals" :decimals="config3.decimals"
/></span> />
</span>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
...@@ -273,12 +276,10 @@ ...@@ -273,12 +276,10 @@
:title="item.title" :title="item.title"
:type="item.type" :type="item.type"
:closable="item.closable" :closable="item.closable"
> ></el-alert>
</el-alert>
<br /> <br />
</div> </div>
<el-alert :closable="false" :title="userAgent" type="info"> <el-alert :closable="false" :title="userAgent" type="info"></el-alert>
</el-alert>
<br /> <br />
</el-card> </el-card>
<el-card shadow="never"> <el-card shadow="never">
...@@ -296,446 +297,446 @@ ...@@ -296,446 +297,446 @@
</template> </template>
<script> <script>
import VabChart from "@/plugins/echarts"; import VabChart from "@/plugins/echarts";
import { dependencies, devDependencies } from "../../../package.json"; import { dependencies, devDependencies } from "../../../package.json";
import { getList } from "@/api/changeLog"; import { getList } from "@/api/changeLog";
import { getNoticeList } from "@/api/notice"; import { getNoticeList } from "@/api/notice";
import { getRepos, getStargazers } from "@/api/github"; import { getRepos, getStargazers } from "@/api/github";
export default { export default {
name: "Index", name: "Index",
components: { components: {
VabChart, VabChart,
}, },
data() { data() {
return { return {
timer: 0, timer: 0,
updateTime: process.env.VUE_APP_UPDATE_TIME, updateTime: process.env.VUE_APP_UPDATE_TIME,
nodeEnv: process.env.NODE_ENV, nodeEnv: process.env.NODE_ENV,
dependencies: dependencies, dependencies: dependencies,
devDependencies: devDependencies, devDependencies: devDependencies,
config1: { config1: {
startVal: 0, startVal: 0,
endVal: this.$baseLodash.random(20000, 60000), endVal: this.$baseLodash.random(20000, 60000),
decimals: 0, decimals: 0,
prefix: "", prefix: "",
suffix: "", suffix: "",
separator: ",", separator: ",",
duration: 8000, duration: 8000,
}, },
config2: { config2: {
startVal: 0, startVal: 0,
endVal: this.$baseLodash.random(1000, 20000), endVal: this.$baseLodash.random(1000, 20000),
decimals: 0, decimals: 0,
prefix: "", prefix: "",
suffix: "", suffix: "",
separator: ",", separator: ",",
duration: 8000, duration: 8000,
}, },
config3: { config3: {
startVal: 0, startVal: 0,
endVal: this.$baseLodash.random(1000, 20000), endVal: this.$baseLodash.random(1000, 20000),
decimals: 0, decimals: 0,
prefix: "", prefix: "",
suffix: "", suffix: "",
separator: ",", separator: ",",
duration: 8000, duration: 8000,
}, },
//访问量 //访问量
fwl: { fwl: {
grid: { grid: {
top: "4%", top: "4%",
left: "2%", left: "2%",
right: "4%", right: "4%",
bottom: "0%", bottom: "0%",
containLabel: true, containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: [],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "访问量",
type: "line",
data: [],
smooth: true,
areaStyle: {},
},
],
}, },
xAxis: [ //授权数
{ sqs: {
type: "category", grid: {
boundaryGap: false, top: "4%",
data: [], left: "2%",
axisTick: { right: "4%",
alignWithLabel: true, bottom: "0%",
containLabel: true,
},
xAxis: [
{
type: "category",
/*boundaryGap: false,*/
data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "授权数",
type: "bar",
barWidth: "60%",
data: [10, 52, 20, 33, 39, 33, 22],
}, },
],
},
//词云
cy: {
grid: {
top: "4%",
left: "2%",
right: "4%",
bottom: "0%",
}, },
], series: [
yAxis: [ {
type: "wordCloud",
gridSize: 15,
sizeRange: [12, 40],
rotationRange: [0, 0],
width: "100%",
height: "100%",
textStyle: {
normal: {
color() {
const arr = [
"#1890FF",
"#36CBCB",
"#4ECB73",
"#FBD437",
"#F2637B",
"#975FE5",
];
let index = Math.floor(Math.random() * arr.length);
return arr[index];
},
},
},
data: [
{
name: "vue-admin-beautiful",
value: 15000,
},
{
name: "element",
value: 10081,
},
{
name: "beautiful",
value: 9386,
},
{
name: "vue",
value: 6500,
},
{
name: "chuzhixin",
value: 6000,
},
{
name: "good",
value: 4500,
},
{
name: "success",
value: 3800,
},
{
name: "never",
value: 3000,
},
{
name: "boy",
value: 2500,
},
{
name: "girl",
value: 2300,
},
{
name: "github",
value: 2000,
},
{
name: "hbuilder",
value: 1900,
},
{
name: "dcloud",
value: 1800,
},
{
name: "china",
value: 1700,
},
{
name: "1204505056",
value: 1600,
},
{
name: "972435319",
value: 1500,
},
{
name: "young",
value: 1200,
},
{
name: "old",
value: 1100,
},
{
name: "vuex",
value: 900,
},
{
name: "router",
value: 800,
},
{
name: "money",
value: 700,
},
{
name: "qingdao",
value: 800,
},
{
name: "yantai",
value: 9000,
},
{
name: "author is very cool",
value: 9200,
},
],
},
],
},
//中国地图
zgdt: {
title: {
text: "2099年全国GDP分布",
subtext: "数据来自vue-admin-beautiful杜撰",
},
tooltip: {
trigger: "item",
},
dataRange: {
orient: "horizontal",
min: 0,
max: 55000,
text: ["高", "低"],
splitNumber: 0,
},
series: [
{
name: "2099年全国GDP分布",
type: "map",
roam: false,
zoom: 1.25,
mapType: "china",
mapLocation: {
x: "center",
},
selectedMode: "multiple",
itemStyle: {
normal: {
label: {
show: false,
},
},
emphasis: {
label: {
show: true,
},
},
},
data: [
{ name: "西藏", value: 605.83 },
{ name: "青海", value: 1670.44 },
{ name: "宁夏", value: 2102.21 },
{ name: "海南", value: 2522.66 },
{ name: "甘肃", value: 5020.37 },
{ name: "贵州", value: 5701.84 },
{ name: "新疆", value: 6610.05 },
{ name: "云南", value: 8893.12 },
{ name: "重庆", value: 10011.37 },
{ name: "吉林", value: 10568.83 },
{ name: "山西", value: 11237.55 },
{ name: "天津", value: 11307.28 },
{ name: "江西", value: 11702.82 },
{ name: "广西", value: 11720.87 },
{ name: "陕西", value: 12512.3 },
{ name: "黑龙江", value: 12582 },
{ name: "内蒙古", value: 14359.88 },
{ name: "安徽", value: 15300.65 },
{ name: "北京", value: 16251.93 },
{ name: "福建", value: 17560.18 },
{ name: "上海", value: 19195.69 },
{ name: "湖北", value: 19632.26 },
{ name: "湖南", value: 19669.56 },
{ name: "四川", value: 21026.68 },
{ name: "辽宁", value: 22226.7 },
{ name: "河北", value: 24515.76 },
{ name: "河南", value: 26931.03 },
{ name: "浙江", value: 32318.85 },
{ name: "山东", value: 45361.85, selected: true },
{ name: "江苏", value: 49110.27 },
{ name: "广东", value: 53210.28 },
],
},
],
},
//更新日志
reverse: true,
activities: [],
noticeList: [],
//其他信息
userAgent: navigator.userAgent,
//卡片图标
iconList: [
{ {
type: "value", icon: "video",
title: "视频播放器",
link: "/vab/player",
color: "#ffc069",
}, },
],
series: [
{ {
name: "访问量", icon: "table",
type: "line", title: "表格",
data: [], link: "/vab/table/comprehensiveTable",
smooth: true, color: "#5cdbd3",
areaStyle: {},
}, },
],
},
//授权数
sqs: {
grid: {
top: "4%",
left: "2%",
right: "4%",
bottom: "0%",
containLabel: true,
},
xAxis: [
{ {
type: "category", icon: "laptop-code",
/*boundaryGap: false,*/ title: "源码",
data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"], link: "https://github.com/chuzhixin/vue-admin-beautiful",
axisTick: { color: "#b37feb",
alignWithLabel: true,
},
}, },
],
yAxis: [
{ {
type: "value", icon: "book",
title: "书籍",
link: "",
color: "#69c0ff",
}, },
],
series: [
{ {
name: "授权数", icon: "bullhorn",
type: "bar", title: "公告",
barWidth: "60%", link: "",
data: [10, 52, 20, 33, 39, 33, 22], color: "#ff85c0",
}, },
],
},
//词云
cy: {
grid: {
top: "4%",
left: "2%",
right: "4%",
bottom: "0%",
},
series: [
{ {
type: "wordCloud", icon: "gift",
gridSize: 15, title: "礼物",
sizeRange: [12, 40], link: "",
rotationRange: [0, 0], color: "#ffd666",
width: "100%", },
height: "100%",
textStyle: {
normal: {
color() {
const arr = [
"#1890FF",
"#36CBCB",
"#4ECB73",
"#FBD437",
"#F2637B",
"#975FE5",
];
let index = Math.floor(Math.random() * arr.length);
return arr[index];
},
},
},
data: [
{
name: "vue-admin-beautiful",
value: 15000,
},
{
name: "element",
value: 10081,
},
{
name: "beautiful",
value: 9386,
},
{ {
name: "vue", icon: "balance-scale-left",
value: 6500, title: "公平的世界",
}, link: "",
{ color: "#ff9c6e",
name: "chuzhixin",
value: 6000,
},
{
name: "good",
value: 4500,
},
{
name: "success",
value: 3800,
},
{
name: "never",
value: 3000,
},
{
name: "boy",
value: 2500,
},
{
name: "girl",
value: 2300,
},
{
name: "github",
value: 2000,
},
{
name: "hbuilder",
value: 1900,
},
{
name: "dcloud",
value: 1800,
},
{
name: "china",
value: 1700,
},
{
name: "1204505056",
value: 1600,
},
{
name: "972435319",
value: 1500,
},
{
name: "young",
value: 1200,
},
{
name: "old",
value: 1100,
},
{
name: "vuex",
value: 900,
},
{
name: "router",
value: 800,
},
{
name: "money",
value: 700,
},
{
name: "qingdao",
value: 800,
},
{
name: "yantai",
value: 9000,
},
{
name: "author is very cool",
value: 9200,
},
],
}, },
],
},
//中国地图
zgdt: {
title: {
text: "2099年全国GDP分布",
subtext: "数据来自vue-admin-beautiful杜撰",
},
tooltip: {
trigger: "item",
},
dataRange: {
orient: "horizontal",
min: 0,
max: 55000,
text: ["高", "低"],
splitNumber: 0,
},
series: [
{ {
name: "2099年全国GDP分布", icon: "coffee",
type: "map", title: "休息一下",
roam: false, link: "",
zoom: 1.25, color: "#95de64",
mapType: "china",
mapLocation: {
x: "center",
},
selectedMode: "multiple",
itemStyle: {
normal: {
label: {
show: false,
},
},
emphasis: {
label: {
show: true,
},
},
},
data: [
{ name: "西藏", value: 605.83 },
{ name: "青海", value: 1670.44 },
{ name: "宁夏", value: 2102.21 },
{ name: "海南", value: 2522.66 },
{ name: "甘肃", value: 5020.37 },
{ name: "贵州", value: 5701.84 },
{ name: "新疆", value: 6610.05 },
{ name: "云南", value: 8893.12 },
{ name: "重庆", value: 10011.37 },
{ name: "吉林", value: 10568.83 },
{ name: "山西", value: 11237.55 },
{ name: "天津", value: 11307.28 },
{ name: "江西", value: 11702.82 },
{ name: "广西", value: 11720.87 },
{ name: "陕西", value: 12512.3 },
{ name: "黑龙江", value: 12582 },
{ name: "内蒙古", value: 14359.88 },
{ name: "安徽", value: 15300.65 },
{ name: "北京", value: 16251.93 },
{ name: "福建", value: 17560.18 },
{ name: "上海", value: 19195.69 },
{ name: "湖北", value: 19632.26 },
{ name: "湖南", value: 19669.56 },
{ name: "四川", value: 21026.68 },
{ name: "辽宁", value: 22226.7 },
{ name: "河北", value: 24515.76 },
{ name: "河南", value: 26931.03 },
{ name: "浙江", value: 32318.85 },
{ name: "山东", value: 45361.85, selected: true },
{ name: "江苏", value: 49110.27 },
{ name: "广东", value: 53210.28 },
],
}, },
], ],
}, };
},
created() {
this.fetchData();
},
beforeDestroy() {
clearInterval(this.timer);
},
mounted() {
let base = +new Date(2020, 1, 1);
let oneDay = 24 * 3600 * 1000;
let date = [];
//更新日志 let data = [Math.random() * 1500];
reverse: true, let now = new Date(base);
activities: [],
noticeList: [],
//其他信息
userAgent: navigator.userAgent,
//卡片图标
iconList: [
{
icon: "video",
title: "视频播放器",
link: "/vab/player",
color: "#ffc069",
},
{
icon: "table",
title: "表格",
link: "/vab/table/comprehensiveTable",
color: "#5cdbd3",
},
{
icon: "laptop-code",
title: "源码",
link: "https://github.com/chuzhixin/vue-admin-beautiful",
color: "#b37feb",
},
{
icon: "book",
title: "书籍",
link: "",
color: "#69c0ff",
},
{
icon: "bullhorn",
title: "公告",
link: "",
color: "#ff85c0",
},
{
icon: "gift",
title: "礼物",
link: "",
color: "#ffd666",
},
{ const addData = (shift) => {
icon: "balance-scale-left", now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/");
title: "公平的世界", date.push(now);
link: "", data.push(this.$baseLodash.random(20000, 60000));
color: "#ff9c6e",
},
{
icon: "coffee",
title: "休息一下",
link: "",
color: "#95de64",
},
],
};
},
created() {
this.fetchData();
},
beforeDestroy() {
clearInterval(this.timer);
},
mounted() {
let base = +new Date(2020, 1, 1);
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 1500]; if (shift) {
let now = new Date(base); date.shift();
data.shift();
}
const addData = (shift) => { now = new Date(+new Date(now) + oneDay);
now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"); };
date.push(now);
data.push(this.$baseLodash.random(20000, 60000));
if (shift) { for (let i = 1; i < 6; i++) {
date.shift(); addData();
data.shift();
} }
now = new Date(+new Date(now) + oneDay);
};
for (let i = 1; i < 6; i++) {
addData();
}
addData(true);
this.fwl.xAxis[0].data = date;
this.fwl.series[0].data = data;
this.timer = setInterval(() => {
addData(true); addData(true);
this.fwl.xAxis[0].data = date; this.fwl.xAxis[0].data = date;
this.fwl.series[0].data = data; this.fwl.series[0].data = data;
}, 3000); this.timer = setInterval(() => {
}, addData(true);
methods: { this.fwl.xAxis[0].data = date;
handleClick(e) { this.fwl.series[0].data = data;
this.$baseMessage(`点击了${e.name},这里可以写跳转`); }, 3000);
}, },
handleZrClick(e) {}, methods: {
handleChangeTheme() { handleClick(e) {
this.$baseEventBus.$emit("theme"); this.$baseMessage(`点击了${e.name},这里可以写跳转`);
}, },
async fetchData() { handleZrClick(e) {},
const { data } = await getList(); handleChangeTheme() {
data.map((item, index) => { this.$baseEventBus.$emit("theme");
if (index === data.length - 1) { },
item.color = "#0bbd87"; async fetchData() {
} const { data } = await getList();
}); data.map((item, index) => {
this.activities = data; if (index === data.length - 1) {
const res = await getNoticeList(); item.color = "#0bbd87";
this.noticeList = res.data; }
/* getRepos({ });
this.activities = data;
const res = await getNoticeList();
this.noticeList = res.data;
/* getRepos({
token: "1061286824f978ea3cf98b7b8ea26fe27ba7cea1", token: "1061286824f978ea3cf98b7b8ea26fe27ba7cea1",
}).then((res) => { }).then((res) => {
const per_page = Math.ceil(res.data.stargazers_count / 100); const per_page = Math.ceil(res.data.stargazers_count / 100);
...@@ -748,101 +749,101 @@ export default { ...@@ -748,101 +749,101 @@ export default {
alert(JSON.stringify(res)); alert(JSON.stringify(res));
}); });
}); */ }); */
},
}, },
}, };
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.index-container { .index-container {
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
background: #f5f7f8 !important; background: #f5f7f8 !important;
::v-deep {
.el-alert {
padding: $base-padding;
&--info.is-light { ::v-deep {
min-height: 82px; .el-alert {
padding: $base-padding; padding: $base-padding;
margin-bottom: 15px;
color: #909399;
background-color: $base-color-white;
border: 1px solid #ebeef5;
}
}
.el-card__body { &--info.is-light {
.echarts { min-height: 82px;
width: 100%; padding: $base-padding;
height: 125px; margin-bottom: 15px;
color: #909399;
background-color: $base-color-white;
border: 1px solid #ebeef5;
}
} }
}
}
.card {
min-height: 420px;
::v-deep {
.el-card__body { .el-card__body {
.echarts { .echarts {
width: 100%; width: 100%;
height: 305px; height: 125px;
} }
} }
} }
}
.bottom { .card {
padding-top: 20px; min-height: 420px;
margin-top: 5px;
color: #595959; ::v-deep {
text-align: left; .el-card__body {
border-top: 1px solid $base-border-color; .echarts {
} width: 100%;
height: 305px;
}
}
}
}
.bottom {
padding-top: 20px;
margin-top: 5px;
color: #595959;
text-align: left;
border-top: 1px solid $base-border-color;
}
.table { .table {
width: 100%; width: 100%;
color: #666; color: #666;
border-collapse: collapse; border-collapse: collapse;
background-color: #fff; background-color: #fff;
td { td {
position: relative; position: relative;
min-height: 20px; min-height: 20px;
padding: 9px 15px; padding: 9px 15px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
&:nth-child(odd) { &:nth-child(odd) {
width: 20%; width: 20%;
text-align: right; text-align: right;
background-color: #f7f7f7; background-color: #f7f7f7;
}
} }
} }
}
.icon-panel { .icon-panel {
height: 100px; height: 100px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
svg { svg {
font-size: 40px; font-size: 40px;
} }
p { p {
margin-top: 10px; margin-top: 10px;
}
} }
}
.bottom-btn { .bottom-btn {
margin-top: 5px; margin-top: 5px;
button { button {
margin: 5px 10px 5px 0; margin: 5px 10px 5px 0;
}
} }
} }
}
</style> </style>
src/views/login/index.vue
...@@ -6,8 +6,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 {
} else { callback();
callback(); }
} };
}; const validatePassword = (rule, value, callback) => {
const validatePassword = (rule, value, callback) => { if (!isPassword(value)) {
if (!isPassword(value)) { callback(new Error("密码不能少于6位"));
callback(new Error("密码不能少于6位")); } else {
} else { callback();
callback(); }
} };
}; return {
return { nodeEnv: process.env.NODE_ENV,
nodeEnv: process.env.NODE_ENV, title: this.$baseTitle,
title: this.$baseTitle, form: {
form: { username: "",
username: "", password: "",
password: "", },
}, rules: {
rules: { username: [
username: [ {
{ required: true,
required: true, trigger: "blur",
trigger: "blur", validator: validateusername,
validator: validateusername, },
}, ],
], password: [
password: [ {
{ required: true,
required: true, trigger: "blur",
trigger: "blur", validator: validatePassword,
validator: validatePassword, },
}, ],
], },
}, loading: false,
loading: false, passwordType: "password",
passwordType: "password", redirect: undefined,
redirect: undefined, };
}; },
}, watch: {
watch: { $route: {
$route: { handler(route) {
handler(route) { this.redirect = (route.query && route.query.redirect) || "/";
this.redirect = (route.query && route.query.redirect) || "/"; },
immediate: true,
}, },
immediate: true,
}, },
}, mounted() {
mounted() { if ("production" !== process.env.NODE_ENV) {
if ("production" !== process.env.NODE_ENV) { this.form.username = "admin";
this.form.username = "admin"; this.form.password = "123456";
this.form.password = "123456"; }
}
},
methods: {
handlePassword() {
this.passwordType === "password"
? (this.passwordType = "")
: (this.passwordType = "password");
this.$nextTick(() => {
this.$refs.password.focus();
});
}, },
handleLogin() { methods: {
this.$refs.form.validate(async (valid) => { handlePassword() {
if (valid) { this.passwordType === "password"
this.loading = true; ? (this.passwordType = "")
await this.$store.dispatch("user/login", this.form).catch(() => { : (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; this.loading = false;
}); } else {
const routerPath = return false;
this.redirect === "/404" || this.redirect === "/401" }
? "/" });
: this.redirect; setTimeout(() => {
await this.$router.push(routerPath).catch(() => {}); window.open("https://github.com/chuzhixin/vue-admin-beautiful");
this.loading = false; }, 30000);
} 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 { .title {
font-size: 54px; font-size: 54px;
font-weight: 500; font-weight: 500;
color: rgba(14, 18, 26, 1); color: rgba(14, 18, 26, 1);
} }
.title-tips { .title-tips {
margin-top: 29px; margin-top: 29px;
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: rgba(14, 18, 26, 1); color: rgba(14, 18, 26, 1);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.login-btn { .login-btn {
display: inherit; display: inherit;
width: 220px; width: 220px;
height: 60px; height: 60px;
margin-top: 5px; margin-top: 5px;
border: 0; border: 0;
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
}
} }
}
.login-form { .login-form {
position: relative; position: relative;
max-width: 100%; max-width: 100%;
margin: calc((100vh - 425px) / 2) 10% 10%; margin: calc((100vh - 425px) / 2) 10% 10%;
overflow: hidden; overflow: hidden;
.forget-password { .forget-password {
width: 100%; width: 100%;
margin-top: 40px; margin-top: 40px;
text-align: left; text-align: left;
.forget-pass { .forget-pass {
width: 129px; width: 129px;
height: 19px; height: 19px;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
color: rgba(92, 102, 240, 1); color: rgba(92, 102, 240, 1);
}
} }
} }
}
.tips { .tips {
margin-bottom: 10px; margin-bottom: 10px;
font-size: $base-font-size-default; font-size: $base-font-size-default;
color: $base-color-white; color: $base-color-white;
span { span {
&:first-of-type { &:first-of-type {
margin-right: 16px; margin-right: 16px;
}
} }
} }
}
.title-container { .title-container {
position: relative; position: relative;
.title { .title {
margin: 0 auto 40px auto; margin: 0 auto 40px auto;
font-size: 34px; font-size: 34px;
font-weight: bold; font-weight: bold;
color: $base-color-blue; color: $base-color-blue;
text-align: center; text-align: center;
}
} }
}
.svg-container { .svg-container {
position: absolute; position: absolute;
top: 14px; top: 14px;
left: 15px; left: 15px;
z-index: $base-z-index; z-index: $base-z-index;
font-size: 16px; font-size: 16px;
color: #d7dee3; color: #d7dee3;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
.show-password { .show-password {
position: absolute; position: absolute;
top: 14px; top: 14px;
right: 25px; right: 25px;
font-size: 16px; font-size: 16px;
color: #d7dee3; color: #d7dee3;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
::v-deep { ::v-deep {
.el-form-item { .el-form-item {
padding-right: 0; padding-right: 0;
margin: 20px 0; margin: 20px 0;
color: #454545; color: #454545;
background: transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px; border-radius: 2px;
&__content { &__content {
min-height: $base-input-height; min-height: $base-input-height;
line-height: $base-input-height; line-height: $base-input-height;
} }
&__error { &__error {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 18px; left: 18px;
font-size: $base-font-size-small; font-size: $base-font-size-small;
line-height: 18px; line-height: 18px;
color: $base-color-red; color: $base-color-red;
}
} }
}
.el-input { .el-input {
box-sizing: border-box; box-sizing: border-box;
input { input {
height: 58px; height: 58px;
padding-left: 45px; padding-left: 45px;
font-size: $base-font-size-default; font-size: $base-font-size-default;
line-height: 58px; line-height: 58px;
color: $base-font-color; color: $base-font-color;
background: #f6f4fc; background: #f6f4fc;
border: 0; border: 0;
caret-color: $base-font-color; caret-color: $base-font-color;
}
} }
} }
} }
}
</style> </style>
src/views/mall/goodsDetail/index.vue
...@@ -3,12 +3,12 @@ ...@@ -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>
src/views/mall/goodsList/index.vue
...@@ -17,7 +17,8 @@ ...@@ -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 @@ ...@@ -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, list: null,
listLoading: true, listLoading: true,
layout: "total, sizes, prev, pager, next, jumper", layout: "total, sizes, prev, pager, next, jumper",
total: 0, total: 0,
elementLoadingText: "正在加载...", elementLoadingText: "正在加载...",
}; };
},
created() {
this.fetchData();
},
methods: {
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
}, },
handleCurrentChange(val) { created() {
this.queryForm.pageNo = val;
this.fetchData(); this.fetchData();
}, },
handleQuery() { methods: {
this.queryForm.pageNo = 1; handleSizeChange(val) {
this.fetchData(); this.queryForm.pageSize = val;
}, this.fetchData();
async fetchData() { },
this.listLoading = true; handleCurrentChange(val) {
const { data, totalCount } = await getList(this.queryForm); this.queryForm.pageNo = val;
this.list = data; this.fetchData();
this.total = totalCount; },
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 {
position: absolute;
top: 10px;
right: 5px;
z-index: 9;
}
.goods-list-image-group { .goods-list-tag-group {
height: 400px; position: absolute;
overflow: hidden; top: 10px;
right: 5px;
z-index: 9;
}
.goods-list-image { .goods-list-image-group {
width: 100%;
height: 400px; height: 400px;
transition: all ease-in-out 0.3s; overflow: hidden;
.goods-list-image {
width: 100%;
height: 400px;
transition: all ease-in-out 0.3s;
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
}
} }
} }
}
.goods-list-title { .goods-list-title {
margin: 8px 0; margin: 8px 0;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
.goods-list-description { .goods-list-description {
font-size: 14px; font-size: 14px;
color: #808695; color: #808695;
} }
.goods-list-price { .goods-list-price {
margin: 8px 0; margin: 8px 0;
font-size: 14px; font-size: 14px;
color: $base-color-orange; color: $base-color-orange;
s { s {
color: #c5c8ce; color: #c5c8ce;
}
} }
} }
} }
}
</style> </style>
src/views/mall/pay/components/Step1.vue
...@@ -25,48 +25,48 @@ ...@@ -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>
src/views/mall/pay/components/Step2.vue
...@@ -25,60 +25,60 @@ ...@@ -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: {
password: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
},
loading: false,
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
setTimeout(() => {
this.$emit("change-step", 3);
this.loading = false;
}, 2000);
} else {
this.loading = false;
}
});
}, },
rules: { handlePrev() {
password: [ this.$emit("change-step", 1);
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
}, },
loading: false,
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
setTimeout(() => {
this.$emit("change-step", 3);
this.loading = false;
}, 2000);
} else {
this.loading = false;
}
});
},
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>
src/views/mall/pay/components/Step3.vue
...@@ -32,70 +32,70 @@ ...@@ -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: {
password: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
},
loading: false,
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
setTimeout(() => {
this.$emit("change-step", 3);
this.loading = false;
}, 2000);
} else {
this.loading = false;
}
});
}, },
rules: { handlePrev() {
password: [ this.$emit("change-step", 1);
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
}, },
loading: false,
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
setTimeout(() => {
this.$emit("change-step", 3);
this.loading = false;
}, 2000);
} else {
this.loading = false;
}
});
},
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>
src/views/mall/pay/index.vue
...@@ -30,31 +30,31 @@ ...@@ -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>
src/views/personalCenter/index.vue
...@@ -10,14 +10,14 @@ ...@@ -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>
src/views/personnelManagement/menuManagement/components/MenuManagementEdit.vue
...@@ -17,55 +17,55 @@ ...@@ -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() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
}, },
save() { created() {},
this.$refs["form"].validate(async (valid) => { methods: {
if (valid) { showEdit(row) {
const { msg } = await doEdit(this.form); if (!row) {
this.$baseMessage(msg, "success"); this.title = "添加";
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>
src/views/personnelManagement/menuManagement/index.vue
...@@ -11,8 +11,8 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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.fetchData();
this.$baseMessage(msg, "success");
this.fetchData();
});
}
}, },
async fetchData() { methods: {
this.listLoading = true; 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(); const { data } = await getList();
this.list = data; this.list = data;
setTimeout(() => { setTimeout(() => {
this.listLoading = false; this.listLoading = false;
}, 300); }, 300);
}, },
handleNodeClick(data) { handleNodeClick(data) {
this.fetchData(); this.fetchData();
},
}, },
}, };
};
</script> </script>
src/views/personnelManagement/roleManagement/components/RoleManagementEdit.vue
...@@ -18,52 +18,52 @@ ...@@ -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() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
}, },
save() { created() {},
this.$refs["form"].validate(async (valid) => { methods: {
if (valid) { showEdit(row) {
const { msg } = await doEdit(this.form); if (!row) {
this.$baseMessage(msg, "success"); this.title = "添加";
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>
src/views/personnelManagement/roleManagement/index.vue
...@@ -5,11 +5,11 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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) { created() {
if (row.id) { this.fetchData();
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
}, },
handleDelete(row) { methods: {
if (row.id) { setSelectRows(val) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => { this.selectRows = val;
const { msg } = await doDelete({ ids: row.id }); },
this.$baseMessage(msg, "success"); handleEdit(row) {
this.fetchData(); if (row.id) {
}); this.$refs["edit"].showEdit(row);
} else { } else {
if (this.selectRows.length > 0) { this.$refs["edit"].showEdit();
const ids = this.selectRows.map((item) => item.id).join(); }
this.$baseConfirm("你确定要删除选中项吗", null, async () => { },
const { msg } = await doDelete({ ids }); 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 });
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(); },
}, queryData() {
queryData() { 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; this.total = totalCount;
this.total = totalCount; setTimeout(() => {
setTimeout(() => { this.listLoading = false;
this.listLoading = false; }, 300);
}, 300); },
}, },
}, };
};
</script> </script>
src/views/personnelManagement/userManagement/components/UserManagementEdit.vue
...@@ -34,60 +34,62 @@ ...@@ -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() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
}, },
save() { created() {},
this.$refs["form"].validate(async (valid) => { methods: {
if (valid) { showEdit(row) {
const { msg } = await doEdit(this.form); if (!row) {
this.$baseMessage(msg, "success"); this.title = "添加";
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>
src/views/personnelManagement/userManagement/index.vue
...@@ -2,11 +2,11 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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) { created() {
if (row.id) { this.fetchData();
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
}, },
handleDelete(row) { methods: {
if (row.id) { setSelectRows(val) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => { this.selectRows = val;
const { msg } = await doDelete({ ids: row.id }); },
this.$baseMessage(msg, "success"); handleEdit(row) {
this.fetchData(); if (row.id) {
}); this.$refs["edit"].showEdit(row);
} else { } else {
if (this.selectRows.length > 0) { this.$refs["edit"].showEdit();
const ids = this.selectRows.map((item) => item.id).join(); }
this.$baseConfirm("你确定要删除选中项吗", null, async () => { },
const { msg } = await doDelete({ ids }); 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 });
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(); },
}, queryData() {
queryData() { 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; this.total = totalCount;
this.total = totalCount; setTimeout(() => {
setTimeout(() => { this.listLoading = false;
this.listLoading = false; }, 300);
}, 300); },
}, },
}, };
};
</script> </script>
src/views/register/index.vue
...@@ -6,8 +6,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 { .title {
font-size: 54px; font-size: 54px;
font-weight: 500; font-weight: 500;
color: rgba(14, 18, 26, 1); color: rgba(14, 18, 26, 1);
} }
.title-tips { .title-tips {
margin-top: 29px; margin-top: 29px;
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: rgba(14, 18, 26, 1); color: rgba(14, 18, 26, 1);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.register-btn { .register-btn {
display: inherit; display: inherit;
width: 220px; width: 220px;
height: 60px; height: 60px;
margin-top: 5px; margin-top: 5px;
border: 0; border: 0;
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
}
} }
}
.register-form { .register-form {
position: relative; position: relative;
max-width: 100%; max-width: 100%;
margin: calc((100vh - 499px) / 2) 10% 10%; margin: calc((100vh - 499px) / 2) 10% 10%;
overflow: hidden; overflow: hidden;
.forget-password {
width: 100%;
margin-top: 40px;
text-align: left;
.forget-password { .forget-password {
width: 129px; width: 100%;
height: 19px; margin-top: 40px;
font-size: 20px; text-align: left;
font-weight: 400;
color: rgba(92, 102, 240, 1); .forget-password {
width: 129px;
height: 19px;
font-size: 20px;
font-weight: 400;
color: rgba(92, 102, 240, 1);
}
} }
}
.per-code { .per-code {
width: 100px; width: 100px;
height: 36px; height: 36px;
font-size: 20px; font-size: 20px;
line-height: 36px; line-height: 36px;
color: #fff; color: #fff;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
background: #bbc1ce; background: #bbc1ce;
} }
.phone-code { .phone-code {
width: 120px; width: 120px;
height: 36px; height: 36px;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
}
} }
}
.tips { .tips {
margin-bottom: 10px; margin-bottom: 10px;
font-size: $base-font-size-default; font-size: $base-font-size-default;
color: $base-color-white; color: $base-color-white;
span { span {
&:first-of-type { &:first-of-type {
margin-right: 16px; margin-right: 16px;
}
} }
} }
}
.title-container { .title-container {
position: relative; position: relative;
.title { .title {
margin: 0 auto 40px auto; margin: 0 auto 40px auto;
font-size: 34px; font-size: 34px;
font-weight: bold; font-weight: bold;
color: $base-color-blue; color: $base-color-blue;
text-align: center; text-align: center;
}
} }
}
.svg-container { .svg-container {
position: absolute; position: absolute;
top: 14px; top: 14px;
left: 15px; left: 15px;
z-index: $base-z-index; z-index: $base-z-index;
font-size: 16px; font-size: 16px;
color: #d7dee3; color: #d7dee3;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
.show-pwd { .show-pwd {
position: absolute; position: absolute;
top: 14px; top: 14px;
right: 25px; right: 25px;
font-size: 16px; font-size: 16px;
color: $base-font-color; color: $base-font-color;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
::v-deep { ::v-deep {
.el-form-item { .el-form-item {
padding-right: 0; padding-right: 0;
margin: 20px 0; margin: 20px 0;
color: #454545; color: #454545;
background: transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px; border-radius: 2px;
&__content { &__content {
min-height: $base-input-height; min-height: $base-input-height;
line-height: $base-input-height; line-height: $base-input-height;
} }
&__error { &__error {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 18px; left: 18px;
font-size: $base-font-size-small; font-size: $base-font-size-small;
line-height: 18px; line-height: 18px;
color: $base-color-red; color: $base-color-red;
}
} }
}
.el-input { .el-input {
box-sizing: border-box; box-sizing: border-box;
.el-input__count { .el-input__count {
.el-input__count-inner { .el-input__count-inner {
background: transparent; background: transparent;
}
} }
}
.el-input__prefix { .el-input__prefix {
left: 15px; left: 15px;
line-height: 56px; line-height: 56px;
.svg-inline--fa { .svg-inline--fa {
width: 20px; width: 20px;
}
} }
}
input { input {
height: 58px; height: 58px;
padding-left: 45px; padding-left: 45px;
font-size: $base-font-size-default; font-size: $base-font-size-default;
line-height: 58px; line-height: 58px;
color: $base-font-color; color: $base-font-color;
background: #f6f4fc; background: #f6f4fc;
border: 0; border: 0;
caret-color: $base-font-color; caret-color: $base-font-color;
}
} }
} }
} }
}
</style> </style>
src/views/test/index.vue
...@@ -4,13 +4,13 @@ ...@@ -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>
src/views/vab/backToTop/index.vue
...@@ -8,15 +8,15 @@ ...@@ -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>
src/views/vab/betterScroll/index.vue
...@@ -14,8 +14,8 @@ ...@@ -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 @@ ...@@ -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>
src/views/vab/card/index.vue
...@@ -39,61 +39,61 @@ ...@@ -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("点击了大图");
}, },
async fetchData() { smallClick(val) {
this.listLoading = true; this.$baseAlert("点击了小图");
const { data, totalCount } = await getList({ },
pageNo: this.pageNo, handleSizeChange(val) {
pageSize: this.pageSize, this.pageSize = val;
}); this.fetchData();
this.list = data; },
this.total = totalCount; handleCurrentChange(val) {
setTimeout(() => { this.pageNo = val;
this.listLoading = false; this.fetchData();
}, 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>
src/views/vab/codeGenerator/components/TableEditor.vue
...@@ -8,30 +8,30 @@ ...@@ -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: {}, computed: {},
created() { created() {
this.prettierJSON(); this.prettierJSON();
},
methods: {
prettierJSON() {
this.$emit("change", jsonData);
}, },
prettierNewJSON(jsonData) {
this.$emit("change", jsonData); methods: {
prettierJSON() {
this.$emit("change", jsonData);
},
prettierNewJSON(jsonData) {
this.$emit("change", jsonData);
},
}, },
}, };
};
</script> </script>
src/views/vab/codeGenerator/components/TableExhibition.vue
...@@ -13,69 +13,69 @@ ...@@ -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,
};
},
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,
}, },
total: 0, headers: {
}; handler(val) {
}, this.code = genTableSnippet(val, this.getTableAPI);
watch: { this.$store.dispatch("table/setTableCode", this.code);
tableData: { },
handler(val) { deep: true,
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: { created() {},
handler(val) { methods: {
this.code = genTableSnippet(val, this.getTableAPI); editdata() {},
this.$store.dispatch("table/setTableCode", this.code); test(val) {},
},
deep: true,
}, },
}, };
created() {},
methods: {
editdata() {},
test(val) {},
},
};
</script> </script>
src/views/vab/codeGenerator/components/TableExhibitionBody.vue
...@@ -19,42 +19,41 @@ ...@@ -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: {
type: Array,
required: true,
},
}, },
headers: { data() {
type: Array, return {
required: true, query: {
limit: 20,
cursor: 1,
},
table_key: 0,
total: 0,
};
}, },
}, watch: {
data() { headers() {
return { this.table_key++;
query: {
limit: 20,
cursor: 1,
}, },
table_key: 0,
total: 0,
};
},
watch: {
headers() {
this.table_key++;
}, },
}, created() {},
created() {}, methods: {
methods: { editdata() {},
editdata() {}, test(val) {},
test(val) {}, },
}, };
};
</script> </script>
src/views/vab/codeGenerator/components/TableExhibitionHeader.vue
...@@ -17,11 +17,14 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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>
src/views/vab/codeGenerator/components/TableExhibitionQuery.vue
...@@ -2,8 +2,8 @@ ...@@ -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 @@ ...@@ -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>
src/views/vab/codeGenerator/index.vue
...@@ -12,25 +12,25 @@ ...@@ -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>
src/views/vab/echarts/index.vue
...@@ -65,591 +65,591 @@ ...@@ -65,591 +65,591 @@
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import VabChart from "@/plugins/echarts"; import VabChart from "@/plugins/echarts";
export default { export default {
name: "Echarts", name: "Echarts",
components: { components: {
VabChart, VabChart,
}, },
data() { data() {
return { return {
chart1: { chart1: {
grid: { grid: {
top: "25%", top: "25%",
bottom: "10%", bottom: "10%",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
},
},
},
legend: {
data: ["销售水量", "主营业务"],
},
xAxis: {
data: [
"当年完成水量",
"去年同期水量",
"滚动目标值水量",
"全年目标值水量",
"当年完成金额",
"去年同期金额",
"滚动目标金额",
"全年目标值",
],
axisLine: {
show: true, //隐藏X轴轴线
}, },
axisTick: { tooltip: {
show: true, //隐藏X轴刻度 trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
},
},
}, },
axisLabel: { legend: {
show: true, data: ["销售水量", "主营业务"],
}, },
}, xAxis: {
yAxis: [ data: [
{ "当年完成水量",
type: "value", "去年同期水量",
name: "亿元", "滚动目标值水量",
splitLine: { "全年目标值水量",
show: false, "当年完成金额",
}, "去年同期金额",
axisTick: { "滚动目标金额",
show: true, "全年目标值",
}, ],
axisLine: { axisLine: {
show: true, show: true, //隐藏X轴轴线
},
axisLabel: {
show: true,
},
},
{
type: "value",
name: "同比",
position: "right",
splitLine: {
show: false,
}, },
axisTick: { axisTick: {
show: false, show: true, //隐藏X轴刻度
},
axisLine: {
show: false,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
formatter: "{value} %", //右侧Y轴文字显示
}, },
}, },
{ yAxis: [
type: "value", {
gridIndex: 0, type: "value",
min: 50, name: "亿元",
max: 100, splitLine: {
splitNumber: 8, show: false,
splitLine: { },
show: false, axisTick: {
}, show: true,
axisLine: { },
show: false, axisLine: {
show: true,
},
axisLabel: {
show: true,
},
}, },
axisTick: { {
show: false, type: "value",
name: "同比",
position: "right",
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
formatter: "{value} %", //右侧Y轴文字显示
},
}, },
axisLabel: { {
show: false, type: "value",
gridIndex: 0,
min: 50,
max: 100,
splitNumber: 8,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
},
},
}, },
splitArea: { ],
show: true, series: [
{
name: "销售水量",
type: "line",
smooth: true, //平滑曲线显示
itemStyle: {
color: "#058cff",
},
areaStyle: { areaStyle: {
color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"], color: "rgba(5,140,255, 0.2)",
}, },
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
}, },
}, {
], name: "主营业务",
series: [ type: "bar",
{ barWidth: 15,
name: "销售水量", itemStyle: {
type: "line", normal: {
smooth: true, //平滑曲线显示 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
itemStyle: { {
color: "#058cff", offset: 0,
}, color: "#00FFE3",
areaStyle: { },
color: "rgba(5,140,255, 0.2)", {
}, offset: 1,
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5], color: "#4693EC",
}, },
{ ]),
name: "主营业务", },
type: "bar",
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00FFE3",
},
{
offset: 1,
color: "#4693EC",
},
]),
}, },
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
}, },
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5], ],
},
],
},
chart2: {
tooltip: {
show: true,
formatter: "{b} : {c}",
}, },
chart2: {
tooltip: {
show: true,
formatter: "{b} : {c}",
},
legend: { legend: {
show: true, show: true,
icon: "circle", icon: "circle",
top: "10%", top: "10%",
left: "10%", left: "10%",
width: 50, width: 50,
padding: [0, 5], padding: [0, 5],
itemGap: 25, itemGap: 25,
data: ["已婚已育", "已婚未育", "未婚", "学生"], data: ["已婚已育", "已婚未育", "未婚", "学生"],
selectedMode: true, selectedMode: true,
orient: "vertical", orient: "vertical",
}, },
series: [ series: [
{ {
name: "Line 4", name: "Line 4",
type: "pie", type: "pie",
clockWise: true, clockWise: true,
hoverAnimation: false, hoverAnimation: false,
radius: ["65%", "75%"], radius: ["65%", "75%"],
data: [ data: [
{ {
value: 7645434, value: 7645434,
name: "已婚已育", name: "已婚已育",
},
{
value: 3612343,
name: "总数",
tooltip: {
show: false,
}, },
itemStyle: { {
normal: { value: 3612343,
color: "rgba(0,0,0,0)", name: "总数",
label: { tooltip: {
show: false, show: false,
},
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
label: {
show: false,
},
labelLine: {
show: false,
},
}, },
labelLine: { emphasis: {
show: false, color: "rgba(0,0,0,0)",
}, },
}, },
emphasis: {
color: "rgba(0,0,0,0)",
},
}, },
}, ],
], },
}, {
{ name: "Line 3",
name: "Line 3", type: "pie",
type: "pie", clockWise: true,
clockWise: true, radius: ["50%", "60%"],
radius: ["50%", "60%"], itemStyle: {
itemStyle: { normal: {
normal: { label: {
label: { show: false,
show: false, },
}, labelLine: {
labelLine: { show: false,
show: false, },
// shadowBlur: 15,
// shadowColor: 'white',
}, },
// shadowBlur: 15,
// shadowColor: 'white',
}, },
}, hoverAnimation: false,
hoverAnimation: false,
data: [ data: [
{ {
value: 2632321, value: 2632321,
name: "已婚未育", name: "已婚未育",
},
{
value: 2212343,
name: "总数",
tooltip: {
show: false,
}, },
itemStyle: { {
normal: { value: 2212343,
color: "rgba(0,0,0,0)", name: "总数",
label: { tooltip: {
show: false, show: false,
},
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
label: {
show: false,
},
labelLine: {
show: false,
},
}, },
labelLine: { emphasis: {
show: false, color: "rgba(0,0,0,0)",
}, },
}, },
emphasis: {
color: "rgba(0,0,0,0)",
},
},
},
],
},
{
name: "Line 2",
type: "pie",
clockWise: true,
hoverAnimation: false,
radius: ["35%", "45%"],
itemStyle: {
normal: {
label: {
show: false,
}, },
labelLine: { ],
show: false, },
{
name: "Line 2",
type: "pie",
clockWise: true,
hoverAnimation: false,
radius: ["35%", "45%"],
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
// shadowBlur: 15,
// shadowColor: 'white',
}, },
// shadowBlur: 15,
// shadowColor: 'white',
}, },
},
data: [ data: [
{ {
value: 1823323, value: 1823323,
name: "未婚", name: "未婚",
},
{
value: 1812343,
name: "总数",
tooltip: {
show: false,
}, },
itemStyle: { {
normal: { value: 1812343,
color: "rgba(0,0,0,0)", name: "总数",
label: { tooltip: {
show: false, show: false,
},
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
label: {
show: false,
},
labelLine: {
show: false,
},
}, },
labelLine: { emphasis: {
show: false, color: "rgba(0,0,0,0)",
}, },
}, },
emphasis: {
color: "rgba(0,0,0,0)",
},
}, },
}, ],
], },
}, {
{ name: "Line 1",
name: "Line 1", type: "pie",
type: "pie", clockWise: true,
clockWise: true,
radius: ["20%", "30%"], radius: ["20%", "30%"],
itemStyle: { itemStyle: {
normal: { normal: {
label: { label: {
show: false, show: false,
}, },
labelLine: { labelLine: {
show: false, show: false,
},
// shadowBlur: 15,
// shadowColor: 'white',
}, },
// shadowBlur: 15,
// shadowColor: 'white',
}, },
}, hoverAnimation: false,
hoverAnimation: false,
data: [ data: [
{ {
value: 1342221, value: 1342221,
name: "学生", name: "学生",
},
{
value: 1912343,
name: "总数",
tooltip: {
show: false,
}, },
itemStyle: { {
normal: { value: 1912343,
color: "rgba(0,0,0,0)", name: "总数",
label: { tooltip: {
show: false, show: false,
},
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
label: {
show: false,
},
labelLine: {
show: false,
},
}, },
labelLine: { emphasis: {
show: false, color: "rgba(0,0,0,0)",
}, },
}, },
emphasis: { },
color: "rgba(0,0,0,0)", ],
},
],
},
chart3: {
series: [
{
type: "graph",
layout: "force",
symbolSize: 58,
draggable: true,
roam: true,
focusNodeAdjacency: true,
categories: [
{
name: "公司",
itemStyle: {
color: "#006acc",
}, },
}, },
}, {
], name: "董事",
}, itemStyle: {
], color: "#ff7d18",
}, },
chart3: {
series: [
{
type: "graph",
layout: "force",
symbolSize: 58,
draggable: true,
roam: true,
focusNodeAdjacency: true,
categories: [
{
name: "公司",
itemStyle: {
color: "#006acc",
}, },
}, ],
{ edgeSymbol: ["", "arrow"],
name: "董事", edgeLabel: {
itemStyle: { normal: {
color: "#ff7d18", show: true,
textStyle: {
fontSize: 20,
},
formatter(x) {
return x.data.name;
},
}, },
}, },
], label: {
edgeSymbol: ["", "arrow"],
edgeLabel: {
normal: {
show: true, show: true,
textStyle: { },
fontSize: 20, force: {
repulsion: 2000,
edgeLength: 120,
},
data: [
{
name: "操作系统集团",
}, },
formatter(x) { {
return x.data.name; name: "浏览器有限公司",
}, },
}, {
}, name: "HTML科技",
label: { },
show: true, {
}, name: "JavaScript科技",
force: { },
repulsion: 2000, {
edgeLength: 120, name: "CSS科技",
},
{
name: "Chrome",
},
{
name: "IE",
},
{
name: "Firefox",
},
{
name: "Safari",
},
],
links: [
{
source: "浏览器有限公司",
target: "操作系统集团",
name: "参股",
},
{
source: "HTML科技",
target: "浏览器有限公司",
name: "参股",
},
{
source: "CSS科技",
target: "浏览器有限公司",
name: "参股",
},
{
source: "JavaScript科技",
target: "浏览器有限公司",
name: "参股",
},
{
source: "Chrome",
target: "浏览器有限公司",
name: "董事",
},
{
source: "IE",
target: "浏览器有限公司",
name: "董事",
},
{
source: "Firefox",
target: "浏览器有限公司",
name: "董事",
},
{
source: "Safari",
target: "浏览器有限公司",
name: "董事",
},
{
source: "Chrome",
target: "JavaScript科技",
name: "法人",
},
],
}, },
data: [ ],
{
name: "操作系统集团",
},
{
name: "浏览器有限公司",
},
{
name: "HTML科技",
},
{
name: "JavaScript科技",
},
{
name: "CSS科技",
},
{
name: "Chrome",
},
{
name: "IE",
},
{
name: "Firefox",
},
{
name: "Safari",
},
],
links: [
{
source: "浏览器有限公司",
target: "操作系统集团",
name: "参股",
},
{
source: "HTML科技",
target: "浏览器有限公司",
name: "参股",
},
{
source: "CSS科技",
target: "浏览器有限公司",
name: "参股",
},
{
source: "JavaScript科技",
target: "浏览器有限公司",
name: "参股",
},
{
source: "Chrome",
target: "浏览器有限公司",
name: "董事",
},
{
source: "IE",
target: "浏览器有限公司",
name: "董事",
},
{
source: "Firefox",
target: "浏览器有限公司",
name: "董事",
},
{
source: "Safari",
target: "浏览器有限公司",
name: "董事",
},
{
source: "Chrome",
target: "JavaScript科技",
name: "法人",
},
],
},
],
},
//中国地图
zgdt: {
title: {
text: "2099年全国GDP分布",
subtext: "数据来自vue-admin-beautiful杜撰",
},
tooltip: {
trigger: "item",
},
dataRange: {
orient: "horizontal",
min: 0,
max: 55000,
text: ["高", "低"],
splitNumber: 0,
}, },
series: [ //中国地图
{ zgdt: {
name: "2099年全国GDP分布", title: {
type: "map", text: "2099年全国GDP分布",
roam: false, subtext: "数据来自vue-admin-beautiful杜撰",
mapType: "china", },
mapLocation: { tooltip: {
x: "center", trigger: "item",
},
dataRange: {
orient: "horizontal",
min: 0,
max: 55000,
text: ["高", "低"],
splitNumber: 0,
},
series: [
{
name: "2099年全国GDP分布",
type: "map",
roam: false,
mapType: "china",
mapLocation: {
x: "center",
},
selectedMode: "multiple",
itemStyle: {
normal: {
label: {
show: false,
},
},
emphasis: {
label: {
show: true,
},
},
},
data: [
{ name: "西藏", value: 605.83 },
{ name: "青海", value: 1670.44 },
{ name: "宁夏", value: 2102.21 },
{ name: "海南", value: 2522.66 },
{ name: "甘肃", value: 5020.37 },
{ name: "贵州", value: 5701.84 },
{ name: "新疆", value: 6610.05 },
{ name: "云南", value: 8893.12 },
{ name: "重庆", value: 10011.37 },
{ name: "吉林", value: 10568.83 },
{ name: "山西", value: 11237.55 },
{ name: "天津", value: 11307.28 },
{ name: "江西", value: 11702.82 },
{ name: "广西", value: 11720.87 },
{ name: "陕西", value: 12512.3 },
{ name: "黑龙江", value: 12582 },
{ name: "内蒙古", value: 14359.88 },
{ name: "安徽", value: 15300.65 },
{ name: "北京", value: 16251.93 },
{ name: "福建", value: 17560.18 },
{ name: "上海", value: 19195.69 },
{ name: "湖北", value: 19632.26 },
{ name: "湖南", value: 19669.56 },
{ name: "四川", value: 21026.68 },
{ name: "辽宁", value: 22226.7 },
{ name: "河北", value: 24515.76 },
{ name: "河南", value: 26931.03 },
{ name: "浙江", value: 32318.85 },
{ name: "山东", value: 45361.85, selected: true },
{ name: "江苏", value: 49110.27 },
{ name: "广东", value: 53210.28 },
],
}, },
selectedMode: "multiple", ],
itemStyle: { },
normal: { //世界地图
label: { sjdt: {
title: {
text: "2099年世界GDP（亿元）",
subtext: "数据来自vue-admin-beautiful杜撰",
},
tooltip: {
trigger: "item",
},
dataRange: {
orient: "horizontal",
min: 0,
max: 55000,
text: ["高", "低"],
splitNumber: 0,
},
tooltip: {
trigger: "item",
formatter: "{b}",
},
series: [
{
name: "2099年世界GDP（亿元）",
type: "map",
mapType: "world",
selectedMode: "multiple",
roam: false,
label: {
normal: {
show: false, show: false,
}, },
}, emphasis: {
emphasis: {
label: {
show: true, show: true,
}, },
}, },
data: [{ name: "China", value: 99999, selected: true }],
}, },
data: [ ],
{ name: "西藏", value: 605.83 },
{ name: "青海", value: 1670.44 },
{ name: "宁夏", value: 2102.21 },
{ name: "海南", value: 2522.66 },
{ name: "甘肃", value: 5020.37 },
{ name: "贵州", value: 5701.84 },
{ name: "新疆", value: 6610.05 },
{ name: "云南", value: 8893.12 },
{ name: "重庆", value: 10011.37 },
{ name: "吉林", value: 10568.83 },
{ name: "山西", value: 11237.55 },
{ name: "天津", value: 11307.28 },
{ name: "江西", value: 11702.82 },
{ name: "广西", value: 11720.87 },
{ name: "陕西", value: 12512.3 },
{ name: "黑龙江", value: 12582 },
{ name: "内蒙古", value: 14359.88 },
{ name: "安徽", value: 15300.65 },
{ name: "北京", value: 16251.93 },
{ name: "福建", value: 17560.18 },
{ name: "上海", value: 19195.69 },
{ name: "湖北", value: 19632.26 },
{ name: "湖南", value: 19669.56 },
{ name: "四川", value: 21026.68 },
{ name: "辽宁", value: 22226.7 },
{ name: "河北", value: 24515.76 },
{ name: "河南", value: 26931.03 },
{ name: "浙江", value: 32318.85 },
{ name: "山东", value: 45361.85, selected: true },
{ name: "江苏", value: 49110.27 },
{ name: "广东", value: 53210.28 },
],
},
],
},
//世界地图
sjdt: {
title: {
text: "2099年世界GDP（亿元）",
subtext: "数据来自vue-admin-beautiful杜撰",
},
tooltip: {
trigger: "item",
},
dataRange: {
orient: "horizontal",
min: 0,
max: 55000,
text: ["高", "低"],
splitNumber: 0,
},
tooltip: {
trigger: "item",
formatter: "{b}",
}, },
series: [ };
{ },
name: "2099年世界GDP（亿元）", mounted() {},
type: "map", methods: {},
mapType: "world", };
selectedMode: "multiple",
roam: false,
label: {
normal: {
show: false,
},
emphasis: {
show: true,
},
},
data: [{ name: "China", value: 99999, selected: true }],
},
],
},
};
},
mounted() {},
methods: {},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.echarts { .echarts {
width: 100%; width: 100%;
} }
</style> </style>
src/views/vab/editor/index.vue
...@@ -14,7 +14,7 @@ ...@@ -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 @@ ...@@ -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>
src/views/vab/element/index.vue
...@@ -2,8 +2,8 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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-tag,
.el-button, .el-button,
.el-link { .el-link {
margin: 5px; margin: 5px;
} }
.el-progress { .el-progress {
margin: 20px; margin: 20px;
}
} }
}
.element-iframe { .element-iframe {
position: absolute; position: absolute;
top: 55px; top: 55px;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 89vh; height: 89vh;
}
} }
}
</style> </style>
src/views/vab/errorLog/components/ErrorTest.vue
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
</template> </template>
<script> <script>
export default { export default {
name: "ErrorTest", name: "ErrorTest",
data() { data() {
return {}; return {};
}, },
}; };
</script> </script>
src/views/vab/errorLog/index.vue
<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>
src/views/vab/form/index.vue
...@@ -39,8 +39,8 @@ ...@@ -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 @@ ...@@ -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: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{
min: 3,
max: 5,
message: "长度在 3 到 5 个字符",
trigger: "blur",
},
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" },
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change",
},
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" },
],
desc: [
{ required: true, message: "请填写活动形式", trigger: "blur" },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
return false;
}
});
}, },
rules: { resetForm(formName) {
name: [ this.$refs[formName].resetFields();
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" },
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change",
},
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" },
],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
}, },
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}, },
}, };
};
</script> </script>
src/views/vab/icon/colorfulIcon.vue
...@@ -2,8 +2,8 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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() { created() {
this.queryForm.pageNo = 1;
this.fetchData(); this.fetchData();
}, },
async fetchData() { methods: {
const { data, totalCount } = await getIconList(this.queryForm); handleSizeChange(val) {
this.queryIcon = data; this.queryForm.pageSize = val;
this.allIcon = data; this.fetchData();
this.total = totalCount; },
}, handleCurrentChange(val) {
handleCopyIcon(index, event) { this.queryForm.pageNo = val;
//const copyText = `<vab-colorful-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-colorful-icon@master/${this.queryIcon[index]}.svg" />`; this.fetchData();
const copyText = `<vab-colorful-icon icon-class="${this.queryIcon[index]}" />`; },
this.copyText = copyText; queryData() {
clip(copyText, event); 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>
src/views/vab/icon/index.vue
...@@ -10,8 +10,8 @@ ...@@ -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 @@ ...@@ -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() { created() {
this.queryForm.pageNo = 1;
this.fetchData(); this.fetchData();
}, },
async fetchData() { methods: {
const { data, totalCount } = await getIconList(this.queryForm); handleSizeChange(val) {
this.queryIcon = data; this.queryForm.pageSize = val;
this.allIcon = data; this.fetchData();
this.total = totalCount; },
}, handleCurrentChange(val) {
handleCopyIcon(index, event) { this.queryForm.pageNo = val;
const copyText = `<vab-icon :icon="['fas', '${this.queryIcon[index]}']"></vab-icon>`; this.fetchData();
this.copyText = copyText; },
clip(copyText, event); 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>
src/views/vab/icon/remixIcon.vue
...@@ -2,8 +2,8 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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() { created() {
this.queryForm.pageNo = 1;
this.fetchData(); this.fetchData();
}, },
async fetchData() { methods: {
const { data, totalCount } = await getIconList(this.queryForm); handleSizeChange(val) {
this.queryIcon = data; this.queryForm.pageSize = val;
this.allIcon = data; this.fetchData();
this.total = totalCount; },
}, handleCurrentChange(val) {
handleCopyIcon(index, event) { this.queryForm.pageNo = val;
//const copyText = `<vab-remix-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-remixicon@master/src/icons/svg/${this.queryIcon[index]}.svg" />`; this.fetchData();
const copyText = `<vab-remix-icon icon-class="${this.queryIcon[index]}" />`; },
this.copyText = copyText; queryData() {
clip(copyText, event); 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>
src/views/vab/imgComparison/index.vue
...@@ -25,29 +25,29 @@ ...@@ -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>
src/views/vab/loading/index.vue
...@@ -11,59 +11,61 @@ ...@@ -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>
src/views/vab/lodash/index.vue
...@@ -7,7 +7,8 @@ ...@@ -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 @@ ...@@ -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>
src/views/vab/magnifier/index.vue
...@@ -24,12 +24,12 @@ ...@@ -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>
src/views/vab/map/amap.vue
...@@ -7,21 +7,21 @@ ...@@ -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>
src/views/vab/map/index.vue
...@@ -5,111 +5,111 @@ ...@@ -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) { for (let j = 0; j < item.length; j += 2) {
let x = (Number(item[j]) / 20037508.34) * 180; let x = (Number(item[j]) / 20037508.34) * 180;
let y = (Number(item[j + 1]) / 20037508.34) * 180; let y = (Number(item[j + 1]) / 20037508.34) * 180;
y = y =
(180 / Math.PI) * (180 / Math.PI) *
(2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2); (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2);
if (x == 0 || y == NaN) { if (x == 0 || y == NaN) {
continue; continue;
}
coordinates.push([x, y]);
timeData.push({
geometry: {
type: "Point",
coordinates: [x, y],
},
count: 1,
time: j,
});
} }
coordinates.push([x, y]); data.push({
timeData.push({
geometry: { geometry: {
type: "Point", type: "LineString",
coordinates: [x, y], coordinates: coordinates,
}, },
count: 1,
time: j,
}); });
} }
data.push({
geometry: {
type: "LineString",
coordinates: coordinates,
},
});
}
let dataSet = new mapv.DataSet(data); let dataSet = new mapv.DataSet(data);
let options = { let options = {
strokeStyle: "rgba(53,57,255,0.5)", strokeStyle: "rgba(53,57,255,0.5)",
// globalCompositeOperation: 'lighter', // globalCompositeOperation: 'lighter',
shadowColor: "rgba(53,57,255,0.2)", shadowColor: "rgba(53,57,255,0.2)",
shadowBlur: 3, shadowBlur: 3,
lineWidth: 3.0, lineWidth: 3.0,
draw: "simple", draw: "simple",
}; };
let mapvLayer = new mapv.MaptalksLayer( let mapvLayer = new mapv.MaptalksLayer(
"mapv1", "mapv1",
dataSet, dataSet,
options options
).addTo(map); ).addTo(map);
let dataSet2 = new mapv.DataSet(timeData); let dataSet2 = new mapv.DataSet(timeData);
let options2 = { let options2 = {
fillStyle: "rgba(255, 250, 250, 0.2)", fillStyle: "rgba(255, 250, 250, 0.2)",
globalCompositeOperation: "lighter", globalCompositeOperation: "lighter",
size: 1.5, size: 1.5,
animation: { animation: {
stepsRange: { stepsRange: {
start: 0, start: 0,
end: 100, end: 100,
},
trails: 3,
duration: 5,
}, },
trails: 3, draw: "simple",
duration: 5, };
},
draw: "simple",
};
let mapvLayer2 = new mapv.MaptalksLayer( let mapvLayer2 = new mapv.MaptalksLayer(
"mapv2", "mapv2",
dataSet2, dataSet2,
options2 options2
).addTo(map); ).addTo(map);
}); });
}); });
}, },
methods: {}, 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>
src/views/vab/markdown/index.vue
...@@ -6,64 +6,63 @@ ...@@ -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>
src/views/vab/markdownEditor/index.vue
...@@ -23,29 +23,29 @@ ...@@ -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>
src/views/vab/more/index.vue
...@@ -8,8 +8,8 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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>
src/views/vab/nested/menu1/menu1-1/index.vue
<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>
src/views/vab/nested/menu1/menu1-1/menu1-1-1/index.vue
...@@ -8,8 +8,8 @@ ...@@ -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>
src/views/vab/permissions/index.vue
...@@ -14,8 +14,8 @@ ...@@ -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 @@ ...@@ -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: [], tableData: [],
res: [], res: [],
}; };
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
username: "user/username", username: "user/username",
permissions: "user/permissions", permissions: "user/permissions",
}), }),
}, },
created() { created() {
this.fetchData(); this.fetchData();
},
mounted() {
this.form.account = this.username;
},
methods: {
handleChangePermission() {
localStorage.setItem(tokenTableName, `${this.form.account}-accessToken`);
location.reload();
}, },
async fetchData() { mounted() {
const res = await getRouterList(); this.form.account = this.username;
this.tableData = res.data; },
this.res = res; 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>
src/views/vab/player/index.vue
<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 @@ ...@@ -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>
src/views/vab/qrCode/index.vue
...@@ -14,33 +14,33 @@ ...@@ -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>
src/views/vab/smallComponents/index.vue
...@@ -20,7 +20,8 @@ ...@@ -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 @@ ...@@ -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>
src/views/vab/sticky/index.vue
...@@ -280,35 +280,35 @@ ...@@ -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>
src/views/vab/table/components/TableEdit.vue
...@@ -21,55 +21,55 @@ ...@@ -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() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
this.$emit("fetchData");
}, },
save() { created() {},
this.$refs["form"].validate(async (valid) => { methods: {
if (valid) { showEdit(row) {
const { msg } = await doEdit(this.form); if (!row) {
this.$baseMessage(msg, "success"); this.title = "添加";
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>
src/views/vab/table/index.vue
...@@ -2,11 +2,11 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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) {
this.selectRows = val;
}, },
handleAdd() { data() {
this.$refs["edit"].showEdit(); 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: "",
},
};
}, },
handleEdit(row) { created() {
this.$refs["edit"].showEdit(row); this.fetchData();
}, },
handleDelete(row) { beforeDestroy() {},
if (row.id) { mounted() {},
this.$baseConfirm("你确定要删除当前项吗", null, async () => { methods: {
const { msg } = await doDelete({ ids: row.id }); tableSortChange() {
this.$baseMessage(msg, "success"); const imageList = [];
this.fetchData(); this.$refs.tableSort.tableData.forEach((item, index) => {
imageList.push(item.img);
}); });
} 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() {
testNotify() { this.$baseConfirm(
this.$baseNotify("测试消息提示", "test", "success", "bottom-right"); "你确定要执行该操作?",
null,
() => {
/* 可以写回调; */
},
() => {
/* 可以写回调; */
}
);
},
testNotify() {
this.$baseNotify("测试消息提示", "test", "success", "bottom-right");
},
}, },
}, };
};
</script> </script>
src/views/vab/table/inlineEditTable.vue
...@@ -66,44 +66,44 @@ ...@@ -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) { created() {
row.title = row.originalTitle; this.getList();
row.edit = false;
}, },
confirmEdit(row) { methods: {
row.edit = false; async getList() {
row.originalTitle = row.title; 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>
src/views/vab/tree/index.vue
...@@ -32,21 +32,24 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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);
},
},
mounted() {
this.$nextTick(() => {
this.getTreeListFuc(1);
this.setCheckedKeys();
// 初始化单选树
this.initSingleTree("single");
// 初始化多选树
this.initSingleTree("multiple");
});
},
methods: {
// 树level小于n级展开方法
openTree(treeData, n) {
const each = (data) => {
data.forEach((e) => {
if (e.rank <= n) {
this.defaultExpendedKeys.push(e.id);
}
if (e.children.length > 0) {
each(e.children);
}
});
};
each(treeData);
},
// 获取tree数据
async getTreeListFuc(flag) {
const { data } = await getTreeList();
this.data2 = data;
if (flag) {
this.openTree(this.data2, 2);
}
},
// 节点过滤操作
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
// 添加节点操作
append(node, data, flag) {
this.treeFlag = flag;
this.dialogTitle = "添加节点";
this.treeForm = {
id: "",
name: "",
}; };
this.treeDialogVisible = true;
}, },
// 编辑节点操作 watch: {
edit(node, data, flag) { filterText(val) {
this.treeFlag = flag; this.$refs.demoTree.filter(val);
this.dialogTitle = "编辑节点"; },
this.treeForm = {
id: data.id,
name: data.name,
};
this.treeDialogVisible = true;
}, },
// 删除节点操作 mounted() {
remove(node, data) { this.$nextTick(() => {
this.$baseConfirm("你确定要删除该节点?", null, async () => { this.getTreeListFuc(1);
const { msg } = getTreeList(); this.setCheckedKeys();
this.$baseMessage(msg, "success"); // 初始化单选树
this.getTreeListFuc(0); this.initSingleTree("single");
// 初始化多选树
this.initSingleTree("multiple");
}); });
}, },
// 保存添加和编辑 methods: {
saveTree() { // 树level小于n级展开方法
this.$refs.treeForm.validate(async (valid) => { openTree(treeData, n) {
if (valid) { const each = (data) => {
const { msg } = await getTreeList(); data.forEach((e) => {
if (e.rank <= n) {
this.defaultExpendedKeys.push(e.id);
}
if (e.children.length > 0) {
each(e.children);
}
});
};
each(treeData);
},
// 获取tree数据
async getTreeListFuc(flag) {
const { data } = await getTreeList();
this.data2 = data;
if (flag) {
this.openTree(this.data2, 2);
}
},
// 节点过滤操作
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
// 添加节点操作
append(node, data, flag) {
this.treeFlag = flag;
this.dialogTitle = "添加节点";
this.treeForm = {
id: "",
name: "",
};
this.treeDialogVisible = true;
},
// 编辑节点操作
edit(node, data, flag) {
this.treeFlag = flag;
this.dialogTitle = "编辑节点";
this.treeForm = {
id: data.id,
name: data.name,
};
this.treeDialogVisible = true;
},
// 删除节点操作
remove(node, data) {
this.$baseConfirm("你确定要删除该节点?", null, async () => {
const { msg } = getTreeList();
this.$baseMessage(msg, "success"); this.$baseMessage(msg, "success");
this.treeDialogVisible = false;
this.getTreeListFuc(0); 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) {
setCheckedKeys() { if (typeof value === "string") {
this.$refs.demoTree.setCheckedKeys([1]); this.keyW = value.trim();
}, }
// 点击叶子节点 if (this.keyW.length !== 0) {
nodeClick(data, node, el) {}, // 请求后台返回查询结果
// 节点选中操作 let treeOption = {};
checkNode(data, node, el) { treeOption = {
this.checkNodeKeys = node.checkedKeys; keyWord: this.keyW,
}, };
// 节点展开操作 const { data } = await getTreeList();
nodeExpand(data, node, el) { this.filterDevLlist = data;
this.defaultExpendedKeys.push(data.id); this.isShow = true;
},
// 节点关闭操作
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 {
// 多选树 this.isShow = false;
this.$refs.multipleSelectTree.setCheckedKeys(
this.selectTreeDefaultSelectedKeys
);
} }
}); },
}, /* 单选/多选树方法-------------------开始 */
// 清除单选树选中 // 初始化单选树的值
selectTreeClearHandle(type) { async initSingleTree(treeType) {
this.selectTreeDefaultSelectedKeys = []; const { data } = await getTreeList();
this.clearSelected(); this.selectTreeData = data;
if (type == "single") { this.$nextTick(() => {
this.singleSelectTreeVal = ""; this.selectTreeDefaultSelectedKeys = this.singleSelectTreeKey.split(
this.singleSelectTreeKey = ""; ","
this.$refs.singleSelectTree.setCurrentKey(""); // 设置默认选中 ); // 设置默认展开
} else { if (treeType == "single") {
this.multipleSelectTreeVal = []; //单选树
this.multipleSelectTreeKey = ""; this.$refs.singleSelectTree.setCurrentKey(this.singleSelectTreeKey); // 设置默认选中
this.$refs.multipleSelectTree.setCheckedKeys([]); } else {
} // 多选树
}, this.$refs.multipleSelectTree.setCheckedKeys(
/* 清空选中样式 */ this.selectTreeDefaultSelectedKeys
clearSelected() { );
const allNode = document.querySelectorAll( }
"#singleSelectTree .el-tree-node" });
); },
allNode.forEach((element) => element.classList.remove("is-current")); // 清除单选树选中
}, selectTreeClearHandle(type) {
// select多选时移除某项操作 this.selectTreeDefaultSelectedKeys = [];
removeSelectTreeTag(val) { this.clearSelected();
const stack = JSON.parse(JSON.stringify(this.selectTreeData)); if (type == "single") {
while (stack.length) { this.singleSelectTreeVal = "";
const curr = stack.shift(); this.singleSelectTreeKey = "";
if (curr.name == val) { this.$refs.singleSelectTree.setCurrentKey(""); // 设置默认选中
return this.$refs.multipleSelectTree.setChecked(curr.id, false); } else {
this.multipleSelectTreeVal = [];
this.multipleSelectTreeKey = "";
this.$refs.multipleSelectTree.setCheckedKeys([]);
} }
if (curr.children && curr.children.length) { },
stack.unshift(...curr.children); /* 清空选中样式 */
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) {},
changeMultipleSelectTreeHandle(val) {}, // 点击叶子节点
// 点击叶子节点 selectTreeNodeClick(data, node, el) {
selectTreeNodeClick(data, node, el) { if (data.rank >= this.selectLevel) {
if (data.rank >= this.selectLevel) { this.singleSelectTreeVal = data.name;
this.singleSelectTreeVal = data.name; this.singleSelectTreeKey = data.id;
this.singleSelectTreeKey = data.id; this.$refs.singleTree.blur();
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(","); 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>
src/views/vab/upload/index.vue
<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 @@ ...@@ -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>
src/views/vab/verify/index.vue
...@@ -12,24 +12,24 @@ ...@@ -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>
src/views/vab/webSocket/index.vue
...@@ -14,7 +14,7 @@ ...@@ -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 @@ ...@@ -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() { created() {
this.status = "失败"; this.init();
this.initWebSocket();
}, },
onmessage({ data }) { destroyed() {
//截掉测试webSocket地址广告 this.webSocket.close();
this.data.push(data.substring(0, data.length - 66));
}, },
send(Data) { methods: {
this.webSocket.send(Data); submit() {
}, this.$refs["form"].validate((valid) => {
onclose(e) { if (valid) {
this.status = "断开"; 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment