Skip to content

Commit

Permalink
优化弹窗手机端显示
Browse files Browse the repository at this point in the history
  • Loading branch information
zayn-code committed Dec 4, 2024
1 parent 72ba2f3 commit 65298ca
Show file tree
Hide file tree
Showing 10 changed files with 49 additions and 21 deletions.
9 changes: 3 additions & 6 deletions server/resource/package/web/view/table.vue.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -627,7 +627,7 @@ getDataSourceFunc()
{{- end }}
{{- end }}
{{- end }}
<el-table-column align="left" label="操作" fixed="right" min-width="240">
<el-table-column align="left" label="操作" fixed="right" :min-width="appStore.operateMinWith">
<template #default="scope">
<el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.info"{{ end }} type="primary" link class="table-button" @click="getDetails(scope.row)"><el-icon style="margin-right: 5px"><InfoFilled /></el-icon>查看</el-button>
<el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.edit"{{ end }} type="primary" link icon="edit" class="table-button" @click="update{{.StructName}}Func(scope.row)">编辑</el-button>
Expand All @@ -647,7 +647,7 @@ getDataSourceFunc()
/>
</div>
</div>
<el-drawer destroy-on-close :size="drawerWith" v-model="dialogFormVisible" :show-close="false" :before-close="closeDialog">
<el-drawer destroy-on-close :size="appStore.drawerSize" v-model="dialogFormVisible" :show-close="false" :before-close="closeDialog">
<template #header>
<div class="flex justify-between items-center">
<span class="text-lg">{{"{{"}}type==='create'?'新增':'编辑'{{"}}"}}</span>
Expand Down Expand Up @@ -732,7 +732,7 @@ getDataSourceFunc()
</el-form>
</el-drawer>

