feat: 新增多标签Tab页内嵌模式

master
Yer 2023-07-06 11:44:15 +08:00
parent 3c83179579
commit 6b697f9ecd
38 changed files with 255 additions and 136 deletions

View File

@ -516,7 +516,6 @@ export default {
this.refundTotal = res.result.total;
this.$set(this, "refund", res.result.records);
console.log();
}
});
this.refundTotal = this.refund.length;

View File

@ -22,7 +22,6 @@ export function getBaseSite() {
// 上传文件
export const upLoadFileMethods = (bold) => {
console.log(bold)
return uploadFileRequest(uploadFile, bold);
};

View File

@ -1,3 +1,4 @@
module.exports = {
title: "lilishop", //配置显示在浏览器标签的title
/**
@ -11,10 +12,12 @@ module.exports = {
website: "https://www.pickmall.cn", //官网地址
enableCDN: true, //生产环境 是否启用cdn加载 vue等js
port: 10002, //端口
inputMaxLength:'140', //全局输入框默认最大输入长度字
inputMaxLength: "140", //全局输入框默认最大输入长度字
/**
* 如需更换主题请修改此处以及theme.less中修改
*/
mainColor:"#ff5c58", //主题色
mainColor: "#ff5c58", //主题色
setting: {
isUseTabsRouter: true, //多标签Tab页模式
},
};

View File

@ -0,0 +1,6 @@
{
"setting": {
"isUseTabsRouter": true,
"showFooter": false
}
}

View File

@ -94,6 +94,13 @@ Array.prototype.remove = function (from, to) {
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]);
});
/* eslint-disable no-new */
new Vue({
el: "#app",

View File

@ -2,6 +2,7 @@ import Vue from 'vue';
import Vuex from 'vuex';
import app from './modules/app';
import setting from './modules/setting';
import user from './modules/user';
import dict from './modules/dict';
@ -21,6 +22,7 @@ const store = new Vuex.Store({
modules: {
app,
user,
setting,
dict
}
});

View File

@ -0,0 +1,15 @@
const { setting } = require("@/config");
const localSetting = window.localStorage.getItem('setting')
const settingData = {
state: {
setting:localSetting ? JSON.parse(localSetting) : setting,
},
mutations: {
updateSetting(state, data) {
state.setting = data;
},
},
};
export default settingData;

View File

@ -32,6 +32,21 @@ export function enCode(v1) {
return v1;
}
import {router} from "@/router/index";
/**
* 自定义跳转
*/
export function customRouterPush(push){
const setting = window.localStorage.getItem('setting');
if(setting.isUseTabsRouter){
router.push(push)
}
else{
let url = router.resolve(push);
window.open(url.href, '_blank');
}
}
/**
* 订单来源

View File

@ -186,7 +186,6 @@ export default {
apiLogin.forgetAndModify(params).then(res => {
this.loading1 = false;
console.log(res);
if (res.success) {
this.$Message.success('修改密码成功');
this.$router.push('login');

View File

@ -6,20 +6,20 @@
<div class="main">
<div class="sidebar-menu-con menu-bar">
<div class="logo-con">
<!-- <img src="../assets/logo.png" key="max-logo" /> -->
<img :src="storeSideLogo" key="max-logo" />
</div>
<shrinkable-menu></shrinkable-menu>
</div>
<!-- 顶部标题栏主体 -->
<div class="main-header-con">
<div class="main-header-con" :style="{ height: setting.isUseTabsRouter ? '100px' : '60px' }">
<div class="main-header">
<div
:class="{
'header-avator-con': navType != 4,
'header-avator-con nav4': navType == 4,
}"
class="header-avator-con"
>
<!-- 左侧栏 -->
<div>
</div>
<!-- 用户头像 -->
<div class="user-dropdown-menu-con">
<Row
@ -28,15 +28,22 @@
align="middle"
class="user-dropdown-innercon"
>
<ul class="nav-list">
<li class="nav-item " @click="handleClickSetting">
<Tooltip content="设置">
<Icon size="16" type="md-settings" />
</Tooltip>
</li>
</ul>
<Dropdown
transfer
trigger="hover"
@on-click="handleClickUserDropdown"
>
<div class="dropList">
<span class="main-user-name">{{ userInfo.storeName }}</span>
<Icon type="md-arrow-dropdown" />
<Avatar
icon="ios-person"
:src="userInfo.storeLogo"
style="background: #fff; margin-left: 10px"
></Avatar>
@ -51,11 +58,11 @@
</div>
</div>
<!-- 已打开的页面标签 -->
<div class="tags-con">
<div class="tags-con" v-if="setting.isUseTabsRouter">
<tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
</div>
</div>
<div class="single-page-con">
<div class="single-page-con" :style="{ 'top': setting.isUseTabsRouter ? '100px' : '60px', height: setting.isUseTabsRouter ? 'calc(100% - 110px)' : 'calc(100% - 70px)' }">
<div class="single-page">
<!-- <keep-alive :include="cachePage"> -->
<!-- </keep-alive> -->
@ -67,6 +74,8 @@
</div>
<!-- 全局加载动画 -->
<circleLoading class="loading-position" v-show="loading" />
<!-- 右侧抽屉配置 -->
<configDrawer ref="config"/>
</div>
</template>
@ -74,25 +83,34 @@
import shrinkableMenu from "./main-components/shrinkable-menu/shrinkable-menu.vue";
import tagsPageOpened from "./main-components/tags-page-opened.vue";
import circleLoading from "@/views/my-components/lili/circle-loading.vue";
import configDrawer from "@/views/main-components/config-drawer.vue";
import Cookies from "js-cookie";
import util from "@/libs/util.js";
import { logout } from "@/api/index";
const config = require("@/config/index.js");
export default {
components: {
shrinkableMenu,
tagsPageOpened,
circleLoading
circleLoading,
configDrawer
},
data() {
return {
config,
sliceNum: 5, // nav
userInfo: {}, //
navType: 1, // nav
storeSideLogo: "", //logo
};
},
computed: {
setting(){
let data = this.$store.state.setting
return data.setting
},
loading() {
return this.$store.state.app.loading;
},
@ -110,6 +128,9 @@ export default {
},
},
methods: {
handleClickSetting() {
this.$refs.config.open();
},
//
init() {
//

View File

@ -144,7 +144,6 @@ export default {
endTime / 1000
);
}
console.log(this.searchForm);
//
getDistributionOrder(this.searchForm).then((res) => {
this.loading = false;

View File

@ -563,7 +563,6 @@ export default {
async exportGoods(){
downLoadGoods()
.then((res) => {
console.log(res)
const blob = new Blob([res], {
type: "application/vnd.ms-excel;charset=utf-8",
});

View File

@ -41,7 +41,6 @@ export default {
},
mounted() {
this.$nextTick(() => {
console.log( this.$refs["lili-component"])
this.$refs["lili-component"][0].type = "single"; //
});

View File

@ -144,7 +144,6 @@ export default {
// location.reload();
// this.$router.go(0);
console.log("Huoqu ");
this.setStore("saveLogin", this.saveLogin);
if (this.saveLogin) {
// 7

View File

@ -0,0 +1,78 @@
<template>
<div>
<Drawer width="300px" title="页面配置" v-model="drawer">
<!-- 内容 -->
<h3>
内容设置
</h3>
<div class="config-item flex flex-a-c flex-j-sb">
<div>
<Tooltip theme="light" placement="bottom-end" max-width="100" content="关闭之后部分页面点击'查看''详情'等按钮将跳到新页面展示" >
<div>
多标签Tab页内嵌模式
</div>
</Tooltip>
</div>
<i-switch v-model="setting.isUseTabsRouter"></i-switch>
</div>
</Drawer>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: "configDrawer",
data() {
return {
drawer: false,
};
},
computed: {
...mapState({
setting: state => {
return state.setting.setting
}
})
},
watch: {
setting: {
handler(val) {
this.setStore('setting', val)
this.$store.commit('updateSetting', val);
},
deep: true
}
},
mounted() {
},
methods: {
open() {
this.drawer = true
},
close() {
this.drawer = false
},
toggle() {
this.drawer != this.drawer
},
}
}
</script>
<style lang="scss" scoped>
* {
color: #333 !important;
}
h3 {
margin: 10px 0 20px 0;
}
.config-item {
cursor: pointer;
margin-bottom: 20px;
justify-content: space-between;
}
</style>

View File

@ -145,9 +145,9 @@
.header-avator-con {
display: flex;
align-items: center;
position: absolute;
right: 0;
top: 0;
padding: 0 30px;
justify-content: space-between;
height: 100%;
@ -188,32 +188,6 @@
align-items: center;
}
.user-dropdown {
&-menu-con {
.main-user-name {
font-size: 14px;
display: inline-block;
cursor: pointer;
margin-right: 5px;
width: 200px;
overflow: hidden;
word-wrap: normal;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
overflow: hidden;
text-align: right;
}
}
&-innercon {
height: 100%;
padding-right: 14px;
}
}
.full-screen-btn-con {
display: inline-block;
@ -317,3 +291,23 @@
z-index: 100;
top: 1px;
}
.nav-item {
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #ededed;
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
}
.footer-page-on{
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}

View File

@ -237,10 +237,10 @@
//
detail(v) {
let id = v.id;
this.$router.push({
this.$options.filters.customRouterPush({
name: "order-complaint-detail",
query: { id: id },
});
})
},
},
mounted() {

View File

@ -270,10 +270,10 @@
// 退
detail(v) {
let sn = v.sn;
this.$router.push({
this.$options.filters.customRouterPush({
name: "return-goods-order-detail",
query: { sn: sn },
});
})
},
},

View File

@ -264,10 +264,10 @@
// 退
detail(v) {
let sn = v.sn;
this.$router.push({
this.$options.filters.customRouterPush({
name: "return-goods-order-detail",
query: { sn: sn },
});
})
},
},

View File

@ -81,7 +81,6 @@ export default {
//
handleCheckStep(val) {
if (val.title.search("3") == -1) {
console.warn(val);
this.stepList.map((item) => {
item.checked = false;
});

View File

@ -744,9 +744,9 @@ export default {
}
}
}
console.log(this.typeList)
if (this.typeList.length >= 3) {
console.log(123123)
this.getContentPrice()
}
},
@ -849,7 +849,7 @@ export default {
const blob = new Blob([res], {
type: "application/pdf;charset=utf-8",
});
console.log("出发blob");
//<a> Firefox Chrome download
//IE10blobdownload
if ("download" in document.createElement("a")) {

View File

@ -401,10 +401,11 @@ export default {
//
detail(v) {
let sn = v.sn;
this.$router.push({
this.$options.filters.customRouterPush({
name: "order-detail",
query: { sn: sn },
});
})
},
},
mounted() {

View File

@ -252,10 +252,10 @@ export default {
//
detail(v) {
let sn = v.sn;
this.$router.push({
this.$options.filters.customRouterPush({
name: "order-detail",
query: { sn: sn },
});
})
},
},
mounted() {

View File

@ -266,7 +266,7 @@ export default {
getCouponReceiveList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
console.log(res);
this.data = res.result.records;
this.total = res.result.total;
}

View File

@ -252,7 +252,7 @@ export default {
getDetail () {
//
getFullDiscountById(this.id).then((res) => {
console.log(res);
let data = res.result;
if (data.scopeType === "ALL") {
data.promotionGoodsList = [];

View File

@ -246,7 +246,8 @@ export default {
},
//
manage(v, status) {
this.$router.push({ name: "pintuan-goods", query: { id: v.id, status: status } });
this.$options.filters.customRouterPush({name: "pintuan-goods", query: { id: v.id, status: status }} )
},
//
open(v) {

View File

@ -207,11 +207,10 @@
//
detail(v) {
let id = v.id;
this.$router.push({
this.$options.filters.customRouterPush({
name: "bill-detail",
query: { id: id },
});
})
},
},
mounted () {

View File

@ -221,12 +221,12 @@ export default {
methods: {
//
getfaceSheetFlag(e) {
console.log(e);
if (e === true) {
console.log("打开");
this.onpenText = true;
} else {
console.log("关闭");
this.onpenText = false;
}
},

View File

@ -305,7 +305,6 @@ export default {
* 选择地址回调
*/
handleSelect(v) {
console.log(v);
let area = "";
let areaId = "";
if (v != "") {

View File

@ -451,7 +451,7 @@ export default {
},
checkClerks() {
this.open = this.form.mobile.length;
console.log(this.open)
if(this.open == 11 ){
this.checkClerk();
}
@ -576,7 +576,7 @@ export default {
ids += e.id + ",";
});
ids = ids.substring(0, ids.length - 1);
console.warn(ids)
resetPassword(ids).then(res => {
this.$Modal.remove();
if (res.success) {
@ -590,7 +590,7 @@ export default {
},
updateSubmit(){
this.submitLoading = true;
console.warn(this.editForm)
editOtherUser(this.editForm.id,this.editForm).then(res => {
this.submitLoading = false;
if (res.success) {
@ -606,7 +606,6 @@ export default {
if (valid) {
// id
const params = JSON.parse(JSON.stringify(this.form))
console.warn(params)
delete params.id;
delete params.status;
if (this.newMember) {
@ -655,9 +654,9 @@ export default {
},
//
edit(v) {
console.warn(v)
getClerk(v.id).then(res => {
console.warn(res)
this.mobile = res.result.mobile
this.clerkName = res.result.clerkName
this.editForm.isSuper = 0

View File

@ -201,7 +201,7 @@ export default {
loadDepartment(item.id).then((res) => {
this.loadingEdit = false;
if (res.success) {
console.log(res.result);
callback(res.result);
}
});
@ -303,7 +303,7 @@ export default {
editDepartment(this.form.id, this.form),
updateDepartmentRole(this.form.id, roleWay)
]).then((res) => {
console.warn(res)
this.submitLoading = false;
if (res[0].success) {
this.$Message.success("编辑成功");
@ -359,7 +359,7 @@ export default {
},
//
changeSelect(v) {
console.log(v);
this.selectCount = v.length;
this.selectList = v;
},

View File

@ -586,7 +586,7 @@ export default {
let selectedNodes = this.$refs.tree.getCheckedAndIndeterminateNodes();
let way = [];
selectedNodes.forEach((e) => {
console.log(e)
let perm = {
title: e.title,
isSuper: e.isSuper ? e.isSuper = 1 : e.isSuper = 0 || 0,
@ -597,7 +597,7 @@ export default {
this.$set(this,'saveRoleWay',way)
});
console.log(this.saveRoleWay)
},
/**保存权限 */

View File

@ -136,7 +136,7 @@ export default {
this.$nextTick(() => {
this.decorateData = "";
console.log(this.contentData.list.length);
//
if (this.contentData.list.length > 1) {
//
@ -156,7 +156,7 @@ export default {
//
handleComponent(val, index) {
console.warn(val)
this.selected = index;
this.$set(this, "decorateData", val);
},

View File

@ -145,7 +145,6 @@ export default {
this.saveDialog = false;
this.$Message.error("修改失败,请稍后重试");
}
console.log(res);
})
.catch((error) => {});
},
@ -176,7 +175,6 @@ export default {
this.saveDialog = false;
this.$Message.error("保存失败,请稍后重试");
}
console.log(res);
})
.catch((error) => {});
},

View File

@ -118,7 +118,6 @@ export default {
}
});
this.list = res.result.records;
console.log(this.list);
this.total = res.result.total;
});
},

View File

@ -1,10 +1,10 @@
<template>
<div>
<Affix :offset-top="100">
<Card class="card fixed-bottom">
<affixTime :closeShop="true" @selected="clickBreadcrumb"/>
</Card>
</Affix>
<Card class="card">
<Tabs @on-click="handleClickType">
@ -23,10 +23,12 @@
import affixTime from "@/views/lili-components/affix-time";
import * as API_Goods from "@/api/goods";
import Cookies from "js-cookie";
export default {
components: { affixTime },
data() {
return {
setting:"",
params: { //
searchType: "LAST_SEVEN",
year: "",
@ -53,6 +55,9 @@ export default {
],
data: [], //
};
},
computed:{
},
methods: {
// tab
@ -83,29 +88,11 @@ export default {
};
</script>
<style scoped lang="scss">
.page-col {
text-align: right;
margin: 10px 0;
.fixed-bottom{
position:sticky;
z-index: 999;
top: 0;
}
.order-col {
display: flex;
> div {
margin-right: 8px;
padding: 16px;
font-size: 15px;
}
}
.order-list {
display: flex;
}
.tips {
margin: 0 8px;
}
.card {
margin-bottom: 10px;
}

View File

@ -1,13 +1,9 @@
<template>
<div class="wrapper">
<Affix :offset-top="100">
<Card class="card fixed-bottom">
<affixTime @selected="clickBreadcrumb" />
</Card>
</Affix>
<Card class="card">
<div>
@ -430,7 +426,6 @@ export default {
watch: {
refundParams: {
handler() {
console.log(this.refundIndex);
if (this.refundIndex == 1) {
this.getOrderRefundList();
} else {
@ -570,6 +565,11 @@ export default {
};
</script>
<style scoped lang="scss">
.fixed-bottom{
position:sticky;
z-index: 999;
top: 0;
}
.active {
color: $theme_color;
position: relative;

View File

@ -1,10 +1,8 @@
<template>
<div>
<Affix :offset-top="100">
<Card class="card fixed-bottom">
<affixTime @selected="clickBreadcrumb" />
</Card>
</Affix>
<Card class="card">
<div>
<h4>流量概况</h4>
@ -218,6 +216,11 @@ export default {
};
</script>
<style scoped lang="scss">
.fixed-bottom{
position:sticky;
z-index: 999;
top: 0;
}
.table {
margin-top: 10px;
}