Commit 6171dead1448bee6e02dc33d2bf21909b8229196

Authored by xingyu4j
1 parent e2dba57d

refactor: use Dialog

yudao-ui-admin-vue3/src/views/system/dict/index.vue
... ... @@ -113,21 +113,19 @@
113 113 </Table>
114 114 </div>
115 115 </el-card>
116   - <XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle">
117   - <template #default>
118   - <Form
119   - v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
120   - :schema="DictTypeSchemas.allSchemas.formSchema"
121   - :rules="DictTypeSchemas.dictTypeRules"
122   - ref="typeFormRef"
123   - />
124   - <Form
125   - v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
126   - :schema="DictDataSchemas.allSchemas.formSchema"
127   - :rules="DictDataSchemas.dictDataRules"
128   - ref="dataFormRef"
129   - />
130   - </template>
  116 + <Dialog id="dictModel" v-model="dialogVisible" :title="dialogTitle">
  117 + <Form
  118 + v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
  119 + :schema="DictTypeSchemas.allSchemas.formSchema"
  120 + :rules="DictTypeSchemas.dictTypeRules"
  121 + ref="typeFormRef"
  122 + />
  123 + <Form
  124 + v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
  125 + :schema="DictDataSchemas.allSchemas.formSchema"
  126 + :rules="DictDataSchemas.dictDataRules"
  127 + ref="dataFormRef"
  128 + />
131 129 <!-- 操作按钮 -->
132 130 <template #footer>
133 131 <XButton
... ... @@ -146,7 +144,7 @@
146 144 />
147 145 <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
148 146 </template>
149   - </XModal>
  147 + </Dialog>
150 148 </div>
151 149 </template>
152 150 <script setup lang="ts">
... ...
yudao-ui-admin-vue3/src/views/system/errorCode/index.vue
... ... @@ -38,22 +38,20 @@
38 38 </vxe-grid>
39 39 </ContentWrap>
40 40 <!-- 弹窗 -->
41   - <XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle">
42   - <template #default>
43   - <!-- 对话框(添加 / 修改) -->
44   - <Form
45   - v-if="['create', 'update'].includes(actionType)"
46   - :schema="allSchemas.formSchema"
47   - :rules="rules"
48   - ref="formRef"
49   - />
50   - <!-- 对话框(详情) -->
51   - <Descriptions
52   - v-if="actionType === 'detail'"
53   - :schema="allSchemas.detailSchema"
54   - :data="detailRef"
55   - />
56   - </template>
  41 + <Dialog id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle">
  42 + <!-- 对话框(添加 / 修改) -->
  43 + <Form
  44 + v-if="['create', 'update'].includes(actionType)"
  45 + :schema="allSchemas.formSchema"
  46 + :rules="rules"
  47 + ref="formRef"
  48 + />
  49 + <!-- 对话框(详情) -->
  50 + <Descriptions
  51 + v-if="actionType === 'detail'"
  52 + :schema="allSchemas.detailSchema"
  53 + :data="detailRef"
  54 + />
57 55 <template #footer>
58 56 <!-- 按钮:保存 -->
59 57 <XButton
... ... @@ -66,7 +64,7 @@
66 64 <!-- 按钮:关闭 -->
67 65 <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
68 66 </template>
69   - </XModal>
  67 + </Dialog>
70 68 </template>
71 69  
72 70 <script setup lang="ts">
... ...
yudao-ui-admin-vue3/src/views/system/loginlog/index.vue
... ... @@ -17,21 +17,20 @@
17 17 </vxe-grid>
18 18 </ContentWrap>
19 19 <!-- 弹窗 -->
20   - <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
21   - <template #default>
22   - <!-- 表单:详情 -->
23   - <Descriptions :schema="allSchemas.detailSchema" :data="detailRef" />
24   - </template>
  20 + <Dialog id="postModel" v-model="dialogVisible" :title="dialogTitle">
  21 + <!-- 表单:详情 -->
  22 + <Descriptions :schema="allSchemas.detailSchema" :data="detailRef" />
25 23 <template #footer>
26 24 <!-- 按钮:关闭 -->
27 25 <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
28 26 </template>
29   - </XModal>
  27 + </Dialog>
30 28 </template>
31 29 <script setup lang="ts">
32 30 // 全局相关的 import
33 31 import { ref } from 'vue'
34 32 import { useI18n } from '@/hooks/web/useI18n'
  33 +import { useMessage } from '@/hooks/web/useMessage'
