部分样式bug

src/views/infra/build/index.vue

@@ -5,46 +5,52 @@
         <div class="mb-2 float-right">
           <el-button size="small" @click="setJson"> 导入JSON</el-button>
           <el-button size="small" @click="setOption"> 导入Options</el-button>
-          <el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
+          <el-button size="small" type="primary" @click="showJson">生成 JSON</el-button>
-          <el-button size="small" type="success" @click="showOption">生成Options</el-button>
+          <el-button size="small" type="success" @click="showOption">生成 Options</el-button>
           <el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
-          <!-- <el-button size="small" @click="changeLocale">中英切换</el-button> -->
         </div>
       </el-col>
+      <!-- 表单设计器 -->
       <el-col>
         <FcDesigner ref="designer" height="780px" />
       </el-col>
     </el-row>
-    <Dialog :title="dialogTitle" v-model="dialogVisible" maxHeight="600">
+  </ContentWrap>
+
+  <!-- 弹窗：表单预览 -->
+  <Dialog :title="dialogTitle" v-model="dialogVisible" max-height="600">
     <div ref="editor" v-if="dialogVisible">
-        <XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
+      <el-button style="float: right" @click="copy(formData)">
+        {{ t('common.copy') }}
+      </el-button>
       <el-scrollbar height="580">
         <div>
           <pre><code class="hljs" v-html="highlightedCode(formData)"></code></pre>
         </div>
       </el-scrollbar>
     </div>
-      <span style="color: red" v-if="err">输入内容格式有误!</span>
   </Dialog>
-  </ContentWrap>
 </template>
-<script setup lang="ts" name="Build">
+<script setup lang="ts" name="InfraBuild">
 import FcDesigner from '@form-create/designer'
-import formCreate from '@form-create/element-ui'
 // import { useClipboard } from '@vueuse/core'
 import { isString } from '@/utils/is'
 
-const { t } = useI18n()
+import hljs from 'highlight.js' // 导入代码高亮文件
-const message = useMessage()
+import 'highlight.js/styles/github.css' // 导入代码高亮样式
+import xml from 'highlight.js/lib/languages/java'
+import json from 'highlight.js/lib/languages/json'
 
-const designer = ref()
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息
 
-const dialogVisible = ref(false)
+const designer = ref() // 表单设计器
-const dialogTitle = ref('')
+const dialogVisible = ref(false) // 弹窗的是否展示
-const err = ref(false)
+const dialogTitle = ref('') // 弹窗的标题
-const type = ref(-1)
+const formType = ref(-1) // 表单的类型：0 - 生成 JSON；1 - 生成 Options；2 - 生成组件
-const formValue = ref('')
+const formData = ref('') // 表单数据
 
