..
This commit is contained in:
那些花儿
@@ -44,11 +44,11 @@ function pjaxReplace(url, data = {}) {
|
||||
}
|
||||
$.pjax({
|
||||
url: url,
|
||||
container: "#container",
|
||||
container: "#sub-app-container-main-content-body",
|
||||
maxCacheLength: 0,
|
||||
push: false,
|
||||
replace: true,
|
||||
fragment: "#container",
|
||||
fragment: "#sub-app-container-main-content-body",
|
||||
timeout: 8000,
|
||||
data
|
||||
})
|
||||
|
||||
@@ -48,13 +48,13 @@ const commonUtil = {
|
||||
|
||||
let loading = null
|
||||
|
||||
if(isMobile){
|
||||
if (isMobile) {
|
||||
loading = vant.Toast.loading({
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
message: '导出中,请耐心等待'
|
||||
});
|
||||
}else{
|
||||
} else {
|
||||
loading = ELEMENT.Loading.service({
|
||||
lock: true,
|
||||
text: "导出中,请耐心等待",
|
||||
@@ -64,7 +64,7 @@ const commonUtil = {
|
||||
}
|
||||
|
||||
Vue.prototype.$axios
|
||||
.post(url, data, { responseType: "blob" })
|
||||
.post(url, data, {responseType: "blob"})
|
||||
.then((response) => {
|
||||
if (response.data.type === "application/json") {
|
||||
try {
|
||||
@@ -102,9 +102,9 @@ const commonUtil = {
|
||||
loading.close()
|
||||
})
|
||||
.finally(() => {
|
||||
if(isMobile){
|
||||
if (isMobile) {
|
||||
loading.clear()
|
||||
}else{
|
||||
} else {
|
||||
loading.close()
|
||||
}
|
||||
})
|
||||
@@ -234,6 +234,7 @@ const commonUtil = {
|
||||
function doSm2Encrypt(msgString) {
|
||||
return sm2.doEncrypt(msgString, publicKey, cipherMode)
|
||||
}
|
||||
|
||||
// SM2数组加密
|
||||
function doSm2ArrayEncrypt(msgString) {
|
||||
return sm2.doEncrypt(msgString, publicKey, cipherMode)
|
||||
@@ -243,6 +244,24 @@ const commonUtil = {
|
||||
doSm2Encrypt,
|
||||
doSm2ArrayEncrypt
|
||||
}
|
||||
},
|
||||
|
||||
// pjax跳转
|
||||
pjaxPush(url, data = {}) {
|
||||
const {pathname, search} = location
|
||||
if (url === pathname + search) {
|
||||
return
|
||||
}
|
||||
$.pjax({
|
||||
url: url,
|
||||
container: "#sub-app-container-main-content-body",
|
||||
maxCacheLength: 0,
|
||||
push: false,
|
||||
replace: true,
|
||||
fragment: "#sub-app-container-main-content-body",
|
||||
timeout: 8000,
|
||||
data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -259,7 +278,8 @@ function GetQueryString(name) {
|
||||
}
|
||||
|
||||
function clearAllTimers() {
|
||||
const maxTimeoutId = setTimeout(function () {}, 0)
|
||||
const maxTimeoutId = setTimeout(function () {
|
||||
}, 0)
|
||||
for (let i = 0; i <= maxTimeoutId; i++) {
|
||||
clearTimeout(i)
|
||||
clearInterval(i)
|
||||
@@ -291,10 +311,10 @@ function base64ToFile(base64Data, filename) {
|
||||
}
|
||||
|
||||
// 使用Blob对象创建File对象
|
||||
const blob = new Blob([uInt8Array], { type: contentType })
|
||||
const blob = new Blob([uInt8Array], {type: contentType})
|
||||
blob.lastModifiedDate = new Date()
|
||||
blob.name = filename
|
||||
return new File([blob], filename, { type: contentType })
|
||||
return new File([blob], filename, {type: contentType})
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,8 +1,72 @@
|
||||
/**
|
||||
* Minified by jsDelivr using clean-css v5.3.3.
|
||||
* Original file: /npm/nprogress@0.2.0/nprogress.css
|
||||
*
|
||||
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
|
||||
*/
|
||||
#nprogress{pointer-events:none}#nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
|
||||
/*# sourceMappingURL=/sm/4400c1e6b434bc414f3870cc8d155b3335f1f32d1a07381e06cc8a8bd869de73.map */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: #29d;
|
||||
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
/* Fancy blur effect */
|
||||
#nprogress .peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
|
||||
opacity: 1.0;
|
||||
|
||||
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||
transform: rotate(3deg) translate(0px, -4px);
|
||||
}
|
||||
|
||||
/* Remove these to get rid of the spinner */
|
||||
#nprogress .spinner {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-top-color: #29d;
|
||||
border-left-color: #29d;
|
||||
border-radius: 50%;
|
||||
|
||||
-webkit-animation: nprogress-spinner 400ms linear infinite;
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent #nprogress .spinner,
|
||||
.nprogress-custom-parent #nprogress .bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@-webkit-keyframes nprogress-spinner {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes nprogress-spinner {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@@ -1,179 +1,252 @@
|
||||
<template>
|
||||
<div class="guava-main-content">
|
||||
<div v-show="v === 'index'" key="index" class="transition-item">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<el-card v-if="v === 'edit'" key="edit" shadow="never" class="animated-card">
|
||||
<template #header>
|
||||
<el-row type="flex">
|
||||
<el-col :span="12">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: flex-end">
|
||||
<slot name="edit_func"></slot>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<div :class="{ card_scroll: edit_scroll }">
|
||||
<slot name="edit"></slot>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card v-if="v === 'view'" key="view" shadow="never" class="animated-card">
|
||||
<template #header>
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</template>
|
||||
<div :class="{ card_scroll: !view_page_scroll }">
|
||||
<slot name="view"></slot>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card v-if="v === 'approval'" key="approval" shadow="never" class="animated-card">
|
||||
<template #header>
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</template>
|
||||
<div :class="{ card_scroll: approval_scroll }">
|
||||
<slot name="approval"></slot>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card v-if="v === 'public'" key="public" shadow="never" class="animated-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="back()">返回</el-button>
|
||||
</div>
|
||||
<div :class="{ card_scroll: public_card_scroll }">
|
||||
<slot name="public"></slot>
|
||||
</div>
|
||||
</el-card>
|
||||
<div class="guava-main-content">
|
||||
<div v-show="v === 'index'" key="index" class="transition-item">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<div v-if="v === 'edit'" key="edit" class="page-container animated-card">
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<slot name="edit_func"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<slot name="edit"></slot>
|
||||
</div>
|
||||
<div class="page-footer" v-if="$slots.edit_func">
|
||||
<slot name="edit_func"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="v === 'view'" key="view" class="page-container animated-card">
|
||||
<div class="page-header">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<slot name="view"></slot>
|
||||
</div>
|
||||
<div class="page-footer" v-if="$slots.view_footer">
|
||||
<slot name="view_footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="v === 'approval'" key="approval" class="page-container animated-card">
|
||||
<div class="page-header">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<slot name="approval"></slot>
|
||||
</div>
|
||||
<div class="page-footer" v-if="$slots.approval_footer">
|
||||
<slot name="approval_footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="v === 'public'" key="public" class="page-container animated-card">
|
||||
<div class="page-header">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="back()">返回</el-button>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<slot name="public"></slot>
|
||||
</div>
|
||||
<div class="page-footer" v-if="$slots.public_footer">
|
||||
<slot name="public_footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: "index"
|
||||
},
|
||||
//为true的时候页面不会滚动 card-body滚动 edit view 自己来控制
|
||||
edit_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
view_scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
approval_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
//view 页面是否滚动
|
||||
view_page_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
public_card_scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: "index"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
v: "index"
|
||||
}
|
||||
//为true的时候页面不会滚动 card-body滚动 edit view 自己来控制
|
||||
edit_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
watch: {
|
||||
v(newValue, oldValue) {
|
||||
this.$emit("vchange", { newValue, oldValue })
|
||||
this.$emit("input", newValue)
|
||||
}
|
||||
view_scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
methods: {
|
||||
index(callback = () => {}) {
|
||||
this.v = "index"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
edit(callback = () => {}) {
|
||||
this.v = "edit"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
view(callback = () => {}) {
|
||||
this.v = "view"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
approval(callback = () => {}) {
|
||||
this.v = "approval"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
public(callback = () => {}) {
|
||||
this.v = "public"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
back(callback = () => {}) {
|
||||
this.v = "index"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
}
|
||||
approval_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//view 页面是否滚动
|
||||
view_page_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
public_card_scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
v: "index"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(newVal) {
|
||||
this.v = newVal
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
v(newValue, oldValue) {
|
||||
this.$emit("vchange", { newValue, oldValue })
|
||||
this.$emit("input", newValue)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
index(callback = () => {}) {
|
||||
this.v = "index"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
edit(callback = () => {}) {
|
||||
this.v = "edit"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
view(callback = () => {}) {
|
||||
this.v = "view"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
approval(callback = () => {}) {
|
||||
this.v = "approval"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
public(callback = () => {}) {
|
||||
this.v = "public"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
back(callback = () => {}) {
|
||||
this.v = "index"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.guava-main-content {
|
||||
min-height: 100%;
|
||||
/*height: 100vh;
|
||||
overflow: hidden;*/
|
||||
}
|
||||
|
||||
.page-container {
|
||||
height: calc(100vh - 84px);
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation-name: cardAnimation;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
flex-shrink: 0;
|
||||
padding: 12px 24px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
background: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header-right button{
|
||||
padding: 9px 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 隐藏滚动条但保持滚动功能 */
|
||||
.page-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.page-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.page-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.page-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.page-footer{
|
||||
flex-shrink: 0;
|
||||
padding: 12px 10px;
|
||||
border-top: 1px solid rgb(235, 238, 245);
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
@keyframes cardAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animated-card {
|
||||
animation-name: cardAnimation;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
margin-top: 0 !important;
|
||||
animation-name: cardAnimation;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes cardAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card_scroll {
|
||||
max-height: calc(100vh - 56px - 40px - 30px - 50px - 34px);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card_scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.card_scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card_scroll::-webkit-scrollbar-vertical {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card_scroll::-webkit-scrollbar-horizontal {
|
||||
display: none;
|
||||
.transition-item {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user