feat 邮件配置管理, useForm新增diff方法

src/components/registerGlobComp.ts

@@ -9,6 +9,7 @@ import {
   Select,
   SelectOption,
   Tabs,
+  Upload,
   Checkbox,
   Switch,
   Tree,
@@ -40,6 +41,7 @@ export function registerGlobComp(app: App) {
   app.use(InputNumber)
   app.use(Tag)
   app.use(Tabs)
+  app.use(Upload)
   app.use(Checkbox)
   app.use(Space)
   app.use(Modal)

src/hooks/bootx/useDict.ts

@@ -1,4 +1,5 @@
 import { useDictStoreWithOut } from '/@/store/modules/dict'
+import { LabeledValue } from 'ant-design-vue/lib/select'
 
 const useDictStore = useDictStoreWithOut()
 
@@ -44,7 +45,7 @@ export function dictItemsNumber(dictCode: string) {
 /**
  * 获取字典下拉框数据列表
  */
-function dictDropDown(dictCode: string) {
+function dictDropDown(dictCode: string): LabeledValue[] {
   const list = useDictStore.getDict
   return list
     .filter((dict) => dictCode === dict.dictCode)
@@ -55,7 +56,7 @@ function dictDropDown(dictCode: string) {
 /**
  * 获取字典下拉框数据列表
  */
-function dictDropDownNumber(dictCode: string) {
+function dictDropDownNumber(dictCode: string): LabeledValue[] {
   const list = useDictStore.getDict
   return list
     .filter((dict) => dictCode === dict.dictCode)

src/hooks/bootx/useFormEdit.ts

@@ -53,6 +53,15 @@ export default function () {
     return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
   }
 
+  // 判断脱敏参数是否被修改的参数, 未修改返回空值
+  function diffForm(rawForm, editForm, ...keys) {
+    const form = {}
+    for (const key of keys) {
+      form[key] = rawForm[key] === editForm[key] ? undefined : editForm[key]
+    }
+    return form
+  }
+
   return {
     model,
     labelCol,
@@ -68,5 +77,6 @@ export default function () {
     initFormModel,
     handleCancel,
     search,
+    diffForm,
   }
 }

src/store/modules/user.ts

@@ -57,7 +57,7 @@ export const useUserStore = defineStore({
     },
   },
   actions: {
-    // token信心
+    // token信息
     setToken(info: string | undefined) {
       this.token = info ? info : '' // for null or undefined value
       setAuthCache(TOKEN_KEY, info)

src/views/modules/develop/codegen/CodeGenForm.vue

@@ -1,5 +1,14 @@
 <template>
-  <a-drawer title="代码生成参数配置" width="50%" :visible="visible" :destroyOnClose="true" :maskClosable="false" @close="handleCancel">
+  <basic-drawer
+    showFooter
+    v-bind="$attrs"
+    title="代码生成参数配置"
+    width="40%"
+    :destroyOnClose="true"
+    :maskClosable="false"
+    :visible="visible"
+    @close="handleCancel"
+  >
     <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
       <a-form-item label="功能模块名称" name="module">
         <a-input-group compact>
@@ -48,11 +57,11 @@
         </a-form-item>
       </template>
     </a-form>
-    <div class="drawer-button">
+    <template #footer>
       <a-button key="cancel" @click="handleCancel">取消</a-button>
       <a-button key="forward" type="primary" :disabled="!genPackFlag" @click="handleOk">生成</a-button>
-    </div>
-  </a-drawer>
+    </template>
+  </basic-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -61,6 +70,7 @@
   import { nextTick } from 'vue'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { FormInstance } from 'ant-design-vue/lib/form'
+  import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
 
   const { labelCol, wrapperCol, visible } = useFormEdit()
 

src/views/modules/develop/file/FileUploadList.vue

@@ -6,9 +6,16 @@
     <div class="m-3 p-3 bg-white">
       <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }">
         <template #buttons>
-          <a-space>
-            <a-button type="primary" preIcon="ant-design:upload-outlined" @click="upload">上传</a-button>
-          </a-space>
+          <a-upload
+            name="file"
+            :multiple="false"
+            :action="uploadAction"
+            :headers="tokenHeader"
+            :showUploadList="false"
+            @change="handleChange"
+          >
+            <a-button preIcon="ant-design:cloud-upload-outlined" type="primary"> 文件上传 </a-button>
+          </a-upload>
         </template>
       </vxe-toolbar>
       <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
@@ -39,7 +46,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted } from 'vue'
+  import { computed, onMounted } from 'vue'
   import { $ref } from 'vue/macros'
   import { page } from './FileUpload.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
@@ -48,17 +55,20 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField } from '/@/components/Bootx/Query/Query'
   import { getFileDownloadUrl, getFilePreviewUrl } from '/@/api/common/fileUpload'
+  import { useUserStoreWithOut } from '/@/store/modules/user'
+  import { getAppEnvConfig } from '/@/utils/env'
 
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
   const { notification, createMessage } = useMessage()
+  const useUserStore = useUserStoreWithOut()
+  const { VITE_GLOB_API_URL } = getAppEnvConfig()
 
   // 查询条件
   const fields = [] as QueryField[]
 
   const xTable = $ref<VxeTableInstance>()
   const xToolbar = $ref<VxeToolbarInstance>()
-  const fileUploadEdit = $ref<any>()
 
   onMounted(() => {
     vxeBind()
@@ -68,6 +78,33 @@
     xTable.connect(xToolbar)
   }
 
+  // 上传地址
+  const uploadAction = computed(() => {
+    return VITE_GLOB_API_URL + '/file/upload'
+  })
+
+  // 请求头消息
+  const tokenHeader = computed(() => {
+    // 从 localstorage 获取 token
+    const token = useUserStore.getToken
+    return {
+      AccessToken: token,
+    }
+  })
+  // 上传完成回调
+  function handleChange(info) {
+    if (info.file.status === 'done') {
+      if (!info.file.response.code) {
+        queryPage()
+        createMessage.success(`${info.file.name} 上传成功!`)
+      } else {
+        createMessage.error(`${info.file.response.msg}`)
+      }
+    } else if (info.file.status === 'error') {
+      createMessage.error('上传失败')
+    }
+  }
+
   // 分页查询
   function queryPage() {
     loading.value = true
@@ -79,9 +116,7 @@
     })
   }
   // 上传
-  function upload(){
-
-  }
+  function upload() {}
   // 查看
   function show(record) {
     getFilePreviewUrl(record.id).then((res) => {

src/views/modules/notice/mail/MailConfig.api.ts

@@ -0,0 +1,114 @@
+import { defHttp } from '/@/utils/http/axios'
+import { PageResult, Result } from '/#/axios'
+import { BaseEntity } from '/#/web'
+
+/**
+ * 分页
+ */
+export const page = (params) => {
+  return defHttp.get<Result<PageResult<MailConfig>>>({
+    url: '/mail/config/page',
+    params,
+  })
+}
+
+/**
+ * 获取单条
+ */
+export const get = (id) => {
+  return defHttp.get<Result<MailConfig>>({
+    url: '/mail/config/findById',
+    params: { id },
+  })
+}
+
+/**
+ * 添加
+ */
+export const add = (obj: MailConfig) => {
+  return defHttp.post({
+    url: '/mail/config/add',
+    data: obj,
+  })
+}
+
+/**
+ * 更新
+ */
+export const update = (obj: MailConfig) => {
+  return defHttp.post({
+    url: '/mail/config/update',
+    data: obj,
+  })
+}
+
+/**
+ * 删除
+ */
+export const del = (id) => {
+  return defHttp.delete({
+    url: '/mail/config/delete',
+    params: { id },
+  })
+}
+
+/**
+ * 查询全部
+ */
+export const findAll = () => {
+  return defHttp.get<Result<Array<MailConfig>>>({
+    url: '/mail/config/findAll',
+  })
+}
+
+/**
+ * 设置启用的邮箱配置
+ */
+export const setUpActivity = (id) => {
+  return defHttp.post({
+    url: '/mail/config/setUpActivity',
+    params: { id },
+  })
+}
+
+/**
+ * 编码是否被使用
+ */
+export const existsByCode = (code) => {
+  return defHttp.get<Result<boolean>>({
+    url: '/mail/config/existsByCode',
+    params: { code },
+  })
+}
+export const existsByCodeNotId = (code, id) => {
+  return defHttp.get<Result<boolean>>({
+    url: '/mail/config/existsByCodeNotId',
+    params: { code, id },
+  })
+}
+
+/**
+ * 邮件配置
+ */
+export interface MailConfig extends BaseEntity {
+  // 编号
+  code: string
+  // 名称
+  name: string
+  // 邮箱服务器host
+  host: string
+  // 邮箱服务器 port
+  port: number
+  // 邮箱服务器 username
+  username: string
+  // 邮箱服务器 password
+  password: string
+  // 邮箱服务器 sender
+  sender: string
+  // 邮箱服务器 from
+  from: string
+  // 是否默认配置，0:否。1:是
+  activity: number
+  // 安全传输方式 1:plain 2:tls 3:ssl
+  securityType: number
+}

src/views/modules/notice/mail/MailConfigEdit.vue

@@ -0,0 +1,198 @@
+<template>
+  <basic-modal
+    v-bind="$attrs"
+    :loading="confirmLoading"
+    :width="modalWidth"
+    :title="title"
+    :visible="visible"
+    :mask-closable="showable"
+    @cancel="handleCancel"
+  >
+    <a-form
+      class="small-from-item"
+      ref="formRef"
+      :validate-trigger="['blur', 'change']"
+      :model="form"
+      :rules="rules"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+    >
+      <a-form-item label="主键" :hidden="true">
+        <a-input v-model:value="form.id" :disabled="showable" />
+      </a-form-item>
+      <a-form-item label="编号" name="code">
+        <a-input v-model:value="form.code" :disabled="showable" placeholder="请输入编号" />
+      </a-form-item>
+      <a-form-item label="名称" name="name">
+        <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入名称" />
+      </a-form-item>
+      <a-form-item label="邮件服务器地址" name="host">
+        <a-input v-model:value="form.host" :disabled="showable" placeholder="请输入邮件服务器地址" />
+      </a-form-item>
+      <a-form-item label="端口" name="port">
+        <a-input-number :min="0" :precision="0" :max="65535" :step="1" v-model:value="form.port" :disabled="showable" placeholder="端口" />
+      </a-form-item>
+      <a-form-item label="发送人账号" name="username">
+        <a-input v-model:value="form.username" :disabled="showable" placeholder="请输入发送人账号" />
+      </a-form-item>
+      <a-form-item label="发送人密码" name="password">
+        <a-input v-model:value="form.password" :disabled="showable" :placeholder="addable ? '请输入密码' : '为空不修改密码'" />
+      </a-form-item>
+      <a-form-item label="发送人sender" name="sender">
+        <a-input v-model:value="form.sender" :disabled="showable" placeholder="请输入邮箱服务器 sender">
+          <template #suffix>
+            <a-tooltip title="发送时发送人的名称"><Icon icon="ant-design:question-circle-outlined" /></a-tooltip>
+          </template>
+        </a-input>
+      </a-form-item>
+      <a-form-item label="邮箱from" name="from">
+        <a-input v-model:value="form.from" :disabled="showable" placeholder="请输入邮箱from">
+          <template #suffix>
+            <a-tooltip title="发送时发送人邮箱账号"><Icon icon="ant-design:question-circle-outlined" /></a-tooltip>
+          </template>
+        </a-input>
+      </a-form-item>
+      <a-form-item label="安全传输方式" name="securityType">
+        <a-select
+          :disabled="showable"
+          allowClear
+          :options="securityTypes"
+          v-model:value="form.securityType"
+          style="width: 100%"
+          placeholder="选择安全方式"
+        />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+      </a-space>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import { computed, nextTick, reactive } from 'vue'
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { add, get, update, MailConfig, existsByCode, existsByCodeNotId } from './MailConfig.api'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { BasicModal } from '/@/components/Modal'
+  import Icon from '/@/components/Icon/src/Icon.vue'
+  import { useDict } from '/@/hooks/bootx/useDict'
+  import { LabeledValue } from 'ant-design-vue/lib/select'
+  import { useValidate } from '/@/hooks/bootx/useValidate'
+
+  const {
+    initFormModel,
+    handleCancel,
+    search,
+    diffForm,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    addable,
+    editable,
+    showable,
+    formEditType,
+  } = useFormEdit()
+  const { dictDropDownNumber } = useDict()
+  const { existsByServer } = useValidate()
+  // 表单
+  const formRef = $ref<FormInstance>()
+  let rawForm
+  let form = $ref({
+    id: null,
+    code: '',
+    name: '',
+    host: '',
+    port: 465,
+    username: '',
+    password: '',
+    sender: '',
+    from: '',
+    activity: 0,
+    securityType: 1,
+  } as MailConfig)
+
+  let securityTypes = $ref<LabeledValue[]>()
+  // 校验
+  const rules = reactive({
+    code: [
+      { required: true, message: '请输入配置编码' },
+      { validator: validateCode, trigger: 'blur' },
+    ],
+    name: [{ required: true, message: '请输入配置名称' }],
+    host: [{ required: true, message: '请输入邮件服务器地址' }],
+    port: [{ required: true, message: '请输入邮件服务器端口' }],
+    username: [{ required: true, message: '请输入邮件发送人账号' }],
+    password: [{ required: true, message: '请输入邮件发送人密码' }],
+    sender: [{ required: true, message: '请输入邮件发送人Sender' }],
+    from: [
+      { required: true, message: '请输入邮件From信息' },
+      { type: 'email', message: '邮件格式不正确' },
+    ],
+    securityType: [{ required: true, message: '请选择安全方式' }],
+  } as Record<string, Rule[]>)
+  // 事件
+  const emits = defineEmits(['ok'])
+  // 入口
+  function init(id, editType: FormEditType) {
+    initData()
+    initFormModel(id, editType)
+    resetForm()
+    getInfo(id, editType)
+  }
+  // 初始化基础数据
+  function initData() {
+    securityTypes = dictDropDownNumber('MailSecurityCode')
+  }
+  // 获取信息
+  function getInfo(id, editType: FormEditType) {
+    if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
+      confirmLoading.value = true
+      get(id).then(({ data }) => {
+        rawForm = { ...data }
+        form = data
+        confirmLoading.value = false
+      })
+    } else {
+      confirmLoading.value = false
+    }
+  }
+  // 保存
+  function handleOk() {
+    formRef.validate().then(async () => {
+      confirmLoading.value = true
+      if (formEditType.value === FormEditType.Add) {
+        await add(form)
+      } else if (formEditType.value === FormEditType.Edit) {
+        await update({ ...form, ...diffForm(rawForm, form, 'username', 'password') })
+      }
+      confirmLoading.value = false
+      handleCancel()
+      emits('ok')
+    })
+  }
+
+  // 重置表单的校验
+  function resetForm() {
+    nextTick(() => {
+      formRef.resetFields()
+    })
+  }
+  function validateCode() {
+    const { code, id } = form
+    return existsByServer(code, id, formEditType, existsByCode, existsByCodeNotId)
+  }
+  defineExpose({
+    init,
+  })
+</script>
+
+<style lang="less" scoped></style>

src/views/modules/notice/mail/MailConfigList.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <div class="m-3 p-3 pt-5 bg-white">
+      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
+    </div>
+    <div class="m-3 p-3 bg-white">
+      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }">
+        <template #buttons>
+          <a-space>
+            <a-button type="primary" @click="add">新建</a-button>
+          </a-space>
+        </template>
+      </vxe-toolbar>
+      <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
+        <vxe-column type="seq" width="60" />
+        <vxe-column field="code" title="编号" />
+        <vxe-column field="name" title="名称" />
+        <vxe-column field="host" title="地址" />
+        <vxe-column field="port" title="端口" />
+        <vxe-column field="username" title="账号" />
+        <vxe-column field="sender" title="发送人" />
+        <vxe-column field="from" title="from" />
+        <vxe-column field="activity" title="启用状态">
+          <template #default="{ row }">
+            <a-tag v-if="row.activity" color="green">启用</a-tag>
+            <a-tag v-else color="red">未启用</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="securityType" title="安全传输方式">
+          <template #default="{ row }">
+            {{ dictConvert('MailSecurityCode', row.securityType) }}
+          </template>
+        </vxe-column>
+        <vxe-column field="createTime" title="创建时间" />
+        <vxe-column fixed="right" width="170" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <span>
+              <a href="javascript:" @click="show(row)">查看</a>
+            </span>
+            <a-divider type="vertical" />
+            <span>
+              <a href="javascript:" @click="edit(row)">编辑</a>
+            </span>
+            <a-divider type="vertical" />
+            <a-dropdown>
+              <a> 更多 <icon icon="ant-design:down-outlined" :size="12" /> </a>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item>
+                    <a href="javascript:" @click="setUpActivityData(row)">设为默认</a>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a-popconfirm title="是否删除配置" @confirm="remove(row)" okText="是" cancelText="否">
+                      <a href="javascript:" @click="remove(row)" style="color: red">删除</a>
+                    </a-popconfirm>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <vxe-pager
+        size="medium"
+        :loading="loading"
+        :current-page="pagination.current"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        @page-change="handleTableChange"
+      />
+      <mail-config-edit ref="mailConfigEdit" @ok="queryPage" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue'
+  import { $ref } from 'vue/macros'
+  import { del, page, setUpActivity } from './MailConfig.api'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import MailConfigEdit from './MailConfigEdit.vue'
+  import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
+  import { useDict } from '/@/hooks/bootx/useDict'
+  import Icon from '/@/components/Icon/src/Icon.vue'
+
+  // 使用hooks
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+  const { notification, createMessage, createConfirm } = useMessage()
+  const { dictConvert } = useDict()
+  // 查询条件
+  const fields = [
+    { field: 'code', type: STRING, name: '编码', placeholder: '请输入编码' },
+    { field: 'name', type: STRING, name: '名称', placeholder: '请输入名称' },
+  ] as QueryField[]
+
+  const xTable = $ref<VxeTableInstance>()
+  const xToolbar = $ref<VxeToolbarInstance>()
+  const mailConfigEdit = $ref<any>()
+
+  onMounted(() => {
+    vxeBind()
+    queryPage()
+  })
+  function vxeBind() {
+    xTable.connect(xToolbar)
+  }
+
+  // 分页查询
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+  }
+  // 新增
+  function add() {
+    mailConfigEdit.init(null, FormEditType.Add)
+  }
+  // 编辑
+  function edit(record) {
+    mailConfigEdit.init(record.id, FormEditType.Edit)
+  }
+  // 查看
+  function show(record) {
+    mailConfigEdit.init(record.id, FormEditType.Show)
+  }
+
+  // 删除
+  function remove(record) {
+    queryPage()
+    createConfirm({
+      iconType: 'warning',
+      title: '警告',
+      content: '是否删除配置',
+      onOk: () => {
+        del(record.id).then(() => {
+          createMessage.success('删除成功')
+          queryPage()
+        })
+      },
+    })
+  }
+  // 设置默认配置
+  function setUpActivityData(record) {
+    createConfirm({
+      iconType: 'warning',
+      title: '警告',
+      content: '是否设为默认配置',
+      onOk: () => {
+        setUpActivity(record.id).then(() => {
+          createMessage.success('设置成功')
+          queryPage()
+        })
+      },
+    })
+  }
+</script>
+
+<style lang="less" scoped></style>

src/views/modules/notice/template/MessageTemplate.api.ts

@@ -0,0 +1,78 @@
+import { defHttp } from '/@/utils/http/axios'
+import { PageResult, Result } from '/#/axios'
+import { BaseEntity } from '/#/web'
+
+/**
+ * 分页
+ */
+export const page = (params) => {
+  return defHttp.get<Result<PageResult<MessageTemplate>>>({
+    url: '/message/template/page',
+    params,
+  })
+}
+
+/**
+ * 获取单条
+ */
+export const get = (id) => {
+  return defHttp.get<Result<MessageTemplate>>({
+    url: '/message/template/findById',
+    params: { id },
+  })
+}
+
+/**
+ * 添加
+ */
+export const add = (obj: MessageTemplate) => {
+  return defHttp.post({
+    url: '/message/template/add',
+    data: obj,
+  })
+}
+
+/**
+ * 更新
+ */
+export const update = (obj: MessageTemplate) => {
+  return defHttp.post({
+    url: '/message/template/update',
+    data: obj,
+  })
+}
+
+/**
+ * 删除
+ */
+export const del = (id) => {
+  return defHttp.delete({
+    url: '/message/template/delete',
+    params: { id },
+  })
+}
+
+/**
+ * 查询全部
+ */
+export const findAll = () => {
+  return defHttp.get<Result<Array<MessageTemplate>>>({
+    url: '/message/template/findAll',
+  })
+}
+
+/**
+ * 消息模板
+ */
+export interface MessageTemplate extends BaseEntity {
+  // 编码
+  code: string
+  // 名称
+  name: string
+  // 模板数据
+  data: string
+  // 模板类型
+  type: number
+  // 备注
+  remark: string
+}

src/views/modules/notice/template/MessageTemplateEdit.vue

@@ -0,0 +1,121 @@
+<template>
+  <basic-modal
+    v-bind="$attrs"
+    :loading="confirmLoading"
+    :width="modalWidth"
+    :title="title"
+    :visible="visible"
+    :mask-closable="showable"
+    @cancel="handleCancel"
+  >
+    <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-form-item label="主键" :hidden="true">
+        <a-input v-model:value="form.id" :disabled="showable" />
+      </a-form-item>
+      <a-form-item label="编码" name="code">
+        <a-input v-model:value="form.code" :disabled="showable" placeholder="请输入编码" />
+      </a-form-item>
+      <a-form-item label="名称" name="name">
+        <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入名称" />
+      </a-form-item>
+      <a-form-item label="模板数据" name="data">
+        <a-input v-model:value="form.data" :disabled="showable" placeholder="请输入模板数据" />
+      </a-form-item>
+      <a-form-item label="模板类型" name="type">
+        <a-input v-model:value="form.type" :disabled="showable" placeholder="请输入模板类型" />
+      </a-form-item>
+      <a-form-item label="备注" name="remark">
+        <a-input v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+      </a-space>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick, reactive } from 'vue'
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { add, get, update, MessageTemplate } from './MessageTemplate.api'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { BasicModal } from '/@/components/Modal'
+
+  const {
+    initFormModel,
+    handleCancel,
+    search,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    editable,
+    showable,
+    formEditType,
+  } = useFormEdit()
+  // 表单
+  const formRef = $ref<FormInstance>()
+  let form = $ref({
+    id: null,
+    code: null,
+    name: null,
+    data: null,
+    type: null,
+    remark: null,
+  } as MessageTemplate)
+  // 校验
+  const rules = reactive({} as Record<string, Rule[]>)
+  // 事件
+  const emits = defineEmits(['ok'])
+  // 入口
+  function init(id, editType: FormEditType) {
+    initFormModel(id, editType)
+    resetForm()
+    getInfo(id, editType)
+  }
+  // 获取信息
+  function getInfo(id, editType: FormEditType) {
+    if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
+      confirmLoading.value = true
+      get(id).then(({ data }) => {
+        form = data
+        confirmLoading.value = false
+      })
+    } else {
+      confirmLoading.value = false
+    }
+  }
+  // 保存
+  function handleOk() {
+    formRef.validate().then(async () => {
+      confirmLoading.value = true
+      if (formEditType.value === FormEditType.Add) {
+        await add(form)
+      } else if (formEditType.value === FormEditType.Edit) {
+        await update(form)
+      }
+      confirmLoading.value = false
+      handleCancel()
+      emits('ok')
+    })
+  }
+
+  // 重置表单的校验
+  function resetForm() {
+    nextTick(() => {
+      formRef.resetFields()
+    })
+  }
+  defineExpose({
+    init,
+  })
+</script>
+
+<style lang="less" scoped></style>

src/views/modules/notice/template/MessageTemplateList.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="m-3 p-3 pt-5 bg-white">
+      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
+    </div>
+    <div class="m-3 p-3 bg-white">
+      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }">
+        <template #buttons>
+          <a-space>
+            <a-button type="primary" @click="add">新建</a-button>
+          </a-space>
+        </template>
+      </vxe-toolbar>
+      <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
+        <vxe-column type="seq" width="60" />
+        <vxe-column field="code" title="编码" />
+        <vxe-column field="name" title="名称" />
+        <vxe-column field="data" title="模板数据" />
+        <vxe-column field="type" title="模板类型" />
+        <vxe-column field="remark" title="备注" />
+        <vxe-column field="createTime" title="创建时间" />
+        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <span>
+              <a href="javascript:" @click="show(row)">查看</a>
+            </span>
+            <a-divider type="vertical" />
+            <span>
+              <a href="javascript:" @click="edit(row)">编辑</a>
+            </span>
+            <a-divider type="vertical" />
+            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
+              <a href="javascript:" style="color: red">删除</a>
+            </a-popconfirm>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <vxe-pager
+        size="medium"
+        :loading="loading"
+        :current-page="pagination.current"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        @page-change="handleTableChange"
+      />
+      <message-template-edit ref="messageTemplateEdit" @ok="queryPage" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue'
+  import { $ref } from 'vue/macros'
+  import { del, page } from './MessageTemplate.api'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import MessageTemplateEdit from './MessageTemplateEdit.vue'
+  import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { QueryField } from '/@/components/Bootx/Query/Query'
+
+  // 使用hooks
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+  const { notification, createMessage, createConfirm } = useMessage()
+
+  // 查询条件
+  const fields = [] as QueryField[]
+
+  const xTable = $ref<VxeTableInstance>()
+  const xToolbar = $ref<VxeToolbarInstance>()
+  const messageTemplateEdit = $ref<any>()
+
+  onMounted(() => {
+    vxeBind()
+    queryPage()
+  })
+  function vxeBind() {
+    xTable.connect(xToolbar)
+  }
+
+  // 分页查询
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+  }
+  // 新增
+  function add() {
+    messageTemplateEdit.init(null, FormEditType.Add)
+  }
+  // 编辑
+  function edit(record) {
+    messageTemplateEdit.init(record.id, FormEditType.Edit)
+  }
+  // 查看
+  function show(record) {
+    messageTemplateEdit.init(record.id, FormEditType.Show)
+  }
+
+  // 删除
+  function remove(record) {
+    del(record.id).then(() => {
+      createMessage.success('删除成功')
+    })
+    queryPage()
+  }
+</script>
+
+<style lang="less" scoped></style>

src/views/modules/system/client/ClientEdit.vue

@@ -2,8 +2,8 @@
   <basic-drawer
     showFooter
     v-bind="$attrs"
-    :width="modalWidth"
     :title="title"
+    :width="modalWidth"
     :mask-closable="showable"
     :visible="visible"
     @close="handleCancel"

src/views/modules/system/menu/ResourceList.vue

@@ -1,12 +1,11 @@
 <template>
-  <a-drawer
+  <basic-drawer
     forceRender
+    v-bind="$attrs"
     title="权限资源列表"
-    :visible="visible"
-    :maskClosable="true"
     width="60%"
-    placement="right"
-    :closable="true"
+    :maskClosable="false"
+    :visible="visible"
     @close="visible = false"
   >
     <vxe-toolbar ref="xToolbar" custom zoom :refresh="{ query: init }">
@@ -41,7 +40,7 @@
       </vxe-column>
     </vxe-table>
     <resource-edit ref="resourceEdit" @ok="queryPage" />
-  </a-drawer>
+  </basic-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -52,6 +51,7 @@
   import { $ref } from 'vue/macros'
   import { del, Menu, Resource, resourceList } from '/@/views/modules/system/menu/Menu.api'
   import { FormEditType } from '/@/enums/formTypeEnum'
+  import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
 
   // 使用hooks
   const { pagination, pages, model, loading } = useTablePage(queryPage)

src/views/modules/system/quartz/QuartzJobLogList.vue

@@ -9,6 +9,16 @@
     :closable="true"
     @close="visible = false"
   >
+    <basic-drawer
+      forceRender
+      v-bind="$attrs"
+      title="任务执行日志"
+      width="60%"
+      :maskClosable="false"
+      :visible="visible"
+      @close="visible = false"
+    >
+
     <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
     <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }" />
     <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
@@ -49,6 +59,7 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField } from '/@/components/Bootx/Query/Query'
   import { QuartzJob } from './QuartzJob.api'
+  import BasicDrawer from "/@/components/Drawer/src/BasicDrawer.vue";
 
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)