refactor: use Dialog

yudao-ui-admin-vue3/src/views/system/dict/index.vue

@@ -113,21 +113,19 @@
         </Table>
       </div>
     </el-card>
-    <XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle">
-      <template #default>
-        <Form
-          v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
-          :schema="DictTypeSchemas.allSchemas.formSchema"
-          :rules="DictTypeSchemas.dictTypeRules"
-          ref="typeFormRef"
-        />
-        <Form
-          v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
-          :schema="DictDataSchemas.allSchemas.formSchema"
-          :rules="DictDataSchemas.dictDataRules"
-          ref="dataFormRef"
-        />
-      </template>
+    <Dialog id="dictModel" v-model="dialogVisible" :title="dialogTitle">
+      <Form
+        v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
+        :schema="DictTypeSchemas.allSchemas.formSchema"
+        :rules="DictTypeSchemas.dictTypeRules"
+        ref="typeFormRef"
+      />
+      <Form
+        v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
+        :schema="DictDataSchemas.allSchemas.formSchema"
+        :rules="DictDataSchemas.dictDataRules"
+        ref="dataFormRef"
+      />
       <!-- 操作按钮 -->
       <template #footer>
         <XButton
@@ -146,7 +144,7 @@
         />
         <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
       </template>
-    </XModal>
+    </Dialog>
   </div>
 </template>
 <script setup lang="ts">

yudao-ui-admin-vue3/src/views/system/errorCode/index.vue

@@ -38,22 +38,20 @@
     </vxe-grid>
   </ContentWrap>
   <!-- 弹窗 -->
-  <XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle">
-    <template #default>
-      <!-- 对话框(添加 / 修改) -->
-      <Form
-        v-if="['create', 'update'].includes(actionType)"
-        :schema="allSchemas.formSchema"
-        :rules="rules"
-        ref="formRef"
-      />
-      <!-- 对话框(详情) -->
-      <Descriptions
-        v-if="actionType === 'detail'"
-        :schema="allSchemas.detailSchema"
-        :data="detailRef"
-      />
-    </template>
+  <Dialog id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle">
+    <!-- 对话框(添加 / 修改) -->
+    <Form
+      v-if="['create', 'update'].includes(actionType)"
+      :schema="allSchemas.formSchema"
+      :rules="rules"
+      ref="formRef"
+    />
+    <!-- 对话框(详情) -->
+    <Descriptions
+      v-if="actionType === 'detail'"
+      :schema="allSchemas.detailSchema"
+      :data="detailRef"
+    />
     <template #footer>
       <!-- 按钮：保存 -->
       <XButton
@@ -66,7 +64,7 @@
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
-  </XModal>
+  </Dialog>
 </template>
 
 <script setup lang="ts">

yudao-ui-admin-vue3/src/views/system/loginlog/index.vue

@@ -17,21 +17,20 @@
     </vxe-grid>
   </ContentWrap>
   <!-- 弹窗 -->
