优化弹窗手机端显示

Author: zayn-code

server/resource/package/web/view/table.vue.tpl

@@ -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>
@@ -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>
@@ -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 }}
@@ -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)

web/src/components/selectImage/selectImage.vue

@@ -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" />
@@ -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('')

web/src/pinia/modules/app.js

@@ -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,
@@ -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
   }
 
@@ -125,6 +134,8 @@ export const useAppStore = defineStore('app', () => {
   return {
     theme,
     device,
+    drawerSize,
+    operateMinWith,
     config,
     toggleTheme,
     toggleDevice,

web/src/view/layout/header/index.vue

@@ -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

web/src/view/superAdmin/api/api.vue

@@ -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"
@@ -138,7 +138,7 @@
 
     <el-drawer
       v-model="syncApiFlag"
-      size="80%"
+      :size="appStore.drawerSize"
       :before-close="closeSyncDialog"
       :show-close="false"
     >
@@ -341,7 +341,7 @@
 
     <el-drawer
       v-model="dialogFormVisible"
-      size="60%"
+      :size="appStore.drawerSize"
       :before-close="closeDialog"
       :show-close="false"
     >
@@ -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}`

web/src/view/superAdmin/authority/authority.vue

@@ -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>
@@ -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">
@@ -154,6 +153,7 @@
 
   import { ref } from 'vue'
   import { ElMessage, ElMessageBox } from 'element-plus'
+  import { useAppStore } from "@/pinia"
 
   defineOptions({
     name: 'Authority'
@@ -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)

web/src/view/superAdmin/dictionary/sysDictionary.vue

@@ -49,7 +49,7 @@
     </div>
     <el-drawer
       v-model="drawerFormVisible"
-      size="30%"
+      :size="appStore.drawerSize"
       :show-close="false"
       :before-close="closeDrawer"
     >
@@ -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({

web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue

@@ -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"
@@ -82,7 +82,7 @@
 
     <el-drawer
       v-model="drawerFormVisible"
-      size="30%"
+      :size="appStore.drawerSize"
       :show-close="false"
       :before-close="closeDrawer"
     >
@@ -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,

web/src/view/superAdmin/menu/menu.vue

@@ -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"
@@ -104,7 +104,7 @@
     </div>
     <el-drawer
       v-model="dialogFormVisible"
-      size="60%"
+      :size="appStore.drawerSize"
       :before-close="handleClose"
       :show-close="false"
     >
@@ -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' }],

web/src/view/superAdmin/user/user.vue

@@ -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"
@@ -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"
@@ -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: '',