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 = {
bracketSpacing: true,
jsxBracketSameLine: false,
arrowParens: "always",
vueIndentScriptAndStyle: false,
htmlWhitespaceSensitivity: "ignore",
vueIndentScriptAndStyle: true,
endOfLine: "lf",
};
src/App.vue
......@@ -5,8 +5,8 @@
</template>
<script>
export default {
name: "App",
mounted() {},
};
export default {
name: "App",
mounted() {},
};
</script>
src/components/JsonEditor/index.vue
......@@ -7,105 +7,105 @@
</template>
<script>
import CodeMirror from "codemirror";
import "codemirror/addon/lint/lint.css";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/rubyblue.css";
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/json-lint";
import CodeMirror from "codemirror";
import "codemirror/addon/lint/lint.css";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/rubyblue.css";
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/json-lint";
require("script-loader!jsonlint");
require("script-loader!jsonlint");
export default {
name: "JsonEditor",
props: {
value: {
type: [Array, Object],
default: () => {
return null;
export default {
name: "JsonEditor",
props: {
value: {
type: [Array, Object],
default: () => {
return null;
},
},
},
},
data() {
return {
jsonEditor: false,
};
},
watch: {
value(value) {
const editorValue = this.jsonEditor.getValue();
if (editorValue) {
this.$emit("change", editorValue);
} else {
this.$baseMessage("JSON不能为空,否则无法生成表格", "error");
}
if (value !== editorValue) {
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
}
data() {
return {
jsonEditor: false,
};
},
},
mounted() {
this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
lineNumbers: true,
mode: "application/json",
gutters: ["CodeMirror-lint-markers"],
theme: "rubyblue",
lint: true,
});
watch: {
value(value) {
const editorValue = this.jsonEditor.getValue();
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
this.jsonEditor.on("change", (cm) => {
if (this.isJsonString(cm.getValue())) {
this.$emit("change", cm.getValue());
}
});
},
methods: {
getValue() {
return this.jsonEditor.getValue();
if (editorValue) {
this.$emit("change", editorValue);
} else {
this.$baseMessage("JSON不能为空,否则无法生成表格", "error");
}
if (value !== editorValue) {
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
}
},
},
isJsonString(str) {
try {
if (typeof JSON.parse(str) == "object") {
return true;
mounted() {
this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
lineNumbers: true,
mode: "application/json",
gutters: ["CodeMirror-lint-markers"],
theme: "rubyblue",
lint: true,
});
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
this.jsonEditor.on("change", (cm) => {
if (this.isJsonString(cm.getValue())) {
this.$emit("change", cm.getValue());
}
} 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>
<style scoped>
.json-editor {
position: relative;
height: 100%;
}
.json-editor {
position: relative;
height: 100%;
}
.json-editor >>> .CodeMirror {
height: auto;
min-height: calc(100vh - 220px);
}
.json-editor >>> .CodeMirror {
height: auto;
min-height: calc(100vh - 220px);
}
.json-editor >>> .CodeMirror-scroll {
min-height: calc(100vh - 220px);
}
.json-editor >>> .CodeMirror-scroll {
min-height: calc(100vh - 220px);
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
color: #f08047;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
color: #f08047;
}
.json-editor >>> .cm-s-rubyblue .CodeMirror-gutters {
padding-right: 10px;
.json-editor >>> .cm-s-rubyblue .CodeMirror-gutters {
padding-right: 10px;
/* background: transparent; */
border-right: 1px solid #fff;
}
/* background: transparent; */
border-right: 1px solid #fff;
}
.json-editor >>> .cm-s-rubyblue.CodeMirror {
/* background: #08233e; */
color: white;
}
.json-editor >>> .cm-s-rubyblue.CodeMirror {
/* background: #08233e; */
color: white;
}
</style>
src/components/SelectTree/index.vue
......@@ -31,168 +31,168 @@
</template>
<script>
export default {
name: "SelectTreeTemplate",
props: {
/* 树形结构数据 */
treeOptions: {
type: Array,
default: () => {
return [];
export default {
name: "SelectTreeTemplate",
props: {
/* 树形结构数据 */
treeOptions: {
type: Array,
default: () => {
return [];
},
},
},
/* 单选/多选 */
selectType: {
type: String,
default: () => {
return "single";
/* 单选/多选 */
selectType: {
type: String,
default: () => {
return "single";
},
},
},
/* 初始选中值key */
selectedKey: {
type: String,
default: () => {
return "";
/* 初始选中值key */
selectedKey: {
type: String,
default: () => {
return "";
},
},
},
/* 初始选中值name */
selectedValue: {
type: String,
default: () => {
return "";
/* 初始选中值name */
selectedValue: {
type: String,
default: () => {
return "";
},
},
},
/* 可做选择的层级 */
selectLevel: {
type: [String, Number],
default: () => {
return "";
/* 可做选择的层级 */
selectLevel: {
type: [String, Number],
default: () => {
return "";
},
},
},
/* 可清空选项 */
clearable: {
type: Boolean,
default: () => {
return true;
/* 可清空选项 */
clearable: {
type: Boolean,
default: () => {
return true;
},
},
},
},
data() {
return {
defaultProps: {
children: "children",
label: "name",
},
defaultSelectedKeys: [], //初始选中值数组
currentNodeKey: this.selectedKey,
selectValue:
this.selectType == "multiple"
? this.selectedValue.split(",")
: this.selectedValue, //下拉框选中值label
selectKey:
this.selectType == "multiple"
? this.selectedKey.split(",")
: this.selectedKey, //下拉框选中值value
};
},
mounted() {
const that = this;
this.initTree();
},
methods: {
// 初始化树的值
initTree() {
data() {
return {
defaultProps: {
children: "children",
label: "name",
},
defaultSelectedKeys: [], //初始选中值数组
currentNodeKey: this.selectedKey,
selectValue:
this.selectType == "multiple"
? this.selectedValue.split(",")
: this.selectedValue, //下拉框选中值label
selectKey:
this.selectType == "multiple"
? this.selectedKey.split(",")
: this.selectedKey, //下拉框选中值value
};
},
mounted() {
const that = this;
if (that.selectedKey) {
that.defaultSelectedKeys = that.selectedKey.split(","); // 设置默认展开
this.initTree();
},
methods: {
// 初始化树的值
initTree() {
const that = this;
if (that.selectedKey) {
that.defaultSelectedKeys = that.selectedKey.split(","); // 设置默认展开
if (that.selectType == "single") {
that.$refs.treeOption.setCurrentKey(that.selectedKey); // 设置默认选中
} else {
that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys);
}
}
},
// 清除选中
clearHandle() {
const that = this;
this.selectValue = "";
this.selectKey = "";
this.defaultSelectedKeys = [];
this.currentNodeKey = "";
this.clearSelected();
if (that.selectType == "single") {
that.$refs.treeOption.setCurrentKey(that.selectedKey); // 设置默认选中
that.$refs.treeOption.setCurrentKey(""); // 设置默认选中
} else {
that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys);
that.$refs.treeOption.setCheckedKeys([]);
}
}
},
// 清除选中
clearHandle() {
const that = this;
this.selectValue = "";
this.selectKey = "";
this.defaultSelectedKeys = [];
this.currentNodeKey = "";
this.clearSelected();
if (that.selectType == "single") {
that.$refs.treeOption.setCurrentKey(""); // 设置默认选中
} else {
that.$refs.treeOption.setCheckedKeys([]);
}
},
/* 清空选中样式 */
clearSelected() {
const allNode = document.querySelectorAll("#treeOption .el-tree-node");
allNode.forEach((element) => element.classList.remove("is-current"));
},
// select多选时移除某项操作
removeTag(val) {
this.$refs.treeOption.setCheckedKeys([]);
},
// 点击叶子节点
nodeClick(data, node, el) {
if (data.rank >= this.selectLevel) {
this.selectValue = data.name;
this.selectKey = data.id;
}
},
// 节点选中操作
checkNode(data, node, el) {
const checkedNodes = this.$refs.treeOption.getCheckedNodes();
const keyArr = [];
const valueArr = [];
checkedNodes.forEach((item) => {
if (item.rank >= this.selectLevel) {
keyArr.push(item.id);
valueArr.push(item.name);
},
/* 清空选中样式 */
clearSelected() {
const allNode = document.querySelectorAll("#treeOption .el-tree-node");
allNode.forEach((element) => element.classList.remove("is-current"));
},
// select多选时移除某项操作
removeTag(val) {
this.$refs.treeOption.setCheckedKeys([]);
},
// 点击叶子节点
nodeClick(data, node, el) {
if (data.rank >= this.selectLevel) {
this.selectValue = data.name;
this.selectKey = data.id;
}
});
this.selectValue = valueArr;
this.selectKey = keyArr;
},
// 节点选中操作
checkNode(data, node, el) {
const checkedNodes = this.$refs.treeOption.getCheckedNodes();
const keyArr = [];
const valueArr = [];
checkedNodes.forEach((item) => {
if (item.rank >= this.selectLevel) {
keyArr.push(item.id);
valueArr.push(item.name);
}
});
this.selectValue = valueArr;
this.selectKey = keyArr;
},
},
},
};
};
</script>
<style lang="scss" scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
max-height: 274px;
padding: 0;
overflow-y: auto;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
max-height: 274px;
padding: 0;
overflow-y: auto;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
ul li > .el-tree .el-tree-node__content {
height: auto;
padding: 0 20px;
}
ul li > .el-tree .el-tree-node__content {
height: auto;
padding: 0 20px;
}
.el-tree-node__label {
font-weight: normal;
}
.el-tree-node__label {
font-weight: normal;
}
.el-tree > .is-current .el-tree-node__label {
font-weight: 700;
color: #409eff;
}
.el-tree > .is-current .el-tree-node__label {
font-weight: 700;
color: #409eff;
}
.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
font-weight: normal;
color: #606266;
}
.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
font-weight: normal;
color: #606266;
}
</style>
<style lang="scss">
/* .vab-tree-select{
/* .vab-tree-select{
.el-tag__close.el-icon-close{
width:0;
overflow:hidden;
......
src/components/VabCharge/index.vue
......@@ -23,169 +23,169 @@
</template>
<script>
export default {
name: "VabCharge",
props: {
styleObj: {
type: Object,
default: () => {
return {};
export default {
name: "VabCharge",
props: {
styleObj: {
type: Object,
default: () => {
return {};
},
},
startVal: {
type: Number,
default: 0,
},
endVal: {
type: Number,
default: 100,
},
},
startVal: {
type: Number,
default: 0,
},
endVal: {
type: Number,
default: 100,
data() {
return {
decimals: 2,
prefix: "",
suffix: "%",
separator: ",",
duration: 3000,
};
},
},
data() {
return {
decimals: 2,
prefix: "",
suffix: "%",
separator: ",",
duration: 3000,
};
},
created() {},
mounted() {},
methods: {},
};
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.content {
position: relative;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
width: 100%;
background: #000;
.g-number {
position: absolute;
top: 27%;
z-index: 99;
width: 300px;
font-size: 32px;
color: #fff;
text-align: center;
}
.g-container {
.content {
position: relative;
width: 300px;
height: 400px;
margin: auto;
}
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
width: 100%;
background: #000;
.g-contrast {
width: 300px;
height: 400px;
overflow: hidden;
background-color: #000;
filter: contrast(15) hue-rotate(0);
animation: hueRotate 10s infinite linear;
}
.g-number {
position: absolute;
top: 27%;
z-index: 99;
width: 300px;
font-size: 32px;
color: #fff;
text-align: center;
}
.g-circle {
position: relative;
box-sizing: border-box;
width: 300px;
height: 300px;
filter: blur(8px);
.g-container {
position: relative;
width: 300px;
height: 400px;
margin: auto;
}
.g-contrast {
width: 300px;
height: 400px;
overflow: hidden;
background-color: #000;
filter: contrast(15) hue-rotate(0);
animation: hueRotate 10s infinite linear;
}
&::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;
top: 40%;
bottom: 0;
left: 50%;
width: 200px;
height: 200px;
content: "";
width: 100px;
height: 40px;
background-color: #00ff6f;
border-radius: 42% 38% 62% 49% / 45%;
transform: translate(-50%, -50%) rotate(0);
animation: rotate 10s infinite linear;
filter: blur(5px);
border-radius: 100px 100px 0 0;
transform: translate(-50%, 0);
}
&::before {
li {
position: absolute;
top: 40%;
left: 50%;
z-index: 99;
width: 176px;
height: 176px;
content: "";
background-color: #000;
background: #00ff6f;
border-radius: 50%;
transform: translate(-50%, -50%);
}
}
.g-bubbles {
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
height: 40px;
background-color: #00ff6f;
filter: blur(5px);
border-radius: 100px 100px 0 0;
transform: translate(-50%, 0);
}
li {
position: absolute;
background: #00ff6f;
border-radius: 50%;
}
@for $i from 0 through 15 {
li:nth-child(#{$i}) {
$width: 15 + random(15) + px;
top: 50%;
left: 15 + random(70) + px;
width: $width;
height: $width;
transform: translate(-50%, -50%);
animation: moveToTop
#{random(6) +
3}s
ease-in-out -#{random(5000) /
1000}s
infinite;
@for $i from 0 through 15 {
li:nth-child(#{$i}) {
$width: 15 + random(15) + px;
top: 50%;
left: 15 + random(70) + px;
width: $width;
height: $width;
transform: translate(-50%, -50%);
animation: moveToTop
#{random(6) +
3}s
ease-in-out -#{random(5000) /
1000}s
infinite;
}
}
}
@keyframes rotate {
50% {
border-radius: 45% / 42% 38% 58% 49%;
}
@keyframes rotate {
50% {
border-radius: 45% / 42% 38% 58% 49%;
}
100% {
transform: translate(-50%, -50%) rotate(720deg);
100% {
transform: translate(-50%, -50%) rotate(720deg);
}
}
}
@keyframes moveToTop {
90% {
opacity: 1;
}
@keyframes moveToTop {
90% {
opacity: 1;
}
100% {
opacity: 0.1;
transform: translate(-50%, -180px);
100% {
opacity: 0.1;
transform: translate(-50%, -180px);
}
}
}
@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate(360deg);
@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate(360deg);
}
}
}
}
</style>
src/components/VabImage/index.vue
......@@ -17,76 +17,76 @@
</template>
<script>
export default {
name: "VabImage",
components: {},
props: {
bigSrc: {
type: String,
default: "",
export default {
name: "VabImage",
components: {},
props: {
bigSrc: {
type: String,
default: "",
},
smallSrc: {
type: String,
default: "",
},
percent: {
type: Number,
default: 97,
},
},
smallSrc: {
type: String,
default: "",
data() {
return {};
},
percent: {
type: Number,
default: 97,
created() {},
mounted() {},
methods: {
clickBig() {
this.$emit("clickBig");
},
clickSmall() {
this.$emit("clickSmall");
},
},
},
data() {
return {};
},
created() {},
mounted() {},
methods: {
clickBig() {
this.$emit("clickBig");
},
clickSmall() {
this.$emit("clickSmall");
},
},
};
};
</script>
<style lang="scss" scoped>
.vab-image {
&__outter {
position: relative;
width: 100%;
height: 100%;
.vab-image {
&__outter {
position: relative;
width: 100%;
height: 100%;
::v-deep {
img {
border-radius: $base-border-radius;
::v-deep {
img {
border-radius: $base-border-radius;
}
}
}
&__small {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 100px;
border-bottom: 1px solid $base-color-white;
border-left: 1px solid $base-color-white;
border-radius: $base-border-radius;
}
&__small {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 100px;
border-bottom: 1px solid $base-color-white;
border-left: 1px solid $base-color-white;
border-radius: $base-border-radius;
}
&__percent {
position: absolute;
right: 0;
bottom: 0;
display: inline-block;
min-width: 50px;
height: 25px;
line-height: 25px;
color: $base-color-white;
text-align: center;
background-color: $base-color-red;
border-radius: $base-border-radius;
&__percent {
position: absolute;
right: 0;
bottom: 0;
display: inline-block;
min-width: 50px;
height: 25px;
line-height: 25px;
color: $base-color-white;
text-align: center;
background-color: $base-color-red;
border-radius: $base-border-radius;
}
}
}
}
</style>
src/components/VabQrCode/index.vue
......@@ -5,40 +5,40 @@
</template>
<script>
import VueQArt from "vue-qart";
import qrImg from "@/assets/qr_logo/lqr_logo.png";
import VueQArt from "vue-qart";
import qrImg from "@/assets/qr_logo/lqr_logo.png";
export default {
name: "VabQrCode",
components: {
VueQArt,
},
props: {
imagePath: {
type: String,
default: qrImg,
export default {
name: "VabQrCode",
components: {
VueQArt,
},
url: {
type: String,
default: "http://www.boyunvision.com/",
props: {
imagePath: {
type: String,
default: qrImg,
},
url: {
type: String,
default: "http://www.boyunvision.com/",
},
size: {
type: Number,
default: 500,
},
},
size: {
type: Number,
default: 500,
data() {
return {
config: {
value: this.url,
imagePath: this.imagePath,
filter: "color",
size: this.size,
},
};
},
},
data() {
return {
config: {
value: this.url,
imagePath: this.imagePath,
filter: "color",
size: this.size,
},
};
},
created() {},
mounted() {},
methods: {},
};
created() {},
mounted() {},
methods: {},
};
</script>
src/components/VabSnow/index.vue
......@@ -5,77 +5,78 @@
</template>
<script>
export default {
name: "VabSnow",
props: {
styleObj: {
type: Object,
default: () => {
return {};
export default {
name: "VabSnow",
props: {
styleObj: {
type: Object,
default: () => {
return {};
},
},
},
},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
filter: drop-shadow(0 0 10px white);
}
@function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
.content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
filter: drop-shadow(0 0 10px white);
}
@return $random_range;
}
@function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
.snow {
$total: 200;
@return $random_range;
}
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
.snow {
$total: 200;
@for $i from 1 through $total {
$random-x: random(1000000) * 0.0001vw;
$random-offset: random_range(-100000, 100000) * 0.0001vw;
$random-x-end: $random-x + $random-offset;
$random-x-end-yoyo: $random-x + ($random-offset / 2);
$random-yoyo-time: random_range(30000, 80000) / 100000;
$random-yoyo-y: $random-yoyo-time * 100vh;
$random-scale: random(10000) * 0.0001;
$fall-duration: random_range(10, 30) * 1s;
$fall-delay: random(30) * -1s;
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
&:nth-child(#{$i}) {
opacity: random(10000) * 0.0001;
transform: translate($random-x, -10px) scale($random-scale);
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
}
@for $i from 1 through $total {
$random-x: random(1000000) * 0.0001vw;
$random-offset: random_range(-100000, 100000) * 0.0001vw;
$random-x-end: $random-x + $random-offset;
$random-x-end-yoyo: $random-x + ($random-offset / 2);
$random-yoyo-time: random_range(30000, 80000) / 100000;
$random-yoyo-y: $random-yoyo-time * 100vh;
$random-scale: random(10000) * 0.0001;
$fall-duration: random_range(10, 30) * 1s;
$fall-delay: random(30) * -1s;
@keyframes fall-#{$i} {
#{percentage($random-yoyo-time)} {
transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
&:nth-child(#{$i}) {
opacity: random(10000) * 0.0001;
transform: translate($random-x, -10px) scale($random-scale);
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
}
to {
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
@keyframes fall-#{$i} {
#{percentage($random-yoyo-time)} {
transform: translate($random-x-end, $random-yoyo-y)
scale($random-scale);
}
to {
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
}
}
}
}
}
</style>
src/components/VabSticky/index.vue
......@@ -16,80 +16,80 @@
</template>
<script>
export default {
name: "VabSticky",
props: {
stickyTop: {
type: Number,
default: 0,
export default {
name: "VabSticky",
props: {
stickyTop: {
type: Number,
default: 0,
},
zIndex: {
type: Number,
default: 1,
},
className: {
type: String,
default: "",
},
},
zIndex: {
type: Number,
default: 1,
data() {
return {
active: false,
position: "",
width: undefined,
height: undefined,
isSticky: false,
};
},
className: {
type: String,
default: "",
mounted() {
this.height = this.$el.getBoundingClientRect().height;
window.addEventListener("scroll", this.handleScroll);
window.addEventListener("resize", this.handleResize);
},
},
data() {
return {
active: false,
position: "",
width: undefined,
height: undefined,
isSticky: false,
};
},
mounted() {
this.height = this.$el.getBoundingClientRect().height;
window.addEventListener("scroll", this.handleScroll);
window.addEventListener("resize", this.handleResize);
},
activated() {
this.handleScroll();
},
destroyed() {
window.removeEventListener("scroll", this.handleScroll);
window.removeEventListener("resize", this.handleResize);
},
methods: {
sticky() {
if (this.active) {
return;
}
this.position = "fixed";
this.active = true;
this.width = this.width + "px";
this.isSticky = true;
activated() {
this.handleScroll();
},
handleReset() {
if (!this.active) {
return;
}
this.reset();
destroyed() {
window.removeEventListener("scroll", this.handleScroll);
window.removeEventListener("resize", this.handleResize);
},
reset() {
this.position = "";
this.width = "auto";
this.active = false;
this.isSticky = false;
methods: {
sticky() {
if (this.active) {
return;
}
this.position = "fixed";
this.active = true;
this.width = this.width + "px";
this.isSticky = true;
},
handleReset() {
if (!this.active) {
return;
}
this.reset();
},
reset() {
this.position = "";
this.width = "auto";
this.active = false;
this.isSticky = false;
},
handleScroll() {
const width = this.$el.getBoundingClientRect().width;
this.width = width || "auto";
const offsetTop = this.$el.getBoundingClientRect().top;
if (offsetTop < this.stickyTop) {
this.sticky();
return;
}
this.handleReset();
},
handleResize() {
if (this.isSticky) {
this.width = this.$el.getBoundingClientRect().width + "px";
}
},
},
handleScroll() {
const width = this.$el.getBoundingClientRect().width;
this.width = width || "auto";
const offsetTop = this.$el.getBoundingClientRect().top;
if (offsetTop < this.stickyTop) {
this.sticky();
return;
}
this.handleReset();
},
handleResize() {
if (this.isSticky) {
this.width = this.$el.getBoundingClientRect().width + "px";
}
},
},
};
};
</script>
src/components/VabUpload/index.vue
......@@ -11,8 +11,7 @@
:closable="false"
:title="`支持jpg、jpeg、png格式，单次可最多选择${limit}张图片，每张不可大于${size}M，如果大于${size}M会自动为您过滤`"
type="info"
>
</el-alert>
></el-alert>
<br />
<el-upload
ref="upload"
......@@ -68,155 +67,66 @@
type="success"
:loading="loading"
@click="submitUpload"
>开始上传
>
开始上传
</el-button>
</div>
</el-dialog>
</template>
<script>
import { tokenName } from "@/config/settings";
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}`;
}
import { tokenName } from "@/config/settings";
this.action = this.api + this.url;
this.headers[tokenName] = this.$baseAccessToken();
},
methods: {
submitUpload() {
this.$refs.upload.submit();
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,
},
},
handleProgress(event, file, fileList) {
this.loading = true;
this.show = 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: {},
};
},
handleChange(file, fileList) {
if (file.size > 1048576 * this.size) {
fileList.map((item, index) => {
if (item === file) {
fileList.splice(index, 1);
}
});
this.fileList = fileList;
} else {
this.allImgNum = fileList.length;
}
},
handleSuccess(response, file, fileList) {
this.imgNum = this.imgNum + 1;
this.imgSuccessNum = this.imgSuccessNum + 1;
if (fileList.length === this.imgNum) {
setTimeout(() => {
this.$emit("fetchDatas");
this.$baseMessage(
`上传完成! 共上传${fileList.length}张图片`,
"success"
);
}, 1000);
}
setTimeout(() => {
this.loading = false;
this.show = false;
}, 1000);
},
handleError(err, file, fileList) {
this.imgNum = this.imgNum + 1;
this.imgErrorNum = this.imgErrorNum + 1;
this.$baseMessage(
`文件[${file.raw.name}]上传失败,文件大小为${this.$baseLodash.round(
file.raw.size / 1024,
0
)}KB`,
"error"
);
setTimeout(() => {
this.loading = false;
this.show = false;
}, 1000);
},
handleRemove(file, fileList) {
this.imgNum = this.imgNum - 1;
this.allNum = this.allNum - 1;
},
handlePreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleExceed(files, fileList) {
this.$baseMessage(
`当前限制选择 ${this.limit} 个文件，本次选择了
${files.length}
个文件`,
"error"
);
computed: {
percentage() {
if (this.allImgNum == 0) return 0;
return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100;
},
},
handleShow(data) {
this.title = "上传";
this.data = data;
this.dialogFormVisible = true;
},
handleClose() {
this.fileList = [];
this.picture = "picture";
this.allImgNum = 0;
this.imgNum = 0;
this.imgSuccessNum = 0;
this.imgErrorNum = 0;
created() {
if ("development" === process.env.NODE_ENV) {
this.api = process.env.VUE_APP_BASE_API;
} else {
......@@ -225,43 +135,133 @@ export default {
this.action = this.api + this.url;
this.headers[tokenName] = this.$baseAccessToken();
this.dialogFormVisible = false;
},
},
};
</script>
methods: {
submitUpload() {
this.$refs.upload.submit();
},
handleProgress(event, file, fileList) {
this.loading = true;
this.show = true;
},
handleChange(file, fileList) {
if (file.size > 1048576 * this.size) {
fileList.map((item, index) => {
if (item === file) {
fileList.splice(index, 1);
}
});
this.fileList = fileList;
} else {
this.allImgNum = fileList.length;
}
},
handleSuccess(response, file, fileList) {
this.imgNum = this.imgNum + 1;
this.imgSuccessNum = this.imgSuccessNum + 1;
if (fileList.length === this.imgNum) {
setTimeout(() => {
this.$emit("fetchDatas");
this.$baseMessage(
`上传完成! 共上传${fileList.length}张图片`,
"success"
);
}, 1000);
}
<style lang="scss" scoped>
.upload {
height: 600px;
setTimeout(() => {
this.loading = false;
this.show = false;
}, 1000);
},
handleError(err, file, fileList) {
this.imgNum = this.imgNum + 1;
this.imgErrorNum = this.imgErrorNum + 1;
this.$baseMessage(
`文件[${file.raw.name}]上传失败,文件大小为${this.$baseLodash.round(
file.raw.size / 1024,
0
)}KB`,
"error"
);
setTimeout(() => {
this.loading = false;
this.show = false;
}, 1000);
},
handleRemove(file, fileList) {
this.imgNum = this.imgNum - 1;
this.allNum = this.allNum - 1;
},
handlePreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleExceed(files, fileList) {
this.$baseMessage(
`当前限制选择 ${this.limit} 个文件，本次选择了
${files.length}
个文件`,
"error"
);
},
handleShow(data) {
this.title = "上传";
this.data = data;
this.dialogFormVisible = true;
},
handleClose() {
this.fileList = [];
this.picture = "picture";
this.allImgNum = 0;
this.imgNum = 0;
this.imgSuccessNum = 0;
this.imgErrorNum = 0;
if ("development" === process.env.NODE_ENV) {
this.api = process.env.VUE_APP_BASE_API;
} else {
this.api = `${window.location.protocol}//${window.location.host}`;
}
.upload-content {
.el-upload__tip {
display: block;
height: 30px;
line-height: 30px;
}
this.action = this.api + this.url;
this.headers[tokenName] = this.$baseAccessToken();
this.dialogFormVisible = false;
},
},
};
</script>
::v-deep {
.el-upload--picture-card {
width: 128px;
height: 128px;
margin: 3px 8px 8px 8px;
border: 2px dashed #c0ccda;
}
<style lang="scss" scoped>
.upload {
height: 600px;
.el-upload-list--picture {
margin-bottom: 20px;
.upload-content {
.el-upload__tip {
display: block;
height: 30px;
line-height: 30px;
}
.el-upload-list--picture-card {
.el-upload-list__item {
::v-deep {
.el-upload--picture-card {
width: 128px;
height: 128px;
margin: 3px 8px 8px 8px;
border: 2px dashed #c0ccda;
}
.el-upload-list--picture {
margin-bottom: 20px;
}
.el-upload-list--picture-card {
.el-upload-list__item {
width: 128px;
height: 128px;
margin: 3px 8px 8px 8px;
}
}
}
}
}
}
</style>
src/layouts/components/Ad/index.vue
......@@ -9,44 +9,44 @@
indicator-position="none"
>
<el-carousel-item v-for="(item, index) in adList" :key="index">
<el-tag type="warning"> Ad</el-tag>
<a target="_blank" :href="item.url"> {{ item.title }}</a>
<el-tag type="warning">Ad</el-tag>
<a target="_blank" :href="item.url">{{ item.title }}</a>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
import { getList } from "@/api/ad";
export default {
data() {
return {
nodeEnv: process.env.NODE_ENV,
adList: [],
};
},
created() {
this.fetchData();
},
methods: {
async fetchData() {
const { data } = await getList();
this.adList = data;
import { getList } from "@/api/ad";
export default {
data() {
return {
nodeEnv: process.env.NODE_ENV,
adList: [],
};
},
},
};
created() {
this.fetchData();
},
methods: {
async fetchData() {
const { data } = await getList();
this.adList = data;
},
},
};
</script>
<style lang="scss" scoped>
.vab-ad {
height: 30px;
padding-right: $base-padding;
padding-left: $base-padding;
line-height: 30px;
cursor: pointer;
background: #eef1f6;
box-shadow: 0 -1px 2px rgba(0, 21, 41, 0.08) inset;
.vab-ad {
height: 30px;
padding-right: $base-padding;
padding-left: $base-padding;
line-height: 30px;
cursor: pointer;
background: #eef1f6;
box-shadow: 0 -1px 2px rgba(0, 21, 41, 0.08) inset;
a {
color: #999;
a {
color: #999;
}
}
}
</style>
src/utils/request.js
......@@ -36,7 +36,7 @@ service.interceptors.request.use(
}
if (process.env.NODE_ENV !== "preview") {
if (contentType === "application/x-www-form-urlencoded;charset=UTF-8") {
if (config.data && !config.data.param) {
if (config.data) {
config.data = qs.stringify(config.data);
}
}
......
src/views/mall/goodsDetail/index.vue
......@@ -3,12 +3,12 @@
</template>
<script>
export default {
name: "GoodsDetail",
data() {
return {};
},
created() {},
methods: {},
};
export default {
name: "GoodsDetail",
data() {
return {};
},
created() {},
methods: {},
};
</script>
src/views/mall/goodsList/index.vue
......@@ -17,7 +17,8 @@
type="primary"
native-type="submit"
@click="handleQuery"
>查询
>
查询
</el-button>
</el-form-item>
</el-form>
......@@ -64,99 +65,99 @@
</template>
<script>
import { getList } from "@/api/goodsList";
import { getList } from "@/api/goodsList";
export default {
name: "Goods",
components: {},
data() {
return {
queryForm: {
pageNo: 1,
pageSize: 20,
title: "",
},
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
elementLoadingText: "正在加载...",
};
},
created() {
this.fetchData();
},
methods: {
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
export default {
name: "Goods",
components: {},
data() {
return {
queryForm: {
pageNo: 1,
pageSize: 20,
title: "",
},
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
elementLoadingText: "正在加载...",
};
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
created() {
this.fetchData();
},
handleQuery() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
methods: {
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
handleQuery() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
},
},
},
};
};
</script>
<style lang="scss" scoped>
.goods-list-container {
.goods-list-card-body {
position: relative;
text-align: center;
cursor: pointer;
.goods-list-tag-group {
position: absolute;
top: 10px;
right: 5px;
z-index: 9;
}
.goods-list-container {
.goods-list-card-body {
position: relative;
text-align: center;
cursor: pointer;
.goods-list-image-group {
height: 400px;
overflow: hidden;
.goods-list-tag-group {
position: absolute;
top: 10px;
right: 5px;
z-index: 9;
}
.goods-list-image {
width: 100%;
.goods-list-image-group {
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 {
transform: scale(1.1);
&:hover {
transform: scale(1.1);
}
}
}
}
.goods-list-title {
margin: 8px 0;
font-size: 16px;
font-weight: bold;
}
.goods-list-title {
margin: 8px 0;
font-size: 16px;
font-weight: bold;
}
.goods-list-description {
font-size: 14px;
color: #808695;
}
.goods-list-description {
font-size: 14px;
color: #808695;
}
.goods-list-price {
margin: 8px 0;
font-size: 14px;
color: $base-color-orange;
.goods-list-price {
margin: 8px 0;
font-size: 14px;
color: $base-color-orange;
s {
color: #c5c8ce;
s {
color: #c5c8ce;
}
}
}
}
}
</style>
src/views/mall/pay/components/Step1.vue
......@@ -25,48 +25,48 @@
</div>
</template>
<script>
export default {
data() {
return {
form: {
payAccount: "XXXXXXXXXXXXXXXX",
gatheringAccount: "1204505056@qq.com",
gatheringName: "chuzhixin",
price: "100",
},
rules: {
payAccount: [
{ required: true, message: "请选择付款账户", trigger: "blur" },
],
gatheringAccount: [
{ required: true, message: "请输入收款账户", trigger: "blur" },
{ type: "email", message: "账户名应为邮箱格式", trigger: "blur" },
],
gatheringName: [
{ required: true, message: "请输入收款人姓名", trigger: "blur" },
],
price: [
{ required: true, message: "请输入转账金额", trigger: "blur" },
{ pattern: /^(\d+)((?:\.\d+)?)$/, message: "请输入合法金额数字" },
],
export default {
data() {
return {
form: {
payAccount: "XXXXXXXXXXXXXXXX",
gatheringAccount: "1204505056@qq.com",
gatheringName: "chuzhixin",
price: "100",
},
rules: {
payAccount: [
{ required: true, message: "请选择付款账户", trigger: "blur" },
],
gatheringAccount: [
{ required: true, message: "请输入收款账户", trigger: "blur" },
{ type: "email", message: "账户名应为邮箱格式", trigger: "blur" },
],
gatheringName: [
{ required: true, message: "请输入收款人姓名", trigger: "blur" },
],
price: [
{ required: true, message: "请输入转账金额", trigger: "blur" },
{ pattern: /^(\d+)((?:\.\d+)?)$/, message: "请输入合法金额数字" },
],
},
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$emit("change-step", 2, this.form);
}
});
},
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$emit("change-step", 2, this.form);
}
});
},
},
};
};
</script>
<style lang="scss" scoped>
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
</style>
src/views/mall/pay/components/Step2.vue
......@@ -25,60 +25,60 @@
</el-form-item>
</el-form>
<div class="pay-button-group">
<el-button type="primary" :loading="loading" @click="handleSubmit"
>提交</el-button
>
<el-button type="primary" :loading="loading" @click="handleSubmit">
提交
</el-button>
<el-button @click="handlePrev">上一步</el-button>
</div>
</div>
</template>
<script>
export default {
props: {
infoData: {
type: Object,
default: () => {
return {};
export default {
props: {
infoData: {
type: Object,
default: () => {
return {};
},
},
},
},
data() {
return {
form: {
password: "123456",
data() {
return {
form: {
password: "123456",
},
rules: {
password: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
},
loading: false,
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
setTimeout(() => {
this.$emit("change-step", 3);
this.loading = false;
}, 2000);
} else {
this.loading = false;
}
});
},
rules: {
password: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
handlePrev() {
this.$emit("change-step", 1);
},
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>
<style lang="scss" scoped>
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
</style>
src/views/mall/pay/components/Step3.vue
......@@ -32,70 +32,70 @@
</div>
</template>
<script>
export default {
props: {
infoData: {
type: Object,
default: () => {
return {};
export default {
props: {
infoData: {
type: Object,
default: () => {
return {};
},
},
},
},
data() {
return {
form: {
password: "123456",
data() {
return {
form: {
password: "123456",
},
rules: {
password: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
},
loading: false,
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
setTimeout(() => {
this.$emit("change-step", 3);
this.loading = false;
}, 2000);
} else {
this.loading = false;
}
});
},
rules: {
password: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
],
handlePrev() {
this.$emit("change-step", 1);
},
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>
<style lang="scss" scoped>
.pay-top-content {
text-align: center;
.pay-top-content {
text-align: center;
.pay-success {
display: block;
margin: 20px auto 5px auto;
font-size: 40px;
color: $base-color-green;
.pay-success {
display: block;
margin: 20px auto 5px auto;
font-size: 40px;
color: $base-color-green;
}
}
}
.pay-bottom {
padding: 20px;
margin-top: 20px;
background: #f5f7f8;
border: 1px dashed $base-color-gray;
}
.pay-bottom {
padding: 20px;
margin-top: 20px;
background: #f5f7f8;
border: 1px dashed $base-color-gray;
}
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
.pay-button-group {
display: block;
margin: 20px auto;
text-align: center;
}
</style>
src/views/mall/pay/index.vue
......@@ -30,31 +30,31 @@
</template>
<script>
import Step1 from "./components/Step1";
import Step2 from "./components/Step2";
import Step3 from "./components/Step3";
export default {
name: "Pay",
components: { Step1, Step2, Step3 },
data() {
return {
active: 1,
form: {},
};
},
methods: {
handleSetStep(active, form) {
this.active = active;
if (form) this.form = Object.assign(this.form, form);
import Step1 from "./components/Step1";
import Step2 from "./components/Step2";
import Step3 from "./components/Step3";
export default {
name: "Pay",
components: { Step1, Step2, Step3 },
data() {
return {
active: 1,
form: {},
};
},
},
};
methods: {
handleSetStep(active, form) {
this.active = active;
if (form) this.form = Object.assign(this.form, form);
},
},
};
</script>
<style lang="scss" scoped>
.pay-container {
.steps {
justify-content: center;
margin-bottom: 20px;
.pay-container {
.steps {
justify-content: center;
margin-bottom: 20px;
}
}
}
</style>
src/views/personalCenter/index.vue
......@@ -10,14 +10,14 @@
</template>
<script>
export default {
name: "PersonalCenter",
data() {
return {
tabPosition: "left",
};
},
created() {},
methods: {},
};
export default {
name: "PersonalCenter",
data() {
return {
tabPosition: "left",
};
},
created() {},
methods: {},
};
</script>
src/views/personnelManagement/menuManagement/components/MenuManagementEdit.vue
......@@ -17,55 +17,55 @@
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消 </el-button>
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import { doEdit } from "@/api/menuManagement";
import { doEdit } from "@/api/menuManagement";
export default {
name: "MenuManagementEdit",
data() {
return {
form: {},
rules: {
id: [{ required: true, trigger: "blur", message: "请输入路径" }],
},
title: "",
dialogFormVisible: false,
};
},
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
this.title = "编辑";
this.form = Object.assign({}, row);
}
this.dialogFormVisible = true;
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
export default {
name: "MenuManagementEdit",
data() {
return {
form: {},
rules: {
id: [{ required: true, trigger: "blur", message: "请输入路径" }],
},
title: "",
dialogFormVisible: false,
};
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
return false;
this.title = "编辑";
this.form = Object.assign({}, row);
}
});
this.dialogFormVisible = true;
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
} else {
return false;
}
});
},
},
},
};
};
</script>
src/views/personnelManagement/menuManagement/index.vue
......@@ -11,8 +11,8 @@
node-key="id"
:default-expanded-keys="['root']"
@node-click="handleNodeClick"
></el-tree
></el-col>
></el-tree>
</el-col>
<el-col :xs="24" :sm="24" :md="16" :lg="20" :xl="20">
<vab-query-form>
<vab-query-form-top-panel :span="12">
......@@ -107,11 +107,11 @@
width="200"
>
<template v-slot="scope">
<el-button type="text" @click="handleEdit(scope.row)"
>编辑
<el-button type="text" @click="handleEdit(scope.row)">
编辑
</el-button>
<el-button type="text" @click="handleDelete(scope.row)"
>删除
<el-button type="text" @click="handleDelete(scope.row)">
删除
</el-button>
</template>
</el-table-column>
......@@ -124,59 +124,59 @@
</template>
<script>
import { getRouterList as getList } from "@/api/router";
import { getTree, doDelete } from "@/api/menuManagement";
import Edit from "./components/MenuManagementEdit";
import { getRouterList as getList } from "@/api/router";
import { getTree, doDelete } from "@/api/menuManagement";
import Edit from "./components/MenuManagementEdit";
export default {
name: "MenuManagement",
components: { Edit },
data() {
return {
data: [],
defaultProps: {
children: "children",
label: "label",
},
list: [],
listLoading: true,
elementLoadingText: "正在加载...",
};
},
async created() {
const roleData = await getTree();
this.data = roleData.data;
this.fetchData();
},
methods: {
handleEdit(row) {
if (row.path) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
export default {
name: "MenuManagement",
components: { Edit },
data() {
return {
data: [],
defaultProps: {
children: "children",
label: "label",
},
list: [],
listLoading: true,
elementLoadingText: "正在加载...",
};
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
}
async created() {
const roleData = await getTree();
this.data = roleData.data;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
methods: {
handleEdit(row) {
if (row.path) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
}
},
async fetchData() {
this.listLoading = true;
const { data } = await getList();
this.list = data;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
handleNodeClick(data) {
this.fetchData();
const { data } = await getList();
this.list = data;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
handleNodeClick(data) {
this.fetchData();
},
},
},
};
};
</script>
src/views/personnelManagement/roleManagement/components/RoleManagementEdit.vue
......@@ -18,52 +18,52 @@
</template>
<script>
import { doEdit } from "@/api/roleManagement";
import { doEdit } from "@/api/roleManagement";
export default {
name: "RoleManagementEdit",
data() {
return {
form: {
id: "",
},
rules: {
permission: [
{ required: true, trigger: "blur", message: "请输入权限码" },
],
},
title: "",
dialogFormVisible: false,
};
},
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
this.title = "编辑";
this.form = Object.assign({}, row);
}
this.dialogFormVisible = true;
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
export default {
name: "RoleManagementEdit",
data() {
return {
form: {
id: "",
},
rules: {
permission: [
{ required: true, trigger: "blur", message: "请输入权限码" },
],
},
title: "",
dialogFormVisible: false,
};
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
return false;
this.title = "编辑";
this.form = Object.assign({}, row);
}
});
this.dialogFormVisible = true;
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
} else {
return false;
}
});
},
},
},
};
};
</script>
src/views/personnelManagement/roleManagement/index.vue
......@@ -5,11 +5,11 @@
</el-divider>
<vab-query-form>
<vab-query-form-left-panel :span="12">
<el-button icon="el-icon-plus" type="primary" @click="handleEdit"
>添加</el-button
>
<el-button icon="el-icon-delete" type="danger" @click="handleDelete"
>批量删除
<el-button icon="el-icon-plus" type="primary" @click="handleEdit">
添加
</el-button>
<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
批量删除
</el-button>
</vab-query-form-left-panel>
<vab-query-form-right-panel :span="12">
......@@ -22,8 +22,8 @@
/>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" @click="queryData"
>查询
<el-button icon="el-icon-search" type="primary" @click="queryData">
查询
</el-button>
</el-form-item>
</el-form>
......@@ -41,8 +41,8 @@
show-overflow-tooltip
prop="id"
label="id"
></el-table-column
><el-table-column
></el-table-column>
<el-table-column
show-overflow-tooltip
prop="permission"
label="权限码"
......@@ -54,11 +54,9 @@
width="200"
>
<template v-slot="scope">
<el-button type="text" @click="handleEdit(scope.row)"
>编辑
</el-button>
<el-button type="text" @click="handleDelete(scope.row)"
>删除
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">
删除
</el-button>
</template>
</el-table-column>
......@@ -71,90 +69,89 @@
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
></el-pagination>
<edit ref="edit" @fetchData="fetchData"></edit>
</div>
</template>
<script>
import { getList, doDelete } from "@/api/roleManagement";
import Edit from "./components/RoleManagementEdit";
import { getList, doDelete } from "@/api/roleManagement";
import Edit from "./components/RoleManagementEdit";
export default {
name: "RoleManagement",
components: { Edit },
data() {
return {
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 10,
permission: "",
},
};
},
created() {
this.fetchData();
},
methods: {
setSelectRows(val) {
this.selectRows = val;
export default {
name: "RoleManagement",
components: { Edit },
data() {
return {
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 10,
permission: "",
},
};
},
handleEdit(row) {
if (row.id) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
created() {
this.fetchData();
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
if (this.selectRows.length > 0) {
const ids = this.selectRows.map((item) => item.id).join();
this.$baseConfirm("你确定要删除选中项吗", null, async () => {
const { msg } = await doDelete({ ids });
methods: {
setSelectRows(val) {
this.selectRows = val;
},
handleEdit(row) {
if (row.id) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
this.$baseMessage("未选中任何行", "error");
return false;
if (this.selectRows.length > 0) {
const ids = this.selectRows.map((item) => item.id).join();
this.$baseConfirm("你确定要删除选中项吗", null, async () => {
const { msg } = await doDelete({ ids });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
this.$baseMessage("未选中任何行", "error");
return false;
}
}
}
},
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
},
},
};
};
</script>
src/views/personnelManagement/userManagement/components/UserManagementEdit.vue
......@@ -34,60 +34,62 @@
</template>
<script>
import { doEdit } from "@/api/userManagement";
import { doEdit } from "@/api/userManagement";
export default {
name: "UserManagementEdit",
data() {
return {
form: {
username: "",
password: "",
email: "",
permissions: [],
},
rules: {
username: [
{ required: true, trigger: "blur", message: "请输入用户名" },
],
password: [{ required: true, trigger: "blur", message: "请输入密码" }],
email: [{ required: true, trigger: "blur", message: "请输入邮箱" }],
permissions: [
{ required: true, trigger: "blur", message: "请选择权限" },
],
},
title: "",
dialogFormVisible: false,
};
},
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
this.title = "编辑";
this.form = Object.assign({}, row);
}
this.dialogFormVisible = true;
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
export default {
name: "UserManagementEdit",
data() {
return {
form: {
username: "",
password: "",
email: "",
permissions: [],
},
rules: {
username: [
{ required: true, trigger: "blur", message: "请输入用户名" },
],
password: [
{ required: true, trigger: "blur", message: "请输入密码" },
],
email: [{ required: true, trigger: "blur", message: "请输入邮箱" }],
permissions: [
{ required: true, trigger: "blur", message: "请选择权限" },
],
},
title: "",
dialogFormVisible: false,
};
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
created() {},
methods: {
showEdit(row) {
if (!row) {
this.title = "添加";
} else {
return false;
this.title = "编辑";
this.form = Object.assign({}, row);
}
});
this.dialogFormVisible = true;
},
close() {
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
},
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.close();
} else {
return false;
}
});
},
},
},
};
};
</script>
src/views/personnelManagement/userManagement/index.vue
......@@ -2,11 +2,11 @@
<div class="userManagement-container">
<vab-query-form>
<vab-query-form-left-panel :span="12">
<el-button icon="el-icon-plus" type="primary" @click="handleEdit"
>添加</el-button
>
<el-button icon="el-icon-delete" type="danger" @click="handleDelete"
>批量删除
<el-button icon="el-icon-plus" type="primary" @click="handleEdit">
添加
</el-button>
<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
批量删除
</el-button>
</vab-query-form-left-panel>
<vab-query-form-right-panel :span="12">
......@@ -19,8 +19,8 @@
/>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" @click="queryData"
>查询
<el-button icon="el-icon-search" type="primary" @click="queryData">
查询
</el-button>
</el-form-item>
</el-form>
......@@ -52,9 +52,9 @@
<el-table-column show-overflow-tooltip label="权限">
<template v-slot="{ row }">
<el-tag v-for="(item, index) in row.permissions" :key="index">{{
item
}}</el-tag>
<el-tag v-for="(item, index) in row.permissions" :key="index">
{{ item }}
</el-tag>
</template>
</el-table-column>
......@@ -70,11 +70,9 @@
width="200"
>
<template v-slot="scope">
<el-button type="text" @click="handleEdit(scope.row)"
>编辑
</el-button>
<el-button type="text" @click="handleDelete(scope.row)"
>删除
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">
删除
</el-button>
</template>
</el-table-column>
......@@ -87,90 +85,89 @@
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
></el-pagination>
<edit ref="edit" @fetchData="fetchData"></edit>
</div>
</template>
<script>
import { getList, doDelete } from "@/api/userManagement";
import Edit from "./components/UserManagementEdit";
import { getList, doDelete } from "@/api/userManagement";
import Edit from "./components/UserManagementEdit";
export default {
name: "UserManagement",
components: { Edit },
data() {
return {
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 10,
username: "",
},
};
},
created() {
this.fetchData();
},
methods: {
setSelectRows(val) {
this.selectRows = val;
export default {
name: "UserManagement",
components: { Edit },
data() {
return {
list: null,
listLoading: true,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
selectRows: "",
elementLoadingText: "正在加载...",
queryForm: {
pageNo: 1,
pageSize: 10,
username: "",
},
};
},
handleEdit(row) {
if (row.id) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
created() {
this.fetchData();
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
if (this.selectRows.length > 0) {
const ids = this.selectRows.map((item) => item.id).join();
this.$baseConfirm("你确定要删除选中项吗", null, async () => {
const { msg } = await doDelete({ ids });
methods: {
setSelectRows(val) {
this.selectRows = val;
},
handleEdit(row) {
if (row.id) {
this.$refs["edit"].showEdit(row);
} else {
this.$refs["edit"].showEdit();
}
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
const { msg } = await doDelete({ ids: row.id });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
this.$baseMessage("未选中任何行", "error");
return false;
if (this.selectRows.length > 0) {
const ids = this.selectRows.map((item) => item.id).join();
this.$baseConfirm("你确定要删除选中项吗", null, async () => {
const { msg } = await doDelete({ ids });
this.$baseMessage(msg, "success");
this.fetchData();
});
} else {
this.$baseMessage("未选中任何行", "error");
return false;
}
}
}
},
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.pageNo = val;
this.fetchData();
},
queryData() {
this.queryForm.pageNo = 1;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList(this.queryForm);
this.list = data;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
},
},
};
};
</script>
src/views/test/index.vue
......@@ -4,13 +4,13 @@
</div>
</template>
<script>
export default {
name: "Test",
data() {
return { show: true };
},
created() {},
mounted() {},
methods: {},
};
export default {
name: "Test",
data() {
return { show: true };
},
created() {},
mounted() {},
methods: {},
};
</script>
src/views/vab/backToTop/index.vue
......@@ -8,15 +8,15 @@
</template>
<script>
export default {
name: "BackToTop",
data() {
return {};
},
};
export default {
name: "BackToTop",
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.placeholder-container div {
margin: 10px;
}
.placeholder-container div {
margin: 10px;
}
</style>
src/views/vab/betterScroll/index.vue
......@@ -14,8 +14,8 @@
<el-button @click="handleScrollTo(300)">滚动到300像素位置</el-button>
<el-button @click="handleScrollBy(100)">向下滚动100像素</el-button>
<el-button @click="handleScrollBy(-50)">向上滚动50像素</el-button>
<el-button @click="handleScrollToElement(15)">滚动到第15个 </el-button>
<el-button @click="handleScrollToElement(25)">滚动到第25个 </el-button>
<el-button @click="handleScrollToElement(15)">滚动到第15个</el-button>
<el-button @click="handleScrollToElement(25)">滚动到第25个</el-button>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<div ref="wrapper" class="right-content">
......@@ -29,55 +29,55 @@
</template>
<script>
import BScroll from "better-scroll";
import BScroll from "better-scroll";
export default {
name: "BetterScroll",
data() {
return {
time: 1000,
BS: null,
};
},
mounted() {
this.scrollInit();
},
beforeDestroy() {
this.scrollDestroy();
},
methods: {
handleScrollTo(y) {
this.BS.scrollTo(0, -y, this.time);
export default {
name: "BetterScroll",
data() {
return {
time: 1000,
BS: null,
};
},
handleScrollBy(y) {
this.BS.scrollBy(0, -y, this.time);
mounted() {
this.scrollInit();
},
handleScrollToElement(n) {
this.BS.scrollToElement(`#bs-item-${n}`, this.time);
beforeDestroy() {
this.scrollDestroy();
},
scrollInit() {
this.BS = new BScroll(this.$refs["wrapper"], {
mouseWheel: true,
scrollbar: {
fade: true,
interactive: false,
},
});
methods: {
handleScrollTo(y) {
this.BS.scrollTo(0, -y, this.time);
},
handleScrollBy(y) {
this.BS.scrollBy(0, -y, this.time);
},
handleScrollToElement(n) {
this.BS.scrollToElement(`#bs-item-${n}`, this.time);
},
scrollInit() {
this.BS = new BScroll(this.$refs["wrapper"], {
mouseWheel: true,
scrollbar: {
fade: true,
interactive: false,
},
});
},
scrollDestroy() {
if (this.BS) {
this.BS.destroy();
}
},
},
scrollDestroy() {
if (this.BS) {
this.BS.destroy();
}
},
},
};
};
</script>
<style lang="scss" scoped>
.better-scroll-container {
.right-content {
height: 500px;
margin-top: 40px;
overflow: hidden;
.better-scroll-container {
.right-content {
height: 500px;
margin-top: 40px;
overflow: hidden;
}
}
}
</style>
src/views/vab/card/index.vue
......@@ -39,61 +39,61 @@
</template>
<script>
import { getList } from "@/api/table";
import VabImage from "@/components/VabImage";
import { getList } from "@/api/table";
import VabImage from "@/components/VabImage";
export default {
name: "Card",
components: {
VabImage,
},
data() {
return {
value: true,
currentDate: new Date(),
list: null,
listLoading: true,
pageNo: 1,
pageSize: 10,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
height: 0,
elementLoadingText: "正在加载...",
dialogFormVisible: false,
};
},
created() {
this.fetchData();
this.height = this.$baseTableHeight(1);
},
methods: {
bigClick(val) {
this.$baseAlert("点击了大图");
export default {
name: "Card",
components: {
VabImage,
},
smallClick(val) {
this.$baseAlert("点击了小图");
data() {
return {
value: true,
currentDate: new Date(),
list: null,
listLoading: true,
pageNo: 1,
pageSize: 10,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
background: true,
height: 0,
elementLoadingText: "正在加载...",
dialogFormVisible: false,
};
},
handleSizeChange(val) {
this.pageSize = val;
created() {
this.fetchData();
this.height = this.$baseTableHeight(1);
},
handleCurrentChange(val) {
this.pageNo = val;
this.fetchData();
},
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);
methods: {
bigClick(val) {
this.$baseAlert("点击了大图");
},
smallClick(val) {
this.$baseAlert("点击了小图");
},
handleSizeChange(val) {
this.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.pageNo = val;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data, totalCount } = await getList({
pageNo: this.pageNo,
pageSize: this.pageSize,
});
this.list = data;
this.total = totalCount;
setTimeout(() => {
this.listLoading = false;
}, 300);
},
},
},
};
};
</script>
src/views/vab/codeGenerator/components/TableEditor.vue
......@@ -8,30 +8,30 @@
</template>
<script>
import JsonEditor from "@/components/JsonEditor/index";
import JsonEditor from "@/components/JsonEditor/index";
const jsonData =
'{"code": 200, "msg": "操作成功", "pageNo": 1, "pageSize": 10, "totalPages": 4, "totalCount": 238, "data": [{"id": "", "title": "", "status": "", "author": "", "datetime": "", "pageViews": "", "img": "", "switch": ""}]}';
const jsonData =
'{"code": 200, "msg": "操作成功", "pageNo": 1, "pageSize": 10, "totalPages": 4, "totalCount": 238, "data": [{"id": "", "title": "", "status": "", "author": "", "datetime": "", "pageViews": "", "img": "", "switch": ""}]}';
export default {
components: { JsonEditor },
data() {
return {
value: JSON.parse(jsonData),
};
},
computed: {},
created() {
this.prettierJSON();
},
methods: {
prettierJSON() {
this.$emit("change", jsonData);
export default {
components: { JsonEditor },
data() {
return {
value: JSON.parse(jsonData),
};
},
computed: {},
created() {
this.prettierJSON();
},
prettierNewJSON(jsonData) {
this.$emit("change", jsonData);
methods: {
prettierJSON() {
this.$emit("change", jsonData);
},
prettierNewJSON(jsonData) {
this.$emit("change", jsonData);
},
},
},
};
};
</script>
src/views/vab/codeGenerator/components/TableExhibition.vue
......@@ -13,69 +13,69 @@
</template>
<script>
import TableExhibitionBody from "./TableExhibitionBody";
import TableExhibitionQuery from "./TableExhibitionQuery";
import TableExhibitionHeader from "./TableExhibitionHeader";
import { genTableSnippet } from "./snippetTable.js";
import TableExhibitionBody from "./TableExhibitionBody";
import TableExhibitionQuery from "./TableExhibitionQuery";
import TableExhibitionHeader from "./TableExhibitionHeader";
import { genTableSnippet } from "./snippetTable.js";
export default {
components: {
TableExhibitionBody,
TableExhibitionHeader,
TableExhibitionQuery,
},
props: {
tableData: {
type: Object,
default: () => {
return {};
export default {
components: {
TableExhibitionBody,
TableExhibitionHeader,
TableExhibitionQuery,
},
props: {
tableData: {
type: Object,
default: () => {
return {};
},
},
},
},
data() {
return {
list: [],
code: "",
headers: [],
query: {
limit: 20,
cursor: 1,
data() {
return {
list: [],
code: "",
headers: [],
query: {
limit: 20,
cursor: 1,
},
total: 0,
};
},
watch: {
tableData: {
handler(val) {
this.list = val.data && val.data.slice(0, 3);
if (this.list) {
this.headers = Object.keys(this.list[0]).map((item) => {
// opt 为需要对 字段的操作，''空就不操作，'time' 处理时间，'template' 将字段放在template 里面，方便后续操作
return {
value: this.list[0][item],
key: item,
label: item,
show: true,
opt: "",
query: false,
};
});
}
},
immediate: true,
},
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,
};
});
}
headers: {
handler(val) {
this.code = genTableSnippet(val, this.getTableAPI);
this.$store.dispatch("table/setTableCode", this.code);
},
deep: true,
},
immediate: true,
},
headers: {
handler(val) {
this.code = genTableSnippet(val, this.getTableAPI);
this.$store.dispatch("table/setTableCode", this.code);
},
deep: true,
created() {},
methods: {
editdata() {},
test(val) {},
},
},
created() {},
methods: {
editdata() {},
test(val) {},
},
};
};
</script>
src/views/vab/codeGenerator/components/TableExhibitionBody.vue
......@@ -19,42 +19,41 @@
background
layout="total, sizes, prev, pager, next, jumper"
:total="1000"
>
</el-pagination>
></el-pagination>
</div>
</template>
<script>
export default {
props: {
list: {
type: null,
required: true,
export default {
props: {
list: {
type: null,
required: true,
},
headers: {
type: Array,
required: true,
},
},
headers: {
type: Array,
required: true,
data() {
return {
query: {
limit: 20,
cursor: 1,
},
table_key: 0,
total: 0,
};
},
},
data() {
return {
query: {
limit: 20,
cursor: 1,
watch: {
headers() {
this.table_key++;
},
table_key: 0,
total: 0,
};
},
watch: {
headers() {
this.table_key++;
},
},
created() {},
methods: {
editdata() {},
test(val) {},
},
};
created() {},
methods: {
editdata() {},
test(val) {},
},
};
</script>
src/views/vab/codeGenerator/components/TableExhibitionHeader.vue
......@@ -17,11 +17,14 @@
effect="dark"
placement="top-start"
>
<el-button v-if="header.opt === ''" @click="opt(header, 'template')"
>{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
<el-button
v-if="header.opt === ''"
@click="opt(header, 'template')"
>
{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
</el-button>
<el-button v-else @click="opt(header, '')"
>{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
<el-button v-else @click="opt(header, '')">
{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
</el-button>
</el-tooltip>
<el-tooltip
......@@ -30,8 +33,8 @@
effect="dark"
placement="top-start"
>
<el-button @click="hide(header)"
>{{ header.show ? "点击隐藏字段" : "点击显示字段" }}
<el-button @click="hide(header)">
{{ header.show ? "点击隐藏字段" : "点击显示字段" }}
</el-button>
</el-tooltip>
<div slot="reference" class="table-header-card">
......@@ -50,67 +53,67 @@
</template>
<script>
import draggable from "vuedraggable";
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
props: {
headers: {
type: Array,
required: true,
export default {
components: {
draggable,
},
},
data() {
return {
tableHeaders: this.headers,
};
},
watch: {
headers(val) {
this.tableHeaders = val;
props: {
headers: {
type: Array,
required: true,
},
},
},
methods: {
set() {
this.$emit("update:headers", this.tableHeaders);
data() {
return {
tableHeaders: this.headers,
};
},
show(header) {
header.show = true;
watch: {
headers(val) {
this.tableHeaders = val;
},
},
hide(header) {
header.show = !header.show;
methods: {
set() {
this.$emit("update:headers", this.tableHeaders);
},
show(header) {
header.show = true;
},
hide(header) {
header.show = !header.show;
},
opt(header, opt) {
header.opt = opt;
},
query(header, query) {
header.query = query;
},
},
opt(header, opt) {
header.opt = opt;
},
query(header, query) {
header.query = query;
},
},
};
};
</script>
<style scoped>
.table-header-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
.table-header-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
.table-header >>> .el-input__inner {
border: none;
border-bottom: 1px solid #9e9e9e;
border-radius: 0;
}
.table-header >>> .el-input__inner {
border: none;
border-bottom: 1px solid #9e9e9e;
border-radius: 0;
}
.el-popover {
min-width: 100px !important;
}
.el-popover {
min-width: 100px !important;
}
</style>
src/views/vab/codeGenerator/components/TableExhibitionQuery.vue
......@@ -2,8 +2,8 @@
<div class="table-query">
<div>
<el-button type="primary" @click="openCodeDialog">查看代码</el-button>
<el-button type="primary" @click="handleClipboard(srcTableCode, $event)"
>复制代码
<el-button type="primary" @click="handleClipboard(srcTableCode, $event)">
复制代码
</el-button>
</div>
<el-dialog destroy-on-close title="查看代码" :visible.sync="dialogVisible">
......@@ -11,69 +11,72 @@
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="closeCodeDialog(srcTableCode, $event)"
>复制代码</el-button
<el-button
type="primary"
@click="closeCodeDialog(srcTableCode, $event)"
>
复制代码
</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import clipboard from "@/utils/clipboard";
import CodeMirror from "codemirror";
import { mapGetters } from "vuex";
import clipboard from "@/utils/clipboard";
import CodeMirror from "codemirror";
export default {
props: {
headers: {
type: Array,
required: true,
export default {
props: {
headers: {
type: Array,
required: true,
},
},
},
data() {
return {
dialogVisible: false,
};
},
computed: {
...mapGetters({ srcTableCode: "table/srcTableCode" }),
},
methods: {
handleClipboard(text, event) {
clipboard(text, event);
data() {
return {
dialogVisible: false,
};
},
openCodeDialog() {
this.dialogVisible = true;
setTimeout(() => {
CodeMirror.fromTextArea(this.$refs.code, {
lineNumbers: true,
gutters: ["CodeMirror-lint-markers"],
theme: "rubyblue",
autoRefresh: true,
lint: true,
});
}, 0);
computed: {
...mapGetters({ srcTableCode: "table/srcTableCode" }),
},
closeCodeDialog(text, event) {
this.handleClipboard(text, event);
this.dialogVisible = false;
methods: {
handleClipboard(text, event) {
clipboard(text, event);
},
openCodeDialog() {
this.dialogVisible = true;
setTimeout(() => {
CodeMirror.fromTextArea(this.$refs.code, {
lineNumbers: true,
gutters: ["CodeMirror-lint-markers"],
theme: "rubyblue",
autoRefresh: true,
lint: true,
});
}, 0);
},
closeCodeDialog(text, event) {
this.handleClipboard(text, event);
this.dialogVisible = false;
},
},
},
};
};
</script>
<style lang="scss" scoped>
.table-query {
display: flex;
justify-content: flex-end;
height: 45px;
.table-query {
display: flex;
justify-content: flex-end;
height: 45px;
::v-deep {
.CodeMirror {
height: auto;
min-height: calc(100vh - 420px);
::v-deep {
.CodeMirror {
height: auto;
min-height: calc(100vh - 420px);
}
}
}
}
</style>
src/views/vab/codeGenerator/index.vue
......@@ -12,25 +12,25 @@
</template>
<script>
import TableEditor from "./components/TableEditor";
import TableExhibition from "./components/TableExhibition";
import TableEditor from "./components/TableEditor";
import TableExhibition from "./components/TableExhibition";
export default {
name: "Index",
components: {
TableEditor,
TableExhibition,
},
data() {
return {
tableData: {},
getTableAPI: "",
};
},
methods: {
setTableData(val) {
this.tableData = JSON.parse(val);
export default {
name: "Index",
components: {
TableEditor,
TableExhibition,
},
},
};
data() {
return {
tableData: {},
getTableAPI: "",
};
},
methods: {
setTableData(val) {
this.tableData = JSON.parse(val);
},
},
};
</script>
src/views/vab/editor/index.vue
......@@ -14,7 +14,7 @@
<vab-quill v-model="form.content" :min-height="400"></vab-quill>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSee">预览效果 </el-button>
<el-button type="primary" @click="handleSee">预览效果</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</el-form-item>
</el-form>
......@@ -28,101 +28,101 @@
</template>
<script>
import vabQuill from "@/plugins/vabQuill";
export default {
name: "Editor",
components: { vabQuill },
data() {
return {
borderColor: "#dcdfe6",
dialogTableVisible: false,
form: {
title: "",
module: "",
content: "",
},
rules: {
title: [
{
required: true,
message: "请输入标题",
trigger: "blur",
},
],
module: [
{
required: true,
message: "请选择模块",
trigger: "change",
},
],
content: [
{
required: true,
message: "请输入内容",
trigger: "blur",
},
],
},
};
},
methods: {
handleSee() {
this.$refs["form"].validate((valid) => {
this.$refs.form.validateField("content", (errorMsg) => {});
if (valid) {
this.dialogTableVisible = true;
} else {
return false;
}
});
import vabQuill from "@/plugins/vabQuill";
export default {
name: "Editor",
components: { vabQuill },
data() {
return {
borderColor: "#dcdfe6",
dialogTableVisible: false,
form: {
title: "",
module: "",
content: "",
},
rules: {
title: [
{
required: true,
message: "请输入标题",
trigger: "blur",
},
],
module: [
{
required: true,
message: "请选择模块",
trigger: "change",
},
],
content: [
{
required: true,
message: "请输入内容",
trigger: "blur",
},
],
},
};
},
handleSave() {
this.$refs["form"].validate((valid) => {
this.$refs.form.validateField("content", (errorMsg) => {
this.borderColor = "#dcdfe6";
if (errorMsg) {
this.borderColor = "#F56C6C";
methods: {
handleSee() {
this.$refs["form"].validate((valid) => {
this.$refs.form.validateField("content", (errorMsg) => {});
if (valid) {
this.dialogTableVisible = true;
} else {
return false;
}
});
if (valid) {
this.$baseMessage("submit!", "success");
} else {
return false;
}
});
},
handleSave() {
this.$refs["form"].validate((valid) => {
this.$refs.form.validateField("content", (errorMsg) => {
this.borderColor = "#dcdfe6";
if (errorMsg) {
this.borderColor = "#F56C6C";
}
});
if (valid) {
this.$baseMessage("submit!", "success");
} else {
return false;
}
});
},
},
},
};
};
</script>
<style lang="scss" scoped>
.editor-container {
.news {
&-title {
text-align: center;
}
.editor-container {
.news {
&-title {
text-align: center;
}
&-content {
::v-deep {
p {
line-height: 30px;
&-content {
::v-deep {
p {
line-height: 30px;
img {
display: block;
margin-right: auto;
margin-left: auto;
img {
display: block;
margin-right: auto;
margin-left: auto;
}
}
}
}
}
}
.vab-quill-content {
::v-deep {
.el-form-item__content {
line-height: normal;
.vab-quill-content {
::v-deep {
.el-form-item__content {
line-height: normal;
}
}
}
}
}
</style>
src/views/vab/element/index.vue
......@@ -2,8 +2,8 @@
<div class="element-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
<el-button type="primary" @click="dialogVisible = !dialogVisible"
>element全部文档点这里
<el-button type="primary" @click="dialogVisible = !dialogVisible">
element全部文档点这里
</el-button>
<el-dialog
:fullscreen="true"
......@@ -16,8 +16,8 @@
frameborder="0"
></iframe>
</el-dialog>
<el-divider content-position="left"
>Tag 标签
<el-divider content-position="left">
Tag 标签
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/tag"
......@@ -36,8 +36,8 @@
<el-tag effect="dark" type="warning">标签四</el-tag>
<el-tag effect="dark" type="danger">标签五</el-tag>
<el-divider content-position="left"
>进度条
<el-divider content-position="left">
进度条
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/progress"
......@@ -90,8 +90,8 @@
status="exception"
></el-progress>
<el-divider content-position="left"
>按钮
<el-divider content-position="left">
按钮
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/button"
......@@ -133,13 +133,14 @@
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary"
>上传<i class="el-icon-upload el-icon--right"></i
></el-button>
<el-button type="primary">
上传
<i class="el-icon-upload el-icon--right"></i>
</el-button>
<el-button type="primary" :loading="true">加载中</el-button>
<el-divider content-position="left"
>文字链接
<el-divider content-position="left">
文字链接
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/link"
......@@ -147,8 +148,8 @@
文档
</a>
</el-divider>
<el-link href="https://element.eleme.io" target="_blank"
>默认链接
<el-link href="https://element.eleme.io" target="_blank">
默认链接
</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success">成功链接</el-link>
......@@ -163,8 +164,8 @@
<el-link type="info" disabled>信息链接</el-link>
<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>
<el-divider content-position="left"
>头像
<el-divider content-position="left">
头像
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/avatar"
......@@ -173,8 +174,8 @@
</a>
</el-divider>
<el-avatar icon="el-icon-user-solid"></el-avatar>
<el-divider content-position="left"
>页头
<el-divider content-position="left">
页头
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/page-header"
......@@ -183,8 +184,8 @@
</a>
</el-divider>
<el-page-header content="详情页面"></el-page-header>
<el-divider content-position="left"
>面包屑
<el-divider content-position="left">
面包屑
<a
target="_blank"
href="https://element.eleme.cn/#/zh-CN/component/breadcrumb"
......@@ -204,50 +205,50 @@
</template>
<script>
export default {
name: "Element",
components: {},
data() {
return {
dialogVisible: false,
};
},
created() {},
mounted() {},
methods: {},
};
export default {
name: "Element",
components: {},
data() {
return {
dialogVisible: false,
};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.element-container {
::v-deep {
.el-dialog__wrapper {
position: fixed;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
.element-container {
::v-deep {
.el-dialog__wrapper {
position: fixed;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
.el-tag,
.el-button,
.el-link {
margin: 5px;
}
.el-tag,
.el-button,
.el-link {
margin: 5px;
}
.el-progress {
margin: 20px;
.el-progress {
margin: 20px;
}
}
}
.element-iframe {
position: absolute;
top: 55px;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 89vh;
.element-iframe {
position: absolute;
top: 55px;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 89vh;
}
}
}
</style>
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