JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-06-11 11:39:15 +08:00
Code Issues Projects Releases Wiki Activity

deploy

Browse Source
This commit is contained in:
初志鑫 2020-07-15 10:57:28 +08:00
parent 226e57f511
commit 9406b8ccce
16 changed files with 12 additions and 553 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -74,7 +74,7 @@
"zx-count": "^0.3.7",
"zx-icon": "^1.1.8",
"zx-keel": "^0.9.4",
"zx-layouts": "^0.6.0",
"zx-layouts": "^0.6.2",
"zx-magnifie": "^0.4.0",
"zx-markdown-editor": "^0.0.2",
"zx-player": "^0.9.6",

2
src/colorfulIcon/index.js
View File

@ -1,5 +1,5 @@
import Vue from "vue";
import ColorfullIcon from "@/components/ColorfullIcon";
import ColorfullIcon from "zx-layouts/ColorfullIcon";
Vue.component("vab-colorful-icon", ColorfullIcon);
const req = require.context("./svg", false, /\.svg$/),

65
src/components/ColorfullIcon/index.vue
View File

@ -1,65 +0,0 @@
<template>
<img
v-if="isExternal"
:src="styleExternalIcon"
class="svg-external-icon svg-icon"
v-on="$listeners"
/>
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
import { isExternal } from "@/utils/validate";
export default {
name: "ColorfulIcon",
props: {
iconClass: {
type: String,
required: true,
},
className: {
type: String,
default: "",
},
},
computed: {
isExternal() {
return isExternal(this.iconClass);
},
iconName() {
return `#colorful-icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return "svg-icon " + this.className;
} else {
return "svg-icon";
}
},
styleExternalIcon() {
return this.iconClass;
},
},
};
</script>
<style lang="scss" scoped>
.svg-icon {
width: 1em;
height: 1em;
overflow: hidden;
vertical-align: -0.15em;
fill: currentColor;
&:hover {
opacity: 0.8;
}
}
.svg-external-icon {
display: inline-block;
}
</style>

69
src/components/RemixIcon/index.vue
View File

@ -1,69 +0,0 @@
<template>
<div
v-if="isExternal"
:style="styleExternalIcon"
class="svg-external-icon svg-icon"
v-on="$listeners"
/>
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
import { isExternal } from "@/utils/validate";
export default {
name: "RemixIcon",
props: {
iconClass: {
type: String,
required: true,
},
className: {
type: String,
default: "",
},
},
computed: {
isExternal() {
return isExternal(this.iconClass);
},
iconName() {
return `#remix-icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return "svg-icon " + this.className;
} else {
return "svg-icon";
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
"-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`,
};
},
},
};
</script>
<style lang="scss" scoped>
.svg-icon {
width: 1.125em;
height: 1.125em;
overflow: hidden;
fill: currentColor;
&:hover {
opacity: 0.8;
}
}
.svg-external-icon {
display: inline-block;
background-color: currentColor;
mask-size: cover !important;
}
</style>

20
src/components/VabQueryForm/VabQueryFormBottomPanel.vue
View File