<el-drawer destroy-on-close :size="drawerWith" v-model="detailShow" :show-close="true" :before-close="closeDetailShow" title="查看">
<el-drawer destroy-on-close :size="appStore.drawerSize" v-model="detailShow" :show-close="true" :before-close="closeDetailShow" title="查看">
<el-descriptions :column="1" border>
{{- range .Fields}}
{{- if .Desc }}
Expand Down Expand Up @@ -845,9 +845,6 @@ defineOptions({
// 提交按钮loading
const btnLoading = ref(false)
const appStore = useAppStore()
const drawerWith = computed(() => {
return appStore.device === 'mobile' ? '100%' : '800px'
})
// 控制更多查询条件显示/隐藏状态
const showAllQuery = ref(false)
Expand Down
5 changes: 4 additions & 1 deletion web/src/components/selectImage/selectImage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
/>
</div>

<el-drawer v-model="drawer" title="媒体库" size="650px">
<el-drawer v-model="drawer" title="媒体库" :size="appStore.drawerSize">
<warning-bar title="点击“文件名/备注”可以编辑文件名或者备注内容。" />
<div class="gva-btn-list gap-2">
<upload-common :image-common="imageCommon" @on-success="getImageList" />
Expand Down Expand Up @@ -124,6 +124,9 @@
import { ElMessage, ElMessageBox } from 'element-plus'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import selectComponent from '@/components/selectImage/selectComponent.vue'
import { useAppStore } from "@/pinia";
const appStore = useAppStore()
const imageUrl = ref('')
const imageCommon = ref('')
Expand Down
11 changes: 11 additions & 0 deletions web/src/pinia/modules/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { ref, watchEffect, reactive } from 'vue'
import { setBodyPrimaryColor } from '@/utils/format'
export const useAppStore = defineStore('app', () => {
const device = ref('')
const drawerSize = ref('')
const operateMinWith = ref('240')
const config = reactive({
weakness: false,
grey: false,
Expand Down Expand Up @@ -43,6 +45,13 @@ export const useAppStore = defineStore('app', () => {
}

const toggleDevice = (e) => {
if(e === 'mobile'){
drawerSize.value = '100%'
operateMinWith.value = '80'
}else {
drawerSize.value = '800'
operateMinWith.value = '240'
}
device.value = e
}

Expand Down Expand Up @@ -125,6 +134,8 @@ export const useAppStore = defineStore('app', () => {
return {
theme,
device,
drawerSize,
operateMinWith,
config,
toggleTheme,
toggleDevice,
Expand Down
3 changes: 2 additions & 1 deletion web/src/view/layout/header/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
>
<div class="flex items-center cursor-pointer flex-1">
<div
class="flex items-center cursor-pointer min-w-48"
class="flex items-center cursor-pointer"
:class="isMobile ? '' : 'min-w-48'"
@click="router.push({ path: '/' })"
>
<img
Expand Down
9 changes: 6 additions & 3 deletions web/src/view/superAdmin/api/api.vue
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
</template>
</el-table-column>

<el-table-column align="left" fixed="right" label="操作" width="200">
<el-table-column align="left" fixed="right" label="操作" :min-width="appStore.operateMinWith">
<template #default="scope">
<el-button
icon="edit"
Expand Down Expand Up @@ -138,7 +138,7 @@

<el-drawer
v-model="syncApiFlag"
size="80%"
:size="appStore.drawerSize"
:before-close="closeSyncDialog"
:show-close="false"
>
Expand Down Expand Up @@ -341,7 +341,7 @@

<el-drawer
v-model="dialogFormVisible"
size="60%"
:size="appStore.drawerSize"
:before-close="closeDialog"
:show-close="false"
>
Expand Down Expand Up @@ -420,11 +420,14 @@
import ExportTemplate from '@/components/exportExcel/exportTemplate.vue'
import ImportExcel from '@/components/exportExcel/importExcel.vue'
import { butler } from '@/api/autoCode'
import { useAppStore } from "@/pinia";
defineOptions({
name: 'Api'
})
const appStore = useAppStore()
const methodFilter = (value) => {
const target = methodOptions.value.filter((item) => item.value === value)[0]
return target && `${target.label}`
Expand Down
7 changes: 4 additions & 3 deletions web/src/view/superAdmin/authority/authority.vue
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
</el-table>
</div>
<!-- 新增角色弹窗 -->
<el-drawer v-model="authorityFormVisible" :show-close="false">
<el-drawer v-model="authorityFormVisible" :size="appStore.drawerSize" :show-close="false">
<template #header>
<div class="flex justify-between items-center">
<span class="text-lg">{{ authorityTitleForm }}</span>
Expand Down Expand Up @@ -114,8 +114,7 @@
<el-drawer
v-if="drawer"
v-model="drawer"
:with-header="false"
size="40%"
:size="appStore.drawerSize"
title="角色配置"
>
<el-tabs :before-leave="autoEnter" type="border-card">
Expand Down Expand Up @@ -154,6 +153,7 @@
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAppStore } from "@/pinia"
defineOptions({
name: 'Authority'
Expand All @@ -175,6 +175,7 @@
const drawer = ref(false)
const dialogType = ref('add')
const activeRow = ref({})
const appStore = useAppStore()
const authorityTitleForm = ref('新增角色')
const authorityFormVisible = ref(false)
Expand Down
5 changes: 4 additions & 1 deletion web/src/view/superAdmin/dictionary/sysDictionary.vue
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
</div>
<el-drawer
v-model="drawerFormVisible"
size="30%"
:size="appStore.drawerSize"
:show-close="false"
:before-close="closeDrawer"
>
Expand Down Expand Up @@ -120,11 +120,14 @@
import sysDictionaryDetail from './sysDictionaryDetail.vue'
import { Edit } from '@element-plus/icons-vue'
import { useAppStore } from "@/pinia";
defineOptions({
name: 'SysDictionary'
})
const appStore = useAppStore()
const selectID = ref(0)
const formData = ref({
Expand Down
7 changes: 5 additions & 2 deletions web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
width="120"
/>

<el-table-column align="left" label="操作" width="180">
<el-table-column align="left" label="操作" :min-width="appStore.operateMinWith">
<template #default="scope">
<el-button
type="primary"
Expand Down Expand Up @@ -82,7 +82,7 @@

<el-drawer
v-model="drawerFormVisible"
size="30%"
:size="appStore.drawerSize"
:show-close="false"
:before-close="closeDrawer"
>
Expand Down Expand Up @@ -156,11 +156,14 @@
import { ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatBoolean, formatDate } from '@/utils/format'
import { useAppStore } from "@/pinia";
defineOptions({
name: 'SysDictionaryDetail'
})
const appStore = useAppStore()
const props = defineProps({
sysDictionaryID: {
type: Number,
Expand Down
7 changes: 5 additions & 2 deletions web/src/view/superAdmin/menu/menu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
min-width="360"
prop="component"
/>
<el-table-column align="left" fixed="right" label="操作" width="300">
<el-table-column align="left" fixed="right" label="操作" :min-width="appStore.operateMinWith">
<template #default="scope">
<el-button
type="primary"
Expand Down Expand Up @@ -104,7 +104,7 @@
</div>
<el-drawer
v-model="dialogFormVisible"
size="60%"
:size="appStore.drawerSize"
:before-close="handleClose"
:show-close="false"
>
Expand Down Expand Up @@ -423,11 +423,14 @@
import ComponentsCascader from '@/view/superAdmin/menu/components/components-cascader.vue'
import pathInfo from '@/pathInfo.json'
import { useAppStore } from "@/pinia";
defineOptions({
name: 'Menus'
})
const appStore = useAppStore()
const rules = reactive({
path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
component: [{ required: true, message: '请输入文件路径', trigger: 'blur' }],
Expand Down
7 changes: 5 additions & 2 deletions web/src/view/superAdmin/user/user.vue
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
</template>
</el-table-column>

<el-table-column label="操作" min-width="250" fixed="right">
<el-table-column label="操作" :min-width="appStore.operateMinWith" fixed="right">
<template #default="scope">
<el-button
type="primary"
Expand Down Expand Up @@ -145,7 +145,7 @@
</div>
<el-drawer
v-model="addUserDialog"
size="60%"
:size="appStore.drawerSize"
:show-close="false"
:close-on-press-escape="false"
:close-on-click-modal="false"
Expand Down Expand Up @@ -236,11 +236,14 @@
import { nextTick, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import SelectImage from '@/components/selectImage/selectImage.vue'
import { useAppStore } from "@/pinia";
defineOptions({
name: 'User'
})
const appStore = useAppStore()
const searchInfo = ref({
username: '',
nickname: '',
Expand Down

0 comments on commit 65298ca

Please sign in to comment.