提交 218e6867 authored 作者: lidongxu's avatar lidongxu

refactor(all): 重构所有 .sync 换成 v-model: 写法

同上
上级 2a16818c
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
</template> </template>
</el-tree> </el-tree>
<!-- 分页 --> <!-- 分页 -->
<pagination v-if="isPagination" :total="total" :page.sync="queryParams.pageNum" <pagination v-if="isPagination" :total="total" v-model:page="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getPageList" /> v-model:limit="queryParams.pageSize" @pagination="getPageList" />
<!-- 折叠箭头 --> <!-- 折叠箭头 -->
<div class="arrow" <div class="arrow"
@click="hideSideBar = false"> @click="hideSideBar = false">
......
<template> <template>
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }"> <div :class="classObj"
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> class="app-wrapper"
<sidebar v-if="!sidebar.hide" class="sidebar-container" /> :style="{ '--current-color': theme }">
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"> <div v-if="device === 'mobile' && sidebar.opened"
class="drawer-bg"
@click="handleClickOutside" />
<sidebar v-if="!sidebar.hide"
class="sidebar-container" />
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
class="main-container">
<div :class="{ 'fixed-header': fixedHeader }"> <div :class="{ 'fixed-header': fixedHeader }">
<navbar @setLayout="setLayout" /> <navbar @setLayout="setLayout" />
<tags-view v-if="needTagsView" /> <tags-view v-if="needTagsView" />
...@@ -17,7 +23,6 @@ ...@@ -17,7 +23,6 @@
import { useWindowSize } from '@vueuse/core' import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue' import Sidebar from './components/Sidebar/index.vue'
import { AppMain, Navbar, Settings, TagsView } from './components' import { AppMain, Navbar, Settings, TagsView } from './components'
import defaultSettings from '@/settings'
import useAppStore from '@/store/modules/app' import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings' import useSettingsStore from '@/store/modules/settings'
...@@ -65,11 +70,12 @@ function setLayout() { ...@@ -65,11 +70,12 @@ function setLayout() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss"
scoped>
@import "@/assets/styles/mixin.scss"; @import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss"; @import "@/assets/styles/variables.module.scss";
.app-wrapper { .app-wrapper {
@include clearfix; @include clearfix;
position: relative; position: relative;
height: 100%; height: 100%;
...@@ -79,9 +85,9 @@ function setLayout() { ...@@ -79,9 +85,9 @@ function setLayout() {
position: fixed; position: fixed;
top: 0; top: 0;
} }
} }
.drawer-bg { .drawer-bg {
background: #000; background: #000;
opacity: 0.3; opacity: 0.3;
width: 100%; width: 100%;
...@@ -89,31 +95,31 @@ function setLayout() { ...@@ -89,31 +95,31 @@ function setLayout() {
height: 100%; height: 100%;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
} }
.fixed-header { .fixed-header {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
width: calc(100% - #{$base-sidebar-width}); width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s; transition: width 0.28s;
} }
// 开启头部固定以后,main的高度需要设置为100vh // 开启头部固定以后,main的高度需要设置为100vh
.fixed-header + .app-main{ .fixed-header+.app-main {
min-height: 100vh; min-height: 100vh;
} }
.hideSidebar .fixed-header { .hideSidebar .fixed-header {
width: calc(100% - 54px); width: calc(100% - 54px);
} }
.sidebarHide .fixed-header { .sidebarHide .fixed-header {
width: 100%; width: 100%;
} }
.mobile .fixed-header { .mobile .fixed-header {
width: 100%; width: 100%;
} }
</style> </style>
\ No newline at end of file
...@@ -63,7 +63,6 @@ import LineCharts from './LineAndBar.vue' ...@@ -63,7 +63,6 @@ import LineCharts from './LineAndBar.vue'
import { getCmmListAPI } from '@/api' import { getCmmListAPI } from '@/api'
import { generatorDayList, parseTime, getAdditionalColor, resetObjValue } from '@/utils' import { generatorDayList, parseTime, getAdditionalColor, resetObjValue } from '@/utils'
import { useDatePickerOptions } from '@/hooks' import { useDatePickerOptions } from '@/hooks'
// 静态数据 // 静态数据
const dateList = [new Date().setDate((new Date().getDate() - 30)), new Date().setDate((new Date().getDate() - 1))] // 最近 30 日日期数组 const dateList = [new Date().setDate((new Date().getDate() - 30)), new Date().setDate((new Date().getDate() - 1))] // 最近 30 日日期数组
const dataTypeList = ['销售额', '观看人次'] // 数据类型 const dataTypeList = ['销售额', '观看人次'] // 数据类型
......
...@@ -75,7 +75,6 @@ import TableList from './TableList.vue'; ...@@ -75,7 +75,6 @@ import TableList from './TableList.vue';
import { getComPrdListAPI, getSycmListAPI } from '@/api' import { getComPrdListAPI, getSycmListAPI } from '@/api'
import { generatorDayList, parseTime, getAdditionalColor, resetObjValue } from '@/utils' import { generatorDayList, parseTime, getAdditionalColor, resetObjValue } from '@/utils'
import { useDatePickerOptions } from '@/hooks' import { useDatePickerOptions } from '@/hooks'
// 静态数据 // 静态数据
const dateList = [new Date().setDate((new Date().getDate() - 30)), new Date().setDate((new Date().getDate() - 1))] // 最近 30 日日期数组 const dateList = [new Date().setDate((new Date().getDate() - 30)), new Date().setDate((new Date().getDate() - 1))] // 最近 30 日日期数组
const dataTypeList = ['支付买家数', '交易增速', '独立访客范围', '流量增速'] // 数据类型 const dataTypeList = ['支付买家数', '交易增速', '独立访客范围', '流量增速'] // 数据类型
......
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<el-row :gutter="10" <el-row :gutter="10"
class="mb8"> class="mb8">
<right-toolbar :showSearch.sync="showSearch" <right-toolbar v-model:showSearch="showSearch"
@queryTable="getProductList" @queryTable="getProductList"
:columns="columns"></right-toolbar> :columns="columns"></right-toolbar>
</el-row> </el-row>
...@@ -167,7 +167,6 @@ const getProductList = () => { ...@@ -167,7 +167,6 @@ const getProductList = () => {
} }
/** 搜索表单触发操作 */ /** 搜索表单触发操作 */
const handleQuery = () => { const handleQuery = () => {
console.log('queryParams', queryParams)
queryParams.pageNum = 1; queryParams.pageNum = 1;
getProductList(); getProductList();
} }
......
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
</el-table> </el-table>
<!-- 添加或修改商品-标签详情对话框 --> <!-- 添加或修改商品-标签详情对话框 -->
<el-dialog :title="title" <el-dialog :title="title"
:visible.sync="open" v-model:visible="open"
append-to-body> append-to-body>
<el-form ref="formRef" <el-form ref="formRef"
:model="form" :model="form"
......
...@@ -262,7 +262,7 @@ ...@@ -262,7 +262,7 @@
@click="createTableAndECharts">新增套表</div> @click="createTableAndECharts">新增套表</div>
<!-- 上传货需弹框 --> <!-- 上传货需弹框 -->
<el-dialog title="上传货需" <el-dialog title="上传货需"
:visible.sync="uploadDemandImportVisible"> v-model:visible="uploadDemandImportVisible">
<el-form :model="uploadDemand" <el-form :model="uploadDemand"
label-width="150px"> label-width="150px">
<el-form-item label="年份"> <el-form-item label="年份">
......
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
@click="handleAdd" @click="handleAdd"
v-hasPermi="['gen:store:add']">新增</el-button> v-hasPermi="['gen:store:add']">新增</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" <right-toolbar v-model:showSearch="showSearch"
@queryTable="getList" @queryTable="getList"
:columns="columns"></right-toolbar> :columns="columns"></right-toolbar>
</el-row> </el-row>
...@@ -104,13 +104,13 @@ ...@@ -104,13 +104,13 @@
</el-table> </el-table>
<pagination v-show="total > 0" <pagination v-show="total > 0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" v-model:page="queryParams.pageNum"
:limit.sync="queryParams.pageSize" v-model:limit="queryParams.pageSize"
@pagination="getList" /> @pagination="getList" />
<!-- 添加或修改对话框 --> <!-- 添加或修改对话框 -->
<el-dialog :title="title" <el-dialog :title="title"
:visible.sync="open" v-model:visible="open"
append-to-body> append-to-body>
<el-form ref="form" <el-form ref="form"
:model="form" :model="form"
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论