-  <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
-    <template #default>
-      <!-- 表单：详情 -->
-      <Descriptions :schema="allSchemas.detailSchema" :data="detailRef" />
-    </template>
+  <Dialog id="postModel" v-model="dialogVisible" :title="dialogTitle">
+    <!-- 表单：详情 -->
+    <Descriptions :schema="allSchemas.detailSchema" :data="detailRef" />
     <template #footer>
       <!-- 按钮：关闭 -->
       <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts">
 // 全局相关的 import
 import { ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
 import { useVxeGrid } from '@/hooks/web/useVxeGrid'
 import { VxeGridInstance } from 'vxe-table'
 // 业务相关的 import
@@ -40,6 +39,7 @@ import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from '@/api/system/
 import download from '@/utils/download'
 
 const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
 const { gridOptions } = useVxeGrid<LoginLogVO>({
@@ -59,13 +59,14 @@ const handleDetail = async (row: LoginLogVO) => {
 }
 
 // 导出操作
-// TODO @星语：导出需要有二次确认哈
 const handleExport = async () => {
-  const queryParams = Object.assign(
-    {},
-    JSON.parse(JSON.stringify(xGrid.value?.getRefMaps().refForm.value.data)) // TODO @星语：这个有没办法，封装个 util 获取哈？
-  )
-  const res = await exportLoginLogApi(queryParams)
-  download.excel(res, '登录列表.xls')
+  message.exportConfirm().then(async () => {
+    const queryParams = Object.assign(
+      {},
+      JSON.parse(JSON.stringify(xGrid.value?.getRefMaps().refForm.value.data)) // TODO @星语：这个有没办法，封装个 util 获取哈？
+    )
+    const res = await exportLoginLogApi(queryParams)
+    download.excel(res, '登录列表.xls')
+  })
 }
 </script>

yudao-ui-admin-vue3/src/views/system/menu/index.vue

@@ -97,144 +97,137 @@
     </vxe-table>
   </ContentWrap>
   <!-- 添加或修改菜单对话框 -->
-  <XModal v-model="dialogVisible" id="menuModel" :title="dialogTitle">
-    <template #default>
-      <!-- 对话框(添加 / 修改) -->
-      <el-form
-        ref="formRef"
-        :model="menuForm"
-        :rules="rules"
-        :inline="true"
-        label-width="120px"
-        label-position="right"
-      >
-        <el-row :gutter="24">
-          <el-col :span="24">
-            <el-form-item label="上级菜单">
-              <el-tree-select
-                node-key="id"
-                v-model="menuForm.parentId"
-                :props="menuProps"
-                :data="menuOptions"
-                :default-expanded-keys="[0]"
-                check-strictly
-              />
+  <Dialog v-model="dialogVisible" id="menuModel" :title="dialogTitle">
+    <!-- 对话框(添加 / 修改) -->
+    <el-form
+      ref="formRef"
+      :model="menuForm"
+      :rules="rules"
+      :inline="true"
+      label-width="120px"
+      label-position="right"
+    >
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="上级菜单">
+            <el-tree-select
+              node-key="id"
+              v-model="menuForm.parentId"
+              :props="menuProps"
+              :data="menuOptions"
+              :default-expanded-keys="[0]"
+              check-strictly
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="菜单类型" prop="type">
+            <el-radio-group v-model="menuForm.type">
+              <el-radio-button
+                v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="菜单名称" prop="name">
+            <el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
+          </el-form-item>
+        </el-col>
+        <template v-if="menuForm.type !== 3">
+          <el-col :span="12">
+            <el-form-item label="菜单图标">
+              <IconSelect v-model="menuForm.icon" clearable />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="菜单类型" prop="type">
-              <el-radio-group v-model="menuForm.type">
-                <el-radio-button
-                  v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
-                  :key="dict.value"
-                  :label="dict.value"
-                >
-                  {{ dict.label }}
-                </el-radio-button>
-              </el-radio-group>
+            <el-form-item label="路由地址" prop="path">
+              <template #label>
+                <Tooltip
+                  titel="路由地址"
+                  message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
+                />
+              </template>
+              <el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
             </el-form-item>
           </el-col>
+        </template>
+        <template v-if="menuForm.type === 2">
           <el-col :span="12">
-            <el-form-item label="菜单名称" prop="name">
-              <el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
+            <el-form-item label="路由地址" prop="component">
+              <el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
             </el-form-item>
           </el-col>
-          <template v-if="menuForm.type !== 3">
-            <el-col :span="12">
-              <el-form-item label="菜单图标">
-                <IconSelect v-model="menuForm.icon" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="路由地址" prop="path">
-                <template #label>
-                  <Tooltip
-                    titel="路由地址"
-                    message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
-                  />
-                </template>
-                <el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
-              </el-form-item>
-            </el-col>
-          </template>
-          <template v-if="menuForm.type === 2">
-            <el-col :span="12">
-              <el-form-item label="路由地址" prop="component">
-                <el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
-              </el-form-item>
-            </el-col>
-          </template>
-          <template v-if="menuForm.type !== 1">
-            <el-col :span="12">
-              <el-form-item label="权限标识" prop="permission">
-                <template #label>
-                  <Tooltip
-                    titel="权限标识"
-                    message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
-                  />
-                </template>
-                <el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
-              </el-form-item>
-            </el-col>
-          </template>
+        </template>
+        <template v-if="menuForm.type !== 1">
           <el-col :span="12">
-            <el-form-item label="显示排序" prop="sort">
-              <el-input-number
-                v-model="menuForm.sort"
-                controls-position="right"
-                :min="0"
-                clearable
-              />
+            <el-form-item label="权限标识" prop="permission">
+              <template #label>
+                <Tooltip
+                  titel="权限标识"
+                  message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
+                />
+              </template>
+              <el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
             </el-form-item>
           </el-col>
+        </template>
+        <el-col :span="12">
+          <el-form-item label="显示排序" prop="sort">
+            <el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="菜单状态" prop="status">
+            <el-radio-group v-model="menuForm.status">
+              <el-radio-button
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <template v-if="menuForm.type !== 3">
           <el-col :span="12">
-            <el-form-item label="菜单状态" prop="status">
-              <el-radio-group v-model="menuForm.status">
-                <el-radio-button
-                  v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
-                  :key="dict.value"
-                  :label="dict.value"
-                >
-                  {{ dict.label }}
-                </el-radio-button>
+            <el-form-item label="显示状态" prop="status">
+              <template #label>
+                <Tooltip
+                  titel="显示状态"
+                  message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
+                />
+              </template>
+              <el-radio-group v-model="menuForm.visible">
+                <el-radio-button key="true" :label="true">显示</el-radio-button>
+                <el-radio-button key="false" :label="false">隐藏</el-radio-button>
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <template v-if="menuForm.type !== 3">
-            <el-col :span="12">
-              <el-form-item label="显示状态" prop="status">
-                <template #label>
-                  <Tooltip
-                    titel="显示状态"
-                    message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
-                  />
-                </template>
-                <el-radio-group v-model="menuForm.visible">
-                  <el-radio-button key="true" :label="true">显示</el-radio-button>
-                  <el-radio-button key="false" :label="false">隐藏</el-radio-button>
-                </el-radio-group>
-              </el-form-item>
-            </el-col>
-          </template>
-          <template v-if="menuForm.type === 2">
-            <el-col :span="12">
-              <el-form-item label="缓存状态" prop="keepAlive">
-                <template #label>
-                  <Tooltip
-                    titel="缓存状态"
-                    message="选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致"
-                  />
-                </template>
-                <el-radio-group v-model="menuForm.keepAlive">
-                  <el-radio-button key="true" :label="true">缓存</el-radio-button>
-                  <el-radio-button key="false" :label="false">不缓存</el-radio-button>
-                </el-radio-group>
-              </el-form-item>
-            </el-col>
-          </template>
-        </el-row>
-      </el-form>
-    </template>
+        </template>
+        <template v-if="menuForm.type === 2">
+          <el-col :span="12">
+            <el-form-item label="缓存状态" prop="keepAlive">
+              <template #label>
+                <Tooltip
+                  titel="缓存状态"
+                  message="选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致"
+                />
+              </template>
+              <el-radio-group v-model="menuForm.keepAlive">
+                <el-radio-button key="true" :label="true">缓存</el-radio-button>
+                <el-radio-button key="false" :label="false">不缓存</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </template>
+      </el-row>
+    </el-form>
     <template #footer>
       <!-- 按钮：保存 -->
       <XButton
@@ -247,7 +240,7 @@
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" @click="dialogVisible = false" :title="t('dialog.close')" />
     </template>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts">
 // 全局相关的 import

yudao-ui-admin-vue3/src/views/system/notice/index.vue

@@ -38,22 +38,20 @@
     </vxe-grid>
   </ContentWrap>
   <!-- 弹窗 -->
-  <XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
-    <template #default>
-      <!-- 对话框(添加 / 修改) -->
-      <Form
-        ref="formRef"
-        v-if="['create', 'update'].includes(actionType)"
-        :schema="allSchemas.formSchema"
-        :rules="rules"
-      />
-      <!-- 对话框(详情) -->
-      <Descriptions
-        v-if="actionType === 'detail'"
-        :schema="allSchemas.detailSchema"
-        :data="detailRef"
-      />
-    </template>
+  <Dialog id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
+    <!-- 对话框(添加 / 修改) -->
+    <Form
+      ref="formRef"
+      v-if="['create', 'update'].includes(actionType)"
+      :schema="allSchemas.formSchema"
+      :rules="rules"
+    />
+    <!-- 对话框(详情) -->
+    <Descriptions
+      v-if="actionType === 'detail'"
+      :schema="allSchemas.detailSchema"
+      :data="detailRef"
+    />
     <template #footer>
       <!-- 按钮：保存 -->
       <XButton
@@ -66,7 +64,7 @@
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts">
 // 全局相关的 import

yudao-ui-admin-vue3/src/views/system/oauth2/client/index.vue

@@ -48,23 +48,21 @@
     </vxe-grid>
   </ContentWrap>
   <!-- 弹窗 -->
-  <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
-    <template #default>
-      <!-- 表单：添加/修改 -->
-      <Form
-        ref="formRef"
-        v-if="['create', 'update'].includes(actionType)"
-        :schema="allSchemas.formSchema"
-        :rules="rules"
-      />
-      <!-- 表单：详情 -->
-      <!-- TODO @星语：展示详情时，有点小丑，可额能得看看 -->
-      <Descriptions
-        v-if="actionType === 'detail'"
-        :schema="allSchemas.detailSchema"
-        :data="detailRef"
-      />
-    </template>
+  <Dialog id="postModel" v-model="dialogVisible" :title="dialogTitle">
+    <!-- 表单：添加/修改 -->
+    <Form
+      ref="formRef"
+      v-if="['create', 'update'].includes(actionType)"
+      :schema="allSchemas.formSchema"
+      :rules="rules"
+    />
+    <!-- 表单：详情 -->
+    <!-- TODO @星语：展示详情时，有点小丑，可额能得看看 -->
+    <Descriptions
+      v-if="actionType === 'detail'"
+      :schema="allSchemas.detailSchema"
+      :data="detailRef"
+    />
     <template #footer>
       <!-- 按钮：保存 -->
       <XButton
@@ -77,7 +75,7 @@
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts">
 // 全局相关的 import

yudao-ui-admin-vue3/src/views/system/operatelog/index.vue

@@ -25,23 +25,21 @@
     </vxe-grid>
   </ContentWrap>
   <!-- 弹窗 -->
-  <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
-    <template #default>
-      <!-- 对话框(详情) -->
-      <Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
-        <template #resultCode="{ row }">
-          <span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
-        </template>
-        <template #duration="{ row }">
-          <span>{{ row.duration + 'ms' }}</span>
-        </template>
-      </Descriptions>
-    </template>
+  <Dialog id="postModel" v-model="dialogVisible" :title="dialogTitle">
+    <!-- 对话框(详情) -->
+    <Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
+      <template #resultCode="{ row }">
+        <span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
+      </template>
+      <template #duration="{ row }">
+        <span>{{ row.duration + 'ms' }}</span>
+      </template>
+    </Descriptions>
     <template #footer>
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts">
 // 全局相关的 import

yudao-ui-admin-vue3/src/views/system/post/index.vue

@@ -45,22 +45,20 @@
     </vxe-grid>
   </ContentWrap>
   <!-- 弹窗 -->
-  <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
-    <template #default>
-      <!-- 表单：添加/修改 -->
-      <Form
-        ref="formRef"
-        v-if="['create', 'update'].includes(actionType)"
-        :schema="allSchemas.formSchema"
-        :rules="rules"
-      />
-      <!-- 表单：详情 -->
-      <Descriptions
-        v-if="actionType === 'detail'"
-        :schema="allSchemas.detailSchema"
-        :data="detailRef"
-      />
-    </template>
+  <Dialog id="postModel" v-model="dialogVisible" :title="dialogTitle">
+    <!-- 表单：添加/修改 -->
+    <Form
+      ref="formRef"
+      v-if="['create', 'update'].includes(actionType)"
+      :schema="allSchemas.formSchema"
+      :rules="rules"
+    />
+    <!-- 表单：详情 -->
+    <Descriptions
+      v-if="actionType === 'detail'"
+      :schema="allSchemas.detailSchema"
+      :data="detailRef"
+    />
     <template #footer>
       <!-- 按钮：保存 -->
       <XButton
@@ -73,7 +71,7 @@
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts">
 // 全局相关的 import