@ -1,20 +0,0 @@
<template>
<el-col :span="24">
<div class="bottom-panel">
<slot></slot>
</div>
</el-col>
</template>
<script>
export default {
name: "VabQueryFormBottomPanel",
props: {},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>

25
src/components/VabQueryForm/VabQueryFormLeftPanel.vue
View File

@ -1,25 +0,0 @@
<template>
<el-col :xs="24" :sm="24" :md="24" :lg="span" :xl="span">
<div class="left-panel">
<slot></slot>
</div>
</el-col>
</template>
<script>
export default {
name: "VabQueryFormLeftPanel",
props: {
span: {
type: Number,
default: 14,
},
},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>

25
src/components/VabQueryForm/VabQueryFormRightPanel.vue
View File

@ -1,25 +0,0 @@
<template>
<el-col :xs="24" :sm="24" :md="24" :lg="span" :xl="span">
<div class="right-panel">
<slot></slot>
</div>
</el-col>
</template>
<script>
export default {
name: "VabQueryFormRightPanel",
props: {
span: {
type: Number,
default: 10,
},
},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>

20
src/components/VabQueryForm/VabQueryFormTopPanel.vue
View File

@ -1,20 +0,0 @@
<template>
<el-col :span="24">
<div class="top-panel">
<slot></slot>
</div>
</el-col>
</template>
<script>
export default {
name: "VabQueryFormTopPanel",
props: {},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>

63
src/components/VabQueryForm/index.vue
View File

@ -1,63 +0,0 @@
<template>
<el-row :gutter="0" class="vab-query-form">
<slot></slot>
</el-row>
</template>
<script>
export default {
name: "VabQueryForm",
props: {},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
@mixin panel {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.vab-query-form {
margin-bottom: 10px;
::v-deep {
.top-panel {
@include panel;
}
.bottom-panel {
@include panel;
padding-top: 14px;
border-top: 1px solid #dcdfe6;
}
.left-panel {
@include panel;
> .el-button,
.el-form-item {
margin: 5px;
}
}
.right-panel {
@include panel;
justify-content: flex-end;
.el-form-item {
margin: 5px;
}
}
}
}
</style>

124
src/components/VabQuill/index.vue
View File

@ -1,124 +0,0 @@
<template>
<div class="vab-quill" :class="classes">
<div ref="editor" :style="styles"></div>
</div>
</template>
<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
name: "VabQuill",
props: {
value: {
type: String,
default: "",
},
border: {
type: Boolean,
default: false,
},
height: {
type: Number,
default: null,
},
minHeight: {
type: Number,
default: null,
},
},
data() {
return {
Quill: null,
currentValue: "",
options: {
theme: "snow",
bounds: document.body,
debug: "warn",
modules: {
toolbar: [
["bold", "italic", "underline", "strike"],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ size: ["small", false, "large", "huge"] }],
[{ color: [] }, { background: [] }],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ align: [] }],
[{ direction: "rtl" }],
["clean"],
["link", "image"],
],
},
placeholder: "内容...",
readOnly: false,
},
};
},
computed: {
classes() {
return [
{
"vab-quill-no-border": !this.border,
},
];
},
styles() {
let style = {};
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`;
}
if (this.height) {
style.height = `${this.height}px`;
}
return style;
},
},
watch: {
value: {
handler(val) {
if (val !== this.currentValue) {
this.currentValue = val;
if (this.Quill) {
this.Quill.pasteHTML(this.value);
}
}
},
immediate: true,
},
},
mounted() {
this.init();
},
beforeDestroy() {
this.Quill = null;
},
methods: {
init() {
const editor = this.$refs.editor;
this.Quill = new Quill(editor, this.options);
this.Quill.pasteHTML(this.currentValue);
this.Quill.on("text-change", (delta, oldDelta, source) => {
const html = this.$refs.editor.children[0].innerHTML;
const text = this.Quill.getText();
const quill = this.Quill;
this.currentValue = html;
this.$emit("input", html);
this.$emit("on-change", { html, text, quill });
});
this.Quill.on("text-change", (delta, oldDelta, source) => {
this.$emit("on-text-change", delta, oldDelta, source);
});
this.Quill.on("selection-change", (range, oldRange, source) => {
this.$emit("on-selection-change", range, oldRange, source);
});
this.Quill.on("editor-change", (eventName, ...args) => {
this.$emit("on-editor-change", eventName, ...args);
});
},
},
};
</script>

77
src/directive/drag/drag.js
View File

@ -1,77 +0,0 @@
export default {
bind(el, binding, vnode) {
if (
el.querySelector(".el-dialog__header") &&
el.querySelector(".el-dialog")
) {
const dialogHeaderEl = el.querySelector(".el-dialog__header");
const dragDom = el.querySelector(".el-dialog");
dialogHeaderEl.style.cssText += ";cursor:move;";
dragDom.style.cssText += ";top:0;";
const getStyle = (function () {
if (window.document.currentStyle) {
return (dom, attr) => dom.currentStyle[attr];
} else {
return (dom, attr) => getComputedStyle(dom, false)[attr];
}
})();
dialogHeaderEl.onmousedown = (e) => {
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
const dragDomWidth = dragDom.offsetWidth;
const dragDomHeight = dragDom.offsetHeight;
const screenWidth = document.body.clientWidth;
const screenHeight = document.body.clientHeight;
const minDragDomLeft = dragDom.offsetLeft;
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
const minDragDomTop = dragDom.offsetTop;
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight;
let styL = getStyle(dragDom, "left");
let styT = getStyle(dragDom, "top");
if (styL.includes("%")) {
styL = +document.body.clientWidth * (+styL / 100);
styT = +document.body.clientHeight * (+styT / 100);
} else {
styL = +styL.replace(/\px/g, "");
styT = +styT.replace(/\px/g, "");
}
document.onmousemove = function (e) {
let left = e.clientX - disX;
let top = e.clientY - disY;
if (-left > minDragDomLeft) {
left = -minDragDomLeft;
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft;
}
if (-top > minDragDomTop) {
top = -minDragDomTop;
} else if (top > maxDragDomTop) {
top = maxDragDomTop;
}
dragDom.style.cssText += `;left:${left + styL}px;top:${
top + styT
}px;`;
vnode.child.$emit("dragDialog");
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
},
};

13
src/directive/drag/index.js
View File

@ -1,13 +0,0 @@
import drag from "./drag";
const install = function (Vue) {
Vue.directive("drag", drag);
};
if (window.Vue) {
window["drag"] = drag;
Vue.use(install);
}
drag.install = install;
export default drag;

13
src/directive/permissions/index.js
View File

@ -1,13 +0,0 @@
import permissions from "./permissions";
const install = function (Vue) {
Vue.directive("permissions", permissions);
};
if (window.Vue) {
window["permissions"] = permissions;
Vue.use(install);
}
permissions.install = install;
export default permissions;

18
src/directive/permissions/permissions.js
View File

@ -1,18 +0,0 @@
import store from "@/store";
export default {
inserted(el, binding) {
const { value } = binding;
const permissions = store.getters["user/permissions"];
if (value && value instanceof Array && value.length > 0) {
const hasPermission = permissions.some((role) => {
return value.includes(role);
});
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el);
}
}
},
};

27
src/plugins/index.js
View File

@ -3,21 +3,17 @@ import Vue from "vue";
import "./element";
import "./support";
import "@/styles/vab.scss";
import vab from "@/utils/vab";
import "@/remixIcon";
import "@/colorfulIcon";
import "@/config/permission";
import "@/utils/errorLog";
import drag from "@/directive/drag";
import permissions from "@/directive/permissions";
import "./vabIcon";
import VabCount from "zx-count";
import VabQueryForm from "@/components/VabQueryForm";
import VabQueryFormTopPanel from "@/components/VabQueryForm/VabQueryFormTopPanel";
import VabQueryFormBottomPanel from "@/components/VabQueryForm/VabQueryFormBottomPanel";
import VabQueryFormLeftPanel from "@/components/VabQueryForm/VabQueryFormLeftPanel";
import VabQueryFormRightPanel from "@/components/VabQueryForm/VabQueryFormRightPanel";
import Vab from "@/utils/vab";
import VabDrag from "zx-layouts/Drag";
import VabPermissions from "zx-layouts/Permissions";
import VabCount from "zx-count";
import VabQueryForm from "zx-layouts/VabQueryForm/export";
import VueAMap from "vue-amap";
VueAMap.initAMapApiLoader({
@ -25,14 +21,9 @@ VueAMap.initAMapApiLoader({
plugin: ["Autocomplete", "PlaceSearch", "PolyEditor", "CircleEditor"],
v: "1.4.4",
});
Vue.use(Vab);
Vue.use(VabPermissions);
Vue.use(VabDrag);
Vue.use(VabQueryForm);
Vue.use(VueAMap);
Vue.use(VabCount);
Vue.use(permissions);
Vue.use(drag);
Vue.use(vab);
Vue.component("vab-query-form", VabQueryForm);
Vue.component("vab-query-form-left-panel", VabQueryFormLeftPanel);
Vue.component("vab-query-form-right-panel", VabQueryFormRightPanel);
Vue.component("vab-query-form-top-panel", VabQueryFormTopPanel);
Vue.component("vab-query-form-bottom-panel", VabQueryFormBottomPanel);

2
src/remixIcon/index.js
View File

@ -1,5 +1,5 @@
import Vue from "vue";
import RemixIcon from "@/components/RemixIcon";
import RemixIcon from "zx-layouts/RemixIcon";
Vue.component("vab-remix-icon", RemixIcon);
const req = require.context("./svg", false, /\.svg$/),