35 34 import { useVxeGrid } from '@/hooks/web/useVxeGrid'
36 35 import { VxeGridInstance } from 'vxe-table'
37 36 // 业务相关的 import
... ... @@ -40,6 +39,7 @@ import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from &#39;@/api/system/
40 39 import download from '@/utils/download'
41 40  
42 41 const { t } = useI18n() // 国际化
  42 +const message = useMessage() // 消息弹窗
43 43 // 列表相关的变量
44 44 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
45 45 const { gridOptions } = useVxeGrid<LoginLogVO>({
... ... @@ -59,13 +59,14 @@ const handleDetail = async (row: LoginLogVO) =&gt; {
59 59 }
60 60  
61 61 // 导出操作
62   -// TODO @星语:导出需要有二次确认哈
63 62 const handleExport = async () => {
64   - const queryParams = Object.assign(
65   - {},
66   - JSON.parse(JSON.stringify(xGrid.value?.getRefMaps().refForm.value.data)) // TODO @星语:这个有没办法,封装个 util 获取哈?
67   - )
68   - const res = await exportLoginLogApi(queryParams)
69   - download.excel(res, '登录列表.xls')
  63 + message.exportConfirm().then(async () => {
  64 + const queryParams = Object.assign(
  65 + {},
  66 + JSON.parse(JSON.stringify(xGrid.value?.getRefMaps().refForm.value.data)) // TODO @星语:这个有没办法,封装个 util 获取哈?
  67 + )
  68 + const res = await exportLoginLogApi(queryParams)
  69 + download.excel(res, '登录列表.xls')
  70 + })
70 71 }
71 72 </script>
... ...
yudao-ui-admin-vue3/src/views/system/menu/index.vue
... ... @@ -97,144 +97,137 @@
97 97 </vxe-table>
98 98 </ContentWrap>
99 99 <!-- 添加或修改菜单对话框 -->
100   - <XModal v-model="dialogVisible" id="menuModel" :title="dialogTitle">
101   - <template #default>
102   - <!-- 对话框(添加 / 修改) -->
103   - <el-form
104   - ref="formRef"
105   - :model="menuForm"
106   - :rules="rules"
107   - :inline="true"
108   - label-width="120px"
109   - label-position="right"
110   - >
111   - <el-row :gutter="24">
112   - <el-col :span="24">
113   - <el-form-item label="上级菜单">
114   - <el-tree-select
115   - node-key="id"
116   - v-model="menuForm.parentId"
117   - :props="menuProps"
118   - :data="menuOptions"
119   - :default-expanded-keys="[0]"
120   - check-strictly
121   - />
  100 + <Dialog v-model="dialogVisible" id="menuModel" :title="dialogTitle">
  101 + <!-- 对话框(添加 / 修改) -->
  102 + <el-form
  103 + ref="formRef"
  104 + :model="menuForm"
  105 + :rules="rules"
  106 + :inline="true"
  107 + label-width="120px"
  108 + label-position="right"
  109 + >
  110 + <el-row :gutter="24">
  111 + <el-col :span="24">
  112 + <el-form-item label="上级菜单">
  113 + <el-tree-select
  114 + node-key="id"
  115 + v-model="menuForm.parentId"
  116 + :props="menuProps"
  117 + :data="menuOptions"
  118 + :default-expanded-keys="[0]"
  119 + check-strictly
  120 + />
  121 + </el-form-item>
  122 + </el-col>
  123 + <el-col :span="12">
  124 + <el-form-item label="菜单类型" prop="type">
  125 + <el-radio-group v-model="menuForm.type">
  126 + <el-radio-button
  127 + v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
  128 + :key="dict.value"
  129 + :label="dict.value"
  130 + >
  131 + {{ dict.label }}
  132 + </el-radio-button>
  133 + </el-radio-group>
  134 + </el-form-item>
  135 + </el-col>
  136 + <el-col :span="12">
  137 + <el-form-item label="菜单名称" prop="name">
  138 + <el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
  139 + </el-form-item>
  140 + </el-col>
  141 + <template v-if="menuForm.type !== 3">
  142 + <el-col :span="12">
  143 + <el-form-item label="菜单图标">
  144 + <IconSelect v-model="menuForm.icon" clearable />
122 145 </el-form-item>
123 146 </el-col>
124 147 <el-col :span="12">
125   - <el-form-item label="菜单类型" prop="type">
126   - <el-radio-group v-model="menuForm.type">
127   - <el-radio-button
128   - v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
129   - :key="dict.value"
130   - :label="dict.value"
131   - >
132   - {{ dict.label }}
133   - </el-radio-button>
134   - </el-radio-group>
  148 + <el-form-item label="路由地址" prop="path">
  149 + <template #label>
  150 + <Tooltip
  151 + titel="路由地址"
  152 + message="访问的路由地址,如:`user`。如需外网地址时,则以 `http(s)://` 开头"
  153 + />
  154 + </template>
  155 + <el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
135 156 </el-form-item>
136 157 </el-col>
  158 + </template>
  159 + <template v-if="menuForm.type === 2">
137 160 <el-col :span="12">
138   - <el-form-item label="菜单名称" prop="name">
139   - <el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
  161 + <el-form-item label="路由地址" prop="component">
  162 + <el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
140 163 </el-form-item>
141 164 </el-col>
142   - <template v-if="menuForm.type !== 3">
143   - <el-col :span="12">
144   - <el-form-item label="菜单图标">
145   - <IconSelect v-model="menuForm.icon" clearable />
146   - </el-form-item>
147   - </el-col>
148   - <el-col :span="12">
149   - <el-form-item label="路由地址" prop="path">
150   - <template #label>
151   - <Tooltip
152   - titel="路由地址"
153   - message="访问的路由地址,如:`user`。如需外网地址时,则以 `http(s)://` 开头"
154   - />
155   - </template>
156   - <el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
157   - </el-form-item>
158   - </el-col>
159   - </template>
160   - <template v-if="menuForm.type === 2">
161   - <el-col :span="12">
162   - <el-form-item label="路由地址" prop="component">
163   - <el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
164   - </el-form-item>
165   - </el-col>
166   - </template>
167   - <template v-if="menuForm.type !== 1">
168   - <el-col :span="12">
169   - <el-form-item label="权限标识" prop="permission">
170   - <template #label>
171   - <Tooltip
172   - titel="权限标识"
173   - message="Controller 方法上的权限字符,如:@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
174   - />
175   - </template>
176   - <el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
177   - </el-form-item>
178   - </el-col>
179   - </template>
  165 + </template>
  166 + <template v-if="menuForm.type !== 1">
180 167 <el-col :span="12">
181   - <el-form-item label="显示排序" prop="sort">
182   - <el-input-number
183   - v-model="menuForm.sort"
184   - controls-position="right"
185   - :min="0"
186   - clearable
187   - />
  168 + <el-form-item label="权限标识" prop="permission">
  169 + <template #label>
  170 + <Tooltip
  171 + titel="权限标识"
  172 + message="Controller 方法上的权限字符,如:@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
  173 + />
  174 + </template>
  175 + <el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
188 176 </el-form-item>
189 177 </el-col>
  178 + </template>
  179 + <el-col :span="12">
  180 + <el-form-item label="显示排序" prop="sort">
  181 + <el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable />
  182 + </el-form-item>
  183 + </el-col>
  184 + <el-col :span="12">
  185 + <el-form-item label="菜单状态" prop="status">
  186 + <el-radio-group v-model="menuForm.status">
  187 + <el-radio-button
  188 + v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
  189 + :key="dict.value"
  190 + :label="dict.value"
  191 + >
  192 + {{ dict.label }}
  193 + </el-radio-button>
  194 + </el-radio-group>
  195 + </el-form-item>
  196 + </el-col>
  197 + <template v-if="menuForm.type !== 3">
190 198 <el-col :span="12">
191   - <el-form-item label="菜单状态" prop="status">
192   - <el-radio-group v-model="menuForm.status">
193   - <el-radio-button
194   - v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
195   - :key="dict.value"
196   - :label="dict.value"
197   - >
198   - {{ dict.label }}
199   - </el-radio-button>
  199 + <el-form-item label="显示状态" prop="status">
  200 + <template #label>
  201 + <Tooltip
  202 + titel="显示状态"
  203 + message="选择隐藏时,路由将不会出现在侧边栏,但仍然可以访问"
  204 + />
  205 + </template>
  206 + <el-radio-group v-model="menuForm.visible">
  207 + <el-radio-button key="true" :label="true">显示</el-radio-button>
  208 + <el-radio-button key="false" :label="false">隐藏</el-radio-button>
200 209 </el-radio-group>
201 210 </el-form-item>
202 211 </el-col>
203   - <template v-if="menuForm.type !== 3">
204   - <el-col :span="12">
205   - <el-form-item label="显示状态" prop="status">
206   - <template #label>
207   - <Tooltip
208   - titel="显示状态"
209   - message="选择隐藏时,路由将不会出现在侧边栏,但仍然可以访问"
210   - />
211   - </template>
212   - <el-radio-group v-model="menuForm.visible">
213   - <el-radio-button key="true" :label="true">显示</el-radio-button>
214   - <el-radio-button key="false" :label="false">隐藏</el-radio-button>
215   - </el-radio-group>
216   - </el-form-item>
217   - </el-col>
218   - </template>
219   - <template v-if="menuForm.type === 2">
220   - <el-col :span="12">
221   - <el-form-item label="缓存状态" prop="keepAlive">
222   - <template #label>
223   - <Tooltip
224   - titel="缓存状态"
225   - message="选择缓存时,则会被 `keep-alive` 缓存,需要匹配组件的 `name` 和路由地址保持一致"
226   - />
227   - </template>
228   - <el-radio-group v-model="menuForm.keepAlive">
229   - <el-radio-button key="true" :label="true">缓存</el-radio-button>
230   - <el-radio-button key="false" :label="false">不缓存</el-radio-button>
231   - </el-radio-group>
232   - </el-form-item>
233   - </el-col>
234   - </template>
235   - </el-row>
236   - </el-form>
237   - </template>
  212 + </template>
  213 + <template v-if="menuForm.type === 2">
  214 + <el-col :span="12">
  215 + <el-form-item label="缓存状态" prop="keepAlive">
  216 + <template #label>
  217 + <Tooltip
  218 + titel="缓存状态"
  219 + message="选择缓存时,则会被 `keep-alive` 缓存,需要匹配组件的 `name` 和路由地址保持一致"
  220 + />
  221 + </template>
  222 + <el-radio-group v-model="menuForm.keepAlive">
  223 + <el-radio-button key="true" :label="true">缓存</el-radio-button>
  224 + <el-radio-button key="false" :label="false">不缓存</el-radio-button>
  225 + </el-radio-group>
  226 + </el-form-item>
  227 + </el-col>
  228 + </template>
  229 + </el-row>
  230 + </el-form>
238 231 <template #footer>
239 232 <!-- 按钮:保存 -->
240 233 <XButton
... ... @@ -247,7 +240,7 @@
247 240 <!-- 按钮:关闭 -->
248 241 <XButton :loading="actionLoading" @click="dialogVisible = false" :title="t('dialog.close')" />
249 242 </template>
250   - </XModal>
  243 + </Dialog>
251 244 </template>
252 245 <script setup lang="ts">
253 246 // 全局相关的 import
... ...
yudao-ui-admin-vue3/src/views/system/notice/index.vue
... ... @@ -38,22 +38,20 @@
38 38 </vxe-grid>
39 39 </ContentWrap>
40 40 <!-- 弹窗 -->
41   - <XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
42   - <template #default>
43   - <!-- 对话框(添加 / 修改) -->
44   - <Form
45   - ref="formRef"
46   - v-if="['create', 'update'].includes(actionType)"
47   - :schema="allSchemas.formSchema"
48   - :rules="rules"
49   - />
50   - <!-- 对话框(详情) -->
51   - <Descriptions
52   - v-if="actionType === 'detail'"
53   - :schema="allSchemas.detailSchema"
54   - :data="detailRef"
55   - />
56   - </template>
  41 + <Dialog id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
  42 + <!-- 对话框(添加 / 修改) -->
  43 + <Form
  44 + ref="formRef"
  45 + v-if="['create', 'update'].includes(actionType)"
  46 + :schema="allSchemas.formSchema"
  47 + :rules="rules"
  48 + />
  49 + <!-- 对话框(详情) -->
  50 + <Descriptions
  51 + v-if="actionType === 'detail'"
  52 + :schema="allSchemas.detailSchema"
  53 + :data="detailRef"
  54 + />
57 55 <template #footer>
58 56 <!-- 按钮:保存 -->
59 57 <XButton
... ... @@ -66,7 +64,7 @@
66 64 <!-- 按钮:关闭 -->
67 65 <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
68 66 </template>
69   - </XModal>
  67 + </Dialog>
70 68 </template>
71 69 <script setup lang="ts">
72 70 // 全局相关的 import
... ...
yudao-ui-admin-vue3/src/views/system/oauth2/client/index.vue
... ... @@ -48,23 +48,21 @@
48 48 </vxe-grid>
49 49 </ContentWrap>
50 50 <!-- 弹窗 -->
51   - <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
52   - <template #default>
53   - <!-- 表单:添加/修改 -->
54   - <Form
55   - ref="formRef"
56   - v-if="['create', 'update'].includes(actionType)"
57   - :schema="allSchemas.formSchema"
58   - :rules="rules"
59   - />
60   - <!-- 表单:详情 -->
61   - <!-- TODO @星语:展示详情时,有点小丑,可额能得看看 -->
62   - <Descriptions
63   - v-if="actionType === 'detail'"
64   - :schema="allSchemas.detailSchema"
65   - :data="detailRef"
66   - />
67   - </template>
  51 + <Dialog id="postModel" v-model="dialogVisible" :title="dialogTitle">
  52 + <!-- 表单:添加/修改 -->
  53 + <Form
  54 + ref="formRef"
  55 + v-if="['create', 'update'].includes(actionType)"
  56 + :schema="allSchemas.formSchema"
  57 + :rules="rules"
  58 + />
  59 + <!-- 表单:详情 -->
  60 + <!-- TODO @星语:展示详情时,有点小丑,可额能得看看 -->
  61 + <Descriptions
  62 + v-if="actionType === 'detail'"
  63 + :schema="allSchemas.detailSchema"
  64 + :data="detailRef"
  65 + />
68 66 <template #footer>
69 67 <!-- 按钮:保存 -->
70 68 <XButton
... ... @@ -77,7 +75,7 @@
77 75 <!-- 按钮:关闭 -->
78 76 <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
79 77 </template>
80   - </XModal>
  78 + </Dialog>
81 79 </template>
82 80 <script setup lang="ts">
83 81 // 全局相关的 import
... ...
yudao-ui-admin-vue3/src/views/system/operatelog/index.vue
... ... @@ -25,23 +25,21 @@
25 25 </vxe-grid>
26 26 </ContentWrap>
27 27 <!-- 弹窗 -->
28   - <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
29   - <template #default>
30   - <!-- 对话框(详情) -->
31   - <Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
32   - <template #resultCode="{ row }">
33   - <span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
34   - </template>
35   - <template #duration="{ row }">
36   - <span>{{ row.duration + 'ms' }}</span>
37   - </template>
38   - </Descriptions>
39   - </template>
  28 + <Dialog id="postModel" v-model="dialogVisible" :title="dialogTitle">
  29 + <!-- 对话框(详情) -->
  30 + <Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
  31 + <template #resultCode="{ row }">
  32 + <span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
  33 + </template>
  34 + <template #duration="{ row }">
  35 + <span>{{ row.duration + 'ms' }}</span>
  36 + </template>
  37 + </Descriptions>
40 38 <template #footer>
41 39 <!-- 按钮:关闭 -->
42 40 <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
43 41 </template>
44   - </XModal>
  42 + </Dialog>
45 43 </template>
46 44 <script setup lang="ts">
47 45 // 全局相关的 import
... ...
yudao-ui-admin-vue3/src/views/system/post/index.vue
... ... @@ -45,22 +45,20 @@
45 45 </vxe-grid>
46 46 </ContentWrap>
47 47 <!-- 弹窗 -->
48   - <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
49   - <template #default>
50   - <!-- 表单:添加/修改 -->
51   - <Form
52   - ref="formRef"
53   - v-if="['create', 'update'].includes(actionType)"
54   - :schema="allSchemas.formSchema"
55   - :rules="rules"
56   - />
57   - <!-- 表单:详情 -->
58   - <Descriptions
59   - v-if="actionType === 'detail'"
60   - :schema="allSchemas.detailSchema"
61   - :data="detailRef"
62   - />
63   - </template>
  48 + <Dialog id="postModel" v-model="dialogVisible" :title="dialogTitle">
  49 + <!-- 表单:添加/修改 -->
  50 + <Form
  51 + ref="formRef"
  52 + v-if="['create', 'update'].includes(actionType)"
  53 + :schema="allSchemas.formSchema"
  54 + :rules="rules"
  55 + />
  56 + <!-- 表单:详情 -->
  57 + <Descriptions
  58 + v-if="actionType === 'detail'"
  59 + :schema="allSchemas.detailSchema"
  60 + :data="detailRef"
  61 + />
64 62 <template #footer>
65 63 <!-- 按钮:保存 -->
66 64 <XButton
... ... @@ -73,7 +71,7 @@
73 71 <!-- 按钮:关闭 -->
74 72 <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
75 73 </template>
76   - </XModal>
  74 + </Dialog>
77 75 </template>
78 76 <script setup lang="ts">
79 77 // 全局相关的 import
... ...