Skip to content

V
vipSupplier
Commit 6664949d by 初志鑫
Options

prettier代码格式重新配置

parent d134f932
Showing with 2102 additions and 2097 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/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/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/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/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/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>
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