+/** 打开弹窗 */
 const openModel = (title: string) => {
   dialogVisible.value = true
   dialogTitle.value = title
@@ -57,23 +63,51 @@ const setOption = () => {
   openModel('导入Options--未实现')
 }
 const showJson = () => {
-  openModel('生成JSON')
+  openModel('生成 JSON')
-  type.value = 0
+  formType.value = 0
-  formValue.value = designer.value.getRule()
+  formData.value = designer.value.getRule()
 }
+
+/** 生成 Options */
 const showOption = () => {
-  openModel('生成Options')
+  openModel('生成 Options')
-  type.value = 1
+  formType.value = 1
-  formValue.value = designer.value.getOption()
+  formData.value = designer.value.getOption()
 }
+
+/** 生成组件 */
 const showTemplate = () => {
   openModel('生成组件')
-  type.value = 2
+  formType.value = 2
-  formValue.value = makeTemplate()
+  formData.value = makeTemplate()
+}
+
+const makeTemplate = () => {
+  const rule = designer.value.getRule()
+  const opt = designer.value.getOption()
+  return `<template>
+    <form-create
+      v-model="fapi"
+      :rule="rule"
+      :option="option"
+      @submit="onSubmit"
+    ></form-create>
+  </template>
+  <script setup lang=ts>
+    import formCreate from "@form-create/element-ui";
+    const faps = ref(null)
+    const rule = ref('')
+    const option = ref('')
+    const init = () => {
+      rule.value = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}')
+      option.value = formCreate.parseJson('${JSON.stringify(opt)}')
+    }
+    const onSubmit = (formData) => {
+      //todo 提交表单
+    }
+    init()
+  <\/script>`
 }
-// const changeLocale = () => {
-//   console.info('changeLocale')
-// }
 
 /** 复制 **/
 const copy = async (text: string) => {
@@ -100,10 +134,6 @@ const copy = async (text: string) => {
 /**
  * 代码高亮
  */
-import hljs from 'highlight.js' // 导入代码高亮文件
-import 'highlight.js/styles/github.css' // 导入代码高亮样式
-import xml from 'highlight.js/lib/languages/java'
-import json from 'highlight.js/lib/languages/json'
 const highlightedCode = (code) => {
   // 处理语言和代码
   let language = 'json'
@@ -124,31 +154,4 @@ onMounted(async () => {
   hljs.registerLanguage('xml', xml)
   hljs.registerLanguage('json', json)
 })
-
-const makeTemplate = () => {
-  const rule = designer.value.getRule()
-  const opt = designer.value.getOption()
-  return `<template>
-  <form-create
-    v-model="fapi"
-    :rule="rule"
-    :option="option"
-    @submit="onSubmit"
-  ></form-create>
-</template>
-<script setup lang=ts>
-  import formCreate from "@form-create/element-ui";
-  const faps = ref(null)
-  const rule = ref('')
-  const option = ref('')
-  const init = () => {
-    rule.value = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}')
-    option.value = formCreate.parseJson('${JSON.stringify(opt)}')
-  }
-  const onSubmit = (formData) => {
-    //todo 提交表单
-  }
-  init()
-<\/script>`
-}
 </script>

src/views/infra/codegen/components/Preview.vue

@@ -1,26 +1,16 @@
 <template>
-  <XModal title="预览" v-model="preview.open">
+  <XModal title="预览" v-model="preview.open" height="99%">
     <div class="flex">
       <el-card class="w-1/4" :gutter="12" shadow="hover">
         <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
-          <el-tree
+          <el-tree ref="treeRef" node-key="id" :data="preview.fileTree" :expand-on-click-node="false" highlight-current
-            ref="treeRef"
+            @node-click="handleNodeClick" />
-            node-key="id"
-            :data="preview.fileTree"
-            :expand-on-click-node="false"
-            highlight-current
-            @node-click="handleNodeClick"
-          />
         </el-scrollbar>
       </el-card>
       <el-card class="w-3/4 ml-3" :gutter="12" shadow="hover">
         <el-tabs v-model="preview.activeName">
-          <el-tab-pane
+          <el-tab-pane v-for="item in previewCodegen" :label="item.filePath.substring(item.filePath.lastIndexOf('/') + 1)"
-            v-for="item in previewCodegen"
+            :name="item.filePath" :key="item.filePath">
-            :label="item.filePath.substring(item.filePath.lastIndexOf('/') + 1)"
-            :name="item.filePath"
-            :key="item.filePath"
-          >
             <XTextButton style="float: right" :title="t('common.copy')" @click="copy(item.code)" />
             <pre>{{ item.code }}</pre>
           </el-tab-pane>

src/views/system/mail/template/index.vue

@@ -5,95 +5,51 @@
       <template #accountId_search>
         <el-select v-model="queryParams.accountId">
           <el-option :key="undefined" label="全部" :value="undefined" />
-          <el-option
+          <el-option v-for="item in accountOptions" :key="item.id" :label="item.mail" :value="item.id" />
-            v-for="item in accountOptions"
-            :key="item.id"
-            :label="item.mail"
-            :value="item.id"
-          />
         </el-select>
       </template>
       <template #toolbar_buttons>
         <!-- 操作：新增 -->
-        <XButton
+        <XButton type="primary" preIcon="ep:zoom-in" :title="t('action.add')" v-hasPermi="['system:mail-template:create']"
-          type="primary"
+          @click="handleCreate()" />
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
-          v-hasPermi="['system:mail-template:create']"
-          @click="handleCreate()"
-        />
       </template>
       <template #accountId_default="{ row }">
         <span>{{ accountOptions.find((account) => account.id === row.accountId)?.mail }}</span>
       </template>
       <template #actionbtns_default="{ row }">
         <!-- 操作：测试短信 -->
-        <XTextButton
+        <XTextButton preIcon="ep:cpu" :title="t('action.test')" v-hasPermi="['system:mail-template:send-mail']"
-          preIcon="ep:cpu"
+          @click="handleSendMail(row)" />
-          :title="t('action.test')"
-          v-hasPermi="['system:mail-template:send-mail']"
-          @click="handleSendMail(row)"
-        />
         <!-- 操作：修改 -->
-        <XTextButton
+        <XTextButton preIcon="ep:edit" :title="t('action.edit')" v-hasPermi="['system:mail-template:update']"
-          preIcon="ep:edit"
+          @click="handleUpdate(row.id)" />
-          :title="t('action.edit')"
-          v-hasPermi="['system:mail-template:update']"
-          @click="handleUpdate(row.id)"
-        />
         <!-- 操作：详情 -->
-        <XTextButton
+        <XTextButton preIcon="ep:view" :title="t('action.detail')" v-hasPermi="['system:mail-template:query']"
-          preIcon="ep:view"
+          @click="handleDetail(row.id)" />
-          :title="t('action.detail')"
-          v-hasPermi="['system:mail-template:query']"
-          @click="handleDetail(row.id)"
-        />
         <!-- 操作：删除 -->
-        <XTextButton
+        <XTextButton preIcon="ep:delete" :title="t('action.del')" v-hasPermi="['system:mail-template:delete']"
-          preIcon="ep:delete"
+          @click="deleteData(row.id)" />
-          :title="t('action.del')"
-          v-hasPermi="['system:mail-template:delete']"
-          @click="deleteData(row.id)"
-        />
       </template>
     </XTable>
   </ContentWrap>
 
   <!-- 添加/修改/详情的弹窗 -->
-  <XModal id="mailTemplateModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
+  <XModal id="mailTemplateModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle"
+    :height="['create', 'update'].includes(actionType) ? '99%' : ''">
     <!-- 表单：添加/修改 -->
-    <Form
+    <Form ref="formRef" v-if="['create', 'update'].includes(actionType)" :schema="allSchemas.formSchema" :rules="rules">
-      ref="formRef"
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-    >
       <template #accountId="form">
         <el-select v-model="form.accountId">
-          <el-option
+          <el-option v-for="item in accountOptions" :key="item.id" :label="item.mail" :value="item.id" />
-            v-for="item in accountOptions"
-            :key="item.id"
-            :label="item.mail"
-            :value="item.id"
-          />
         </el-select>
       </template>
     </Form>
     <!-- 表单：详情 -->
-    <Descriptions
+    <Descriptions v-if="actionType === 'detail'" :schema="allSchemas.detailSchema" :data="detailData" />
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    />
     <template #footer>
       <!-- 按钮：保存 -->
-      <XButton
+      <XButton v-if="['create', 'update'].includes(actionType)" type="primary" :title="t('action.save')"
-        v-if="['create', 'update'].includes(actionType)"
+        :loading="actionLoading" @click="submitForm()" />
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
-      />
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
     </template>
@@ -108,26 +64,14 @@
       <el-form-item label="收件邮箱" prop="mail">
         <el-input v-model="sendForm.mail" placeholder="请输入收件邮箱" />
       </el-form-item>
-      <el-form-item
+      <el-form-item v-for="param in sendForm.params" :key="param" :label="'参数 {' + param + '}'"
-        v-for="param in sendForm.params"
+        :prop="'templateParams.' + param">
-        :key="param"
+        <el-input v-model="sendForm.templateParams[param]" :placeholder="'请输入 ' + param + ' 参数'" />
-        :label="'参数 {' + param + '}'"
-        :prop="'templateParams.' + param"
-      >
-        <el-input
-          v-model="sendForm.templateParams[param]"
-          :placeholder="'请输入 ' + param + ' 参数'"
-        />
       </el-form-item>
     </el-form>
     <!-- 操作按钮 -->
     <template #footer>
-      <XButton
+      <XButton type="primary" :title="t('action.test')" :loading="actionLoading" @click="sendTest()" />
-        type="primary"
-        :title="t('action.test')"
-        :loading="actionLoading"
-        @click="sendTest()"
-      />
       <XButton :title="t('dialog.close')" @click="sendVisible = false" />
     </template>
   </XModal>

src/views/system/notice/index.vue

@@ -4,67 +4,36 @@
     <XTable @register="registerTable">
       <!-- 操作：新增 -->
       <template #toolbar_buttons>
-        <XButton
+        <XButton type="primary" preIcon="ep:zoom-in" :title="t('action.add')" v-hasPermi="['system:notice:create']"
-          type="primary"
+          @click="handleCreate()" />
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
-          v-hasPermi="['system:notice:create']"
-          @click="handleCreate()"
-        />
       </template>
       <template #actionbtns_default="{ row }">
         <!-- 操作：修改 -->
-        <XTextButton
+        <XTextButton preIcon="ep:edit" :title="t('action.edit')" v-hasPermi="['system:notice:update']"
-          preIcon="ep:edit"
+          @click="handleUpdate(row.id)" />
-          :title="t('action.edit')"
-          v-hasPermi="['system:notice:update']"
-          @click="handleUpdate(row.id)"
-        />
         <!-- 操作：详情 -->
-        <XTextButton
+        <XTextButton preIcon="ep:view" :title="t('action.detail')" v-hasPermi="['system:notice:query']"
-          preIcon="ep:view"
+          @click="handleDetail(row.id)" />
-          :title="t('action.detail')"
-          v-hasPermi="['system:notice:query']"
-          @click="handleDetail(row.id)"
-        />
         <!-- 操作：删除 -->
-        <XTextButton
+        <XTextButton preIcon="ep:delete" :title="t('action.del')" v-hasPermi="['system:notice:delete']"
-          preIcon="ep:delete"
+          @click="deleteData(row.id)" />
-          :title="t('action.del')"
-          v-hasPermi="['system:notice:delete']"
-          @click="deleteData(row.id)"
-        />
       </template>
     </XTable>
   </ContentWrap>
   <!-- 弹窗 -->
-  <XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
+  <XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle" height="99%">
     <!-- 对话框(添加 / 修改) -->
-    <Form
+    <Form ref="formRef" v-if="['create', 'update'].includes(actionType)" :schema="allSchemas.formSchema" :rules="rules" />
-      ref="formRef"
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-    />
     <!-- 对话框(详情) -->
-    <Descriptions
+    <Descriptions v-if="actionType === 'detail'" :schema="allSchemas.detailSchema" :data="detailData">
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    >
       <template #content="{ row }">
         <Editor :model-value="row.content" :readonly="true" />
       </template>
     </Descriptions>
     <template #footer>
       <!-- 按钮：保存 -->
-      <XButton
+      <XButton v-if="['create', 'update'].includes(actionType)" type="primary" :title="t('action.save')"
-        v-if="['create', 'update'].includes(actionType)"
+        :loading="actionLoading" @click="submitForm()" />
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
-      />
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>

src/views/system/notify/template/index.vue

@@ -4,43 +4,22 @@
     <XTable @register="registerTable">
       <template #toolbar_buttons>
         <!-- 操作：新增 -->
-        <XButton
+        <XButton type="primary" preIcon="ep:zoom-in" :title="t('action.add')"
-          type="primary"
+          v-hasPermi="['system:notify-template:create']" @click="handleCreate()" />
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
-          v-hasPermi="['system:notify-template:create']"
-          @click="handleCreate()"
-        />
       </template>
       <template #actionbtns_default="{ row }">
         <!-- 操作：测试站内信 -->
-        <XTextButton
+        <XTextButton preIcon="ep:cpu" :title="t('action.test')" v-hasPermi="['system:notify-template:send-notify']"
-          preIcon="ep:cpu"
+          @click="handleSendNotify(row)" />
-          :title="t('action.test')"
-          v-hasPermi="['system:notify-template:send-notify']"
-          @click="handleSendNotify(row)"
-        />
         <!-- 操作：修改 -->
-        <XTextButton
+        <XTextButton preIcon="ep:edit" :title="t('action.edit')" v-hasPermi="['system:notify-template:update']"
-          preIcon="ep:edit"
+          @click="handleUpdate(row.id)" />
-          :title="t('action.edit')"
-          v-hasPermi="['system:notify-template:update']"
-          @click="handleUpdate(row.id)"
-        />
         <!-- 操作：详情 -->
-        <XTextButton
+        <XTextButton preIcon="ep:view" :title="t('action.detail')" v-hasPermi="['system:notify-template:query']"
-          preIcon="ep:view"
+          @click="handleDetail(row.id)" />
-          :title="t('action.detail')"
-          v-hasPermi="['system:notify-template:query']"
-          @click="handleDetail(row.id)"
-        />
         <!-- 操作：删除 -->
-        <XTextButton
+        <XTextButton preIcon="ep:delete" :title="t('action.del')" v-hasPermi="['system:notify-template:delete']"
-          preIcon="ep:delete"
+          @click="deleteData(row.id)" />
-          :title="t('action.del')"
-          v-hasPermi="['system:notify-template:delete']"
-          @click="deleteData(row.id)"
-        />
       </template>
     </XTable>
   </ContentWrap>
@@ -48,27 +27,13 @@
   <!-- 添加/修改的弹窗 -->
   <XModal id="templateModel" :loading="modelLoading" v-model="dialogVisible" :title="dialogTitle">
     <!-- 表单：添加/修改 -->
-    <Form
+    <Form ref="formRef" v-if="['create', 'update'].includes(actionType)" :schema="allSchemas.formSchema" :rules="rules" />
-      ref="formRef"
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-    />
     <!-- 表单：详情 -->
-    <Descriptions
+    <Descriptions v-if="actionType === 'detail'" :schema="allSchemas.detailSchema" :data="detailData" />
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    />
     <template #footer>
       <!-- 按钮：保存 -->
-      <XButton
+      <XButton v-if="['create', 'update'].includes(actionType)" type="primary" :title="t('action.save')"
-        v-if="['create', 'update'].includes(actionType)"
+        :loading="actionLoading" @click="submitForm()" />
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
-      />
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
@@ -82,34 +47,17 @@
       </el-form-item>
       <el-form-item label="接收人" prop="userId">
         <el-select v-model="sendForm.userId" placeholder="请选择接收人">
-          <el-option
+          <el-option v-for="item in userOption" :key="item.id" :label="item.nickname" :value="item.id" />
-            v-for="item in userOption"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
         </el-select>
       </el-form-item>
-      <el-form-item
+      <el-form-item v-for="param in sendForm.params" :key="param" :label="'参数 {' + param + '}'"
-        v-for="param in sendForm.params"
+        :prop="'templateParams.' + param">
-        :key="param"
+        <el-input v-model="sendForm.templateParams[param]" :placeholder="'请输入 ' + param + ' 参数'" />
-        :label="'参数 {' + param + '}'"
-        :prop="'templateParams.' + param"
-      >
-        <el-input
-          v-model="sendForm.templateParams[param]"
-          :placeholder="'请输入 ' + param + ' 参数'"
-        />
       </el-form-item>
     </el-form>
     <!-- 操作按钮 -->
     <template #footer>
-      <XButton
+      <XButton type="primary" :title="t('action.test')" :loading="actionLoading" @click="sendTest()" />
-        type="primary"
-        :title="t('action.test')"
-        :loading="actionLoading"
-        @click="sendTest()"
-      />
       <XButton :title="t('dialog.close')" @click="sendVisible = false" />
     </template>
   </XModal>
@@ -202,7 +150,7 @@ const submitForm = async () => {
 const sendForm = ref({
   content: '',
   params: {},
-  userId: 0,
+  userId: '',
   templateCode: '',
   templateParams: {}
 })

src/views/system/oauth2/client/index.vue

@@ -4,13 +4,8 @@
     <XTable @register="registerTable">
       <template #toolbar_buttons>
         <!-- 操作：新增 -->
-        <XButton
+        <XButton type="primary" preIcon="ep:zoom-in" :title="t('action.add')" v-hasPermi="['system:oauth2-client:create']"
-          type="primary"
+          @click="handleCreate()" />
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
-          v-hasPermi="['system:oauth2-client:create']"
-          @click="handleCreate()"
-        />
       </template>
       <template #accessTokenValiditySeconds_default="{ row }">
         {{ row.accessTokenValiditySeconds + '秒' }}
@@ -19,55 +14,31 @@
         {{ row.refreshTokenValiditySeconds + '秒' }}
       </template>
       <template #authorizedGrantTypes_default="{ row }">
-        <el-tag
+        <el-tag :disable-transitions="true" :key="index" v-for="(authorizedGrantType, index) in row.authorizedGrantTypes"
-          :disable-transitions="true"
+          :index="index">
-          :key="index"
-          v-for="(authorizedGrantType, index) in row.authorizedGrantTypes"
-          :index="index"
-        >
           {{ authorizedGrantType }}
         </el-tag>
       </template>
       <template #actionbtns_default="{ row }">
         <!-- 操作：修改 -->
-        <XTextButton
+        <XTextButton preIcon="ep:edit" :title="t('action.edit')" v-hasPermi="['system:oauth2-client:update']"
-          preIcon="ep:edit"
+          @click="handleUpdate(row.id)" />
-          :title="t('action.edit')"
-          v-hasPermi="['system:oauth2-client:update']"
-          @click="handleUpdate(row.id)"
-        />
         <!-- 操作：详情 -->
-        <XTextButton
+        <XTextButton preIcon="ep:view" :title="t('action.detail')" v-hasPermi="['system:oauth2-client:query']"
-          preIcon="ep:view"
+          @click="handleDetail(row.id)" />
-          :title="t('action.detail')"
-          v-hasPermi="['system:oauth2-client:query']"
-          @click="handleDetail(row.id)"
-        />
         <!-- 操作：删除 -->
-        <XTextButton
+        <XTextButton preIcon="ep:delete" :title="t('action.del')" v-hasPermi="['system:oauth2-client:delete']"
-          preIcon="ep:delete"
+          @click="deleteData(row.id)" />
-          :title="t('action.del')"
-          v-hasPermi="['system:oauth2-client:delete']"
-          @click="deleteData(row.id)"
-        />
       </template>
     </XTable>
   </ContentWrap>
   <!-- 弹窗 -->
-  <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
+  <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle"
+    :height="['create', 'update'].includes(actionType) ? '99%' : ''">
     <!-- 表单：添加/修改 -->
-    <Form
+    <Form ref="formRef" v-if="['create', 'update'].includes(actionType)" :schema="allSchemas.formSchema" :rules="rules" />
-      ref="formRef"
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-    />
     <!-- 表单：详情 -->
-    <Descriptions
+    <Descriptions v-if="actionType === 'detail'" :schema="allSchemas.detailSchema" :data="detailData">
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    >
       <template #accessTokenValiditySeconds="{ row }">
         {{ row.accessTokenValiditySeconds + '秒' }}
       </template>
@@ -75,55 +46,32 @@
         {{ row.refreshTokenValiditySeconds + '秒' }}
       </template>
       <template #authorizedGrantTypes="{ row }">
-        <el-tag
+        <el-tag :disable-transitions="true" :key="index" v-for="(authorizedGrantType, index) in row.authorizedGrantTypes"
-          :disable-transitions="true"
+          :index="index">
-          :key="index"
-          v-for="(authorizedGrantType, index) in row.authorizedGrantTypes"
-          :index="index"
-        >
           {{ authorizedGrantType }}
         </el-tag>
       </template>
       <template #scopes="{ row }">
-        <el-tag
+        <el-tag :disable-transitions="true" :key="index" v-for="(scopes, index) in row.scopes" :index="index">
-          :disable-transitions="true"
-          :key="index"
-          v-for="(scopes, index) in row.scopes"
-          :index="index"
-        >
           {{ scopes }}
         </el-tag>
       </template>
       <template #autoApproveScopes="{ row }">
-        <el-tag
+        <el-tag :disable-transitions="true" :key="index" v-for="(autoApproveScopes, index) in row.autoApproveScopes"
-          :disable-transitions="true"
+          :index="index">
-          :key="index"
-          v-for="(autoApproveScopes, index) in row.autoApproveScopes"
-          :index="index"
-        >
           {{ autoApproveScopes }}
         </el-tag>
       </template>
       <template #redirectUris="{ row }">
-        <el-tag
+        <el-tag :disable-transitions="true" :key="index" v-for="(redirectUris, index) in row.redirectUris" :index="index">
-          :disable-transitions="true"
-          :key="index"
-          v-for="(redirectUris, index) in row.redirectUris"
-          :index="index"
-        >
           {{ redirectUris }}
         </el-tag>
       </template>
     </Descriptions>
     <template #footer>
       <!-- 按钮：保存 -->
-      <XButton
+      <XButton v-if="['create', 'update'].includes(actionType)" type="primary" :title="t('action.save')"
-        v-if="['create', 'update'].includes(actionType)"
+        :loading="actionLoading" @click="submitForm()" />
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
-      />
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>

src/views/system/post/index.vue

@@ -4,68 +4,105 @@
     <XTable @register="registerTable">
       <template #toolbar_buttons>
         <!-- 操作：新增 -->
-        <XButton
+        <XButton type="primary" preIcon="ep:zoom-in" :title="t('action.add')" v-hasPermi="['system:post:create']"
-          type="primary"
+          @click="openModel('create')" />
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
-          v-hasPermi="['system:post:create']"
-          @click="openModal('create')"
-        />
         <!-- 操作：导出 -->
-        <XButton
+        <XButton type="primary" plain preIcon="ep:download" :title="t('action.export')"
-          type="primary"
+          v-hasPermi="['system:post:export']" @click="exportList('岗位列表.xls')" />
-          plain
-          preIcon="ep:download"
-          :title="t('action.export')"
-          v-hasPermi="['system:post:export']"
-          @click="exportList('岗位列表.xls')"
-        />
       </template>
       <template #actionbtns_default="{ row }">
         <!-- 操作：修改 -->
-        <XTextButton
+        <XTextButton preIcon="ep:edit" :title="t('action.edit')" v-hasPermi="['system:post:update']"
-          preIcon="ep:edit"
+          @click="openModel('update', row?.id)" />
-          :title="t('action.edit')"
-          v-hasPermi="['system:post:update']"
-          @click="openModal('update', row?.id)"
-        />
         <!-- 操作：详情 -->
-        <XTextButton
+        <XTextButton preIcon="ep:view" :title="t('action.detail')" v-hasPermi="['system:post:query']"
-          preIcon="ep:view"
+          @click="openModel('detail', row?.id)" />
-          :title="t('action.detail')"
-          v-hasPermi="['system:post:query']"
-          @click="openModal('detail', row?.id)"
-        />
         <!-- 操作：删除 -->
-        <XTextButton
+        <XTextButton preIcon="ep:delete" :title="t('action.delete')" v-hasPermi="['system:post:delete']"
-          preIcon="ep:delete"
+          @click="deleteData(row?.id)" />
-          :title="t('action.delete')"
-          v-hasPermi="['system:post:delete']"
-          @click="deleteData(row?.id)"
-        />
       </template>
     </XTable>
   </ContentWrap>
-  <!-- 表单弹窗：添加/修改/详情 -->
+  <!-- 弹窗 -->
-  <PostForm ref="modalRef" @success="reload()" />
+  <XModal id="postModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
+    <!-- 表单：添加/修改 -->
+    <Form ref="formRef" v-if="['create', 'update'].includes(actionType)" :schema="allSchemas.formSchema" :rules="rules" />
+    <!-- 表单：详情 -->
+    <Descriptions v-if="actionType === 'detail'" :schema="allSchemas.detailSchema" :data="detailData" />
+    <template #footer>
+      <!-- 按钮：保存 -->
+      <XButton v-if="['create', 'update'].includes(actionType)" type="primary" :title="t('action.save')"
+        :loading="actionLoading" @click="submitForm()" />
+      <!-- 按钮：关闭 -->
+      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
+    </template>
+  </XModal>
 </template>
 <script setup lang="ts" name="Post">
+import type { FormExpose } from '@/components/Form'
+// 业务相关的 import
 import * as PostApi from '@/api/system/post'
-import { allSchemas } from './post.data'
+import { rules, allSchemas } from './post.data'
-import PostForm from './form.vue'
-const { t } = useI18n() // 国际化
 
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
 // 列表相关的变量
 const [registerTable, { reload, deleteData, exportList }] = useXTable({
-  allSchemas: allSchemas, // 列表配置
+  allSchemas: allSchemas,
-  getListApi: PostApi.getPostPageApi, // 加载列表的 API
+  getListApi: PostApi.getPostPageApi,
-  deleteApi: PostApi.deletePostApi, // 删除数据的 API
+  deleteApi: PostApi.deletePostApi,
-  exportListApi: PostApi.exportPostApi // 导出数据的 API
+  exportListApi: PostApi.exportPostApi
 })
+// 弹窗相关的变量
+const modelVisible = ref(false) // 是否显示弹出层
+const modelTitle = ref('edit') // 弹出层标题
+const modelLoading = ref(false) // 弹出层loading
+const actionType = ref('') // 操作按钮的类型
+const actionLoading = ref(false) // 按钮 Loading
+const formRef = ref<FormExpose>() // 表单 Ref
+const detailData = ref() // 详情 Ref
 
-// 表单相关的变量
+const openModel = async (type: string, rowId?: number) => {
-const modalRef = ref()
+  modelLoading.value = true
-const openModal = (type: string, id?: number) => {
+  modelTitle.value = t('action.' + type)
-  modalRef.value.openModal(type, id)
+  actionType.value = type
+  modelVisible.value = true
+  // 设置数据
+  if (rowId) {
+    const res = await PostApi.getPostApi(rowId)
+    if (type === 'update') {
+      unref(formRef)?.setValues(res)
+    } else if (type === 'detail') {
+      detailData.value = res
+    }
+  }
+  modelLoading.value = false
+}
+
+// 提交新增/修改的表单
+const submitForm = async () => {
+  const elForm = unref(formRef)?.getElFormRef()
+  if (!elForm) return
+  elForm.validate(async (valid) => {
+    if (valid) {
+      actionLoading.value = true
+      // 提交请求
+      try {
+        const data = unref(formRef)?.formModel as PostApi.PostVO
+        if (actionType.value === 'create') {
+          await PostApi.createPostApi(data)
+          message.success(t('common.createSuccess'))
+        } else {
+          await PostApi.updatePostApi(data)
+          message.success(t('common.updateSuccess'))
+        }
+        modelVisible.value = false
+      } finally {
+        actionLoading.value = false
+        // 刷新列表
+        reload()
+      }
+    }
+  })
 }
 </script>

src/views/system/user/index.vue

@@ -9,17 +9,9 @@
       </template>
       <el-input v-model="filterText" placeholder="搜索部门" />
       <el-scrollbar height="650">
-        <el-tree
+        <el-tree ref="treeRef" node-key="id" default-expand-all :data="deptOptions" :props="defaultProps"
-          ref="treeRef"
+          :highlight-current="true" :filter-node-method="filterNode" :expand-on-click-node="false"
-          node-key="id"
+          @node-click="handleDeptNodeClick" />
-          default-expand-all
-          :data="deptOptions"
-          :props="defaultProps"
-          :highlight-current="true"
-          :filter-node-method="filterNode"
-          :expand-on-click-node="false"
-          @node-click="handleDeptNodeClick"
-        />
       </el-scrollbar>
     </el-card>
     <el-card class="w-4/5 user" style="margin-left: 10px" :gutter="12" shadow="hover">
@@ -32,90 +24,47 @@
       <XTable @register="registerTable">
         <template #toolbar_buttons>
           <!-- 操作：新增 -->
-          <XButton
+          <XButton type="primary" preIcon="ep:zoom-in" :title="t('action.add')" v-hasPermi="['system:user:create']"
-            type="primary"
+            @click="handleCreate()" />
-            preIcon="ep:zoom-in"
-            :title="t('action.add')"
-            v-hasPermi="['system:user:create']"
-            @click="handleCreate()"
-          />
           <!-- 操作：导入用户 -->
-          <XButton
+          <XButton type="warning" preIcon="ep:upload" :title="t('action.import')" v-hasPermi="['system:user:import']"
-            type="warning"
+            @click="importClick" />
-            preIcon="ep:upload"
-            :title="t('action.import')"
-            v-hasPermi="['system:user:import']"
-            @click="importClick"
-          />
           <!-- 操作：导出用户 -->
-          <XButton
+          <XButton type="warning" preIcon="ep:download" :title="t('action.export')" v-hasPermi="['system:user:export']"
-            type="warning"
+            @click="exportList('用户数据.xls')" />
-            preIcon="ep:download"
-            :title="t('action.export')"
-            v-hasPermi="['system:user:export']"
-            @click="exportList('用户数据.xls')"
-          />
         </template>
         <template #status_default="{ row }">
-          <el-switch
+          <el-switch v-model="row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(row)" />
-            v-model="row.status"
-            :active-value="0"
-            :inactive-value="1"
-            @change="handleStatusChange(row)"
-          />
         </template>
         <template #actionbtns_default="{ row }">
           <!-- 操作：编辑 -->
-          <XTextButton
+          <XTextButton preIcon="ep:edit" :title="t('action.edit')" v-hasPermi="['system:user:update']"
-            preIcon="ep:edit"
+            @click="handleUpdate(row.id)" />
-            :title="t('action.edit')"
-            v-hasPermi="['system:user:update']"
-            @click="handleUpdate(row.id)"
-          />
           <!-- 操作：详情 -->
-          <XTextButton
+          <XTextButton preIcon="ep:view" :title="t('action.detail')" v-hasPermi="['system:user:update']"
-            preIcon="ep:view"
+            @click="handleDetail(row.id)" />
-            :title="t('action.detail')"
+          <el-dropdown class="p-0.5" v-hasPermi="[
-            v-hasPermi="['system:user:update']"
-            @click="handleDetail(row.id)"
-          />
-          <el-dropdown
-            class="p-0.5"
-            v-hasPermi="[
             'system:user:update-password',
             'system:permission:assign-user-role',
             'system:user:delete'
-            ]"
+          ]">
-          >
             <XTextButton :title="t('action.more')" postIcon="ep:arrow-down" />
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item>
                   <!-- 操作：重置密码 -->
-                  <XTextButton
+                  <XTextButton preIcon="ep:key" title="重置密码" v-hasPermi="['system:user:update-password']"
-                    preIcon="ep:key"
+                    @click="handleResetPwd(row)" />
-                    title="重置密码"
-                    v-hasPermi="['system:user:update-password']"
-                    @click="handleResetPwd(row)"
-                  />
                 </el-dropdown-item>
                 <el-dropdown-item>
                   <!-- 操作：分配角色 -->
-                  <XTextButton
+                  <XTextButton preIcon="ep:key" title="分配角色" v-hasPermi="['system:permission:assign-user-role']"
-                    preIcon="ep:key"
+                    @click="handleRole(row)" />
-                    title="分配角色"
-                    v-hasPermi="['system:permission:assign-user-role']"
-                    @click="handleRole(row)"
-                  />
                 </el-dropdown-item>
                 <el-dropdown-item>
                   <!-- 操作：删除 -->
-                  <XTextButton
+                  <XTextButton preIcon="ep:delete" :title="t('action.del')" v-hasPermi="['system:user:delete']"
-                    preIcon="ep:delete"
+                    @click="deleteData(row.id)" />
-                    :title="t('action.del')"
-                    v-hasPermi="['system:user:delete']"
-                    @click="deleteData(row.id)"
-                  />
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -126,38 +75,19 @@
   </div>
   <XModal v-model="dialogVisible" :title="dialogTitle">
     <!-- 对话框(添加 / 修改) -->
-    <Form
+    <Form v-if="['create', 'update'].includes(actionType)" :rules="rules" :schema="allSchemas.formSchema" ref="formRef">
-      v-if="['create', 'update'].includes(actionType)"
-      :rules="rules"
-      :schema="allSchemas.formSchema"
-      ref="formRef"
-    >
       <template #deptId="form">
-        <el-tree-select
+        <el-tree-select node-key="id" v-model="form['deptId']" :props="defaultProps" :data="deptOptions" check-strictly />
-          node-key="id"
-          v-model="form['deptId']"
-          :props="defaultProps"
-          :data="deptOptions"
-          check-strictly
-        />
       </template>
       <template #postIds="form">
         <el-select v-model="form['postIds']" multiple :placeholder="t('common.selectText')">
-          <el-option
+          <el-option v-for="item in postOptions" :key="item.id" :label="item.name"
-            v-for="item in postOptions"
+            :value="(item.id as unknown as number)" />
-            :key="item.id"
-            :label="item.name"
-            :value="(item.id as unknown as number)"
-          />
         </el-select>
       </template>
     </Form>
     <!-- 对话框(详情) -->
-    <Descriptions
+    <Descriptions v-if="actionType === 'detail'" :schema="allSchemas.detailSchema" :data="detailData">
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    >
       <template #deptId="{ row }">
         <el-tag>{{ dataFormater(row.deptId) }}</el-tag>
       </template>
@@ -175,19 +105,14 @@
     <!-- 操作按钮 -->
     <template #footer>
       <!-- 按钮：保存 -->
-      <XButton
+      <XButton v-if="['create', 'update'].includes(actionType)" type="primary" :title="t('action.save')"
-        v-if="['create', 'update'].includes(actionType)"
+        :loading="loading" @click="submitForm()" />
-        type="primary"
-        :title="t('action.save')"
-        :loading="loading"
-        @click="submitForm()"
-      />
       <!-- 按钮：关闭 -->
       <XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
   </XModal>
   <!-- 分配用户角色 -->
-  <XModal v-model="roleDialogVisible" title="分配角色">
+  <XModal v-model="roleDialogVisible" title="分配角色" width="50%">
     <el-form :model="userRole" label-width="140px" :inline="true">
       <el-form-item label="用户名称">
         <el-tag>{{ userRole.username }}</el-tag>
@@ -196,15 +121,10 @@
         <el-tag>{{ userRole.nickname }}</el-tag>
       </el-form-item>
       <el-form-item label="角色">
-        <el-transfer
+        <el-transfer v-model="userRole.roleIds" :titles="['角色列表', '已选择']" :props="{
-          v-model="userRole.roleIds"
-          :titles="['角色列表', '已选择']"
-          :props="{
           key: 'id',
           label: 'name'
-          }"
+        }" :data="roleOptions" />
-          :data="roleOptions"
-        />
       </el-form-item>
     </el-form>
     <!-- 操作按钮 -->
@@ -222,22 +142,11 @@
         <XButton type="primary" prefix="ep:download" title="点击下载" @click="handleImportTemp()" />
       </el-form-item>
       <el-form-item label="文件上传 :">
-        <el-upload
+        <el-upload ref="uploadRef" :action="updateUrl + '?updateSupport=' + updateSupport" :headers="uploadHeaders"
-          ref="uploadRef"
+          :drag="true" :limit="1" :multiple="true" :show-file-list="true" :disabled="uploadDisabled"
-          :action="updateUrl + '?updateSupport=' + updateSupport"
+          :before-upload="beforeExcelUpload" :on-exceed="handleExceed" :on-success="handleFileSuccess"
-          :headers="uploadHeaders"
+          :on-error="excelUploadError" :auto-upload="false"
-          :drag="true"
+          accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
-          :limit="1"
-          :multiple="true"
-          :show-file-list="true"
-          :disabled="uploadDisabled"
-          :before-upload="beforeExcelUpload"
-          :on-exceed="handleExceed"
-          :on-success="handleFileSuccess"
-          :on-error="excelUploadError"
-          :auto-upload="false"
-          accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-        >
           <Icon icon="ep:upload-filled" />
           <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
           <template #tip>
@@ -251,12 +160,7 @@
     </el-form>
     <template #footer>
       <!-- 按钮：保存 -->
-      <XButton
+      <XButton type="warning" preIcon="ep:upload-filled" :title="t('action.save')" @click="submitFileForm()" />
-        type="warning"
-        preIcon="ep:upload-filled"
-        :title="t('action.save')"
-        @click="submitFileForm()"
-      />
       <!-- 按钮：关闭 -->
       <XButton :title="t('dialog.close')" @click="importDialogVisible = false" />
     </template>
@@ -573,6 +477,7 @@ onMounted(async () => {
   height: 780px;
   max-height: 800px;
 }
+
 .card-header {
   display: flex;
   justify-content: space-between;