feat 消息模板

src/components/Form/src/helper.ts

@@ -48,7 +48,7 @@ export function setComponentRuleType(rule: ValidationRule, component: ComponentT
 export function processDateValue(attr: Recordable, component: string) {
   const { valueFormat, value } = attr
   if (valueFormat) {
-    attr.value = isObject(value) ? dateUtil(value).format(valueFormat) : value
+    attr.value = isObject(value) ? dateUtil(value as any).format(valueFormat) : value
   } else if (DATE_TYPE.includes(component) && value) {
     attr.value = dateUtil(attr.value)
   }

src/views/modules/develop/dynamicform/DynamicFormList.vue

@@ -129,7 +129,7 @@
 
   // 设计
   function design(record) {}
-  // 设计
+  // 预览
   function preview(record) {}
 
   // 删除

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

@@ -61,6 +61,21 @@ export const findAll = () => {
   })
 }
 
+/**
+ * 编码是否被使用
+ */
+export const existsByCode = (code) => {
+  return defHttp.get<Result<boolean>>({
+    url: '/message/template/existsByCode',
+    params: { code },
+  })
+}
+export const existsByCodeNotId = (code, id) => {
+  return defHttp.get<Result<boolean>>({
+    url: '/message/template/existsByCodeNotId',
+    params: { code, id },
+  })
+}
 /**
  * 消息模板
  */

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

@@ -8,7 +8,15 @@
     :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
+      class="small-from-item"
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :validate-trigger="['blur', 'change']"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+    >
       <a-form-item label="主键" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
@@ -18,14 +26,21 @@
       <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-select
+          :disabled="showable"
+          :options="messageTemplateTypes"
+          allowClear
+          v-model:value="form.type"
+          style="width: 100%"
+          placeholder="选择消息模板类型"
+        />
+      </a-form-item>
+      <a-form-item label="模板数据" name="data">
+        <a-textarea :rows="4" v-model:value="form.data" :disabled="showable" placeholder="请输入模板数据" />
       </a-form-item>
       <a-form-item label="备注" name="remark">
-        <a-input v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
+        <a-textarea v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
       </a-form-item>
     </a-form>
     <template #footer>
@@ -41,10 +56,13 @@
   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 { add, get, update, existsByCode, existsByCodeNotId, MessageTemplate } from './MessageTemplate.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { FormEditType } from '/@/enums/formTypeEnum'
   import { BasicModal } from '/@/components/Modal'
+  import { useDict } from '/@/hooks/bootx/useDict'
+  import { LabeledValue } from 'ant-design-vue/lib/select'
+  import { useValidate } from '/@/hooks/bootx/useValidate'
 
   const {
     initFormModel,
@@ -60,26 +78,41 @@
     showable,
     formEditType,
   } = useFormEdit()
+  const { dictDropDownNumber } = useDict()
+  const { existsByServer } = useValidate()
   // 表单
   const formRef = $ref<FormInstance>()
+  let messageTemplateTypes = $ref<LabeledValue[]>()
   let form = $ref({
     id: null,
-    code: null,
-    name: null,
-    data: null,
-    type: null,
-    remark: null,
+    code: '',
+    name: '',
+    data: '',
+    type: 0,
+    remark: '',
   } as MessageTemplate)
   // 校验
-  const rules = reactive({} as Record<string, Rule[]>)
+  const rules = reactive({
+    code: [
+      { required: true, message: '请输入模板编码' },
+      { validator: validateCode, trigger: 'blur' },
+    ],
+    name: [{ required: true, message: '请输入模板名称' }],
+    date: [{ required: true, message: '请数据模板数据' }],
+    type: [{ 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() {
+    messageTemplateTypes = dictDropDownNumber('MessageTemplateCode')
+  }
   // 获取信息
   function getInfo(id, editType: FormEditType) {
     if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
@@ -113,6 +146,11 @@
       formRef.resetFields()
     })
   }
+  // 校验编码重复
+  async function validateCode() {
+    const { code, id } = form
+    return existsByServer(code, id, formEditType, existsByCode, existsByCodeNotId)
+  }
   defineExpose({
     init,
   })

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

@@ -19,7 +19,7 @@
         <vxe-column field="type" title="模板类型" />
         <vxe-column field="remark" title="备注" />
         <vxe-column field="createTime" title="创建时间" />
-        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+        <vxe-column fixed="right" width="160" :showOverflow="false" title="操作">
           <template #default="{ row }">
             <span>
               <a href="javascript:" @click="show(row)">查看</a>
@@ -29,9 +29,19 @@
               <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>
+            <a-dropdown>
+              <a> 更多 <icon icon="ant-design:down-outlined" :size="12" /></a>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item>
+                    <a href="javascript:" @click="render(row)">测试</a>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a href="javascript:" @click="remove(row)" style="color: red">删除</a>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
           </template>
         </vxe-column>
       </vxe-table>
@@ -44,6 +54,7 @@
         @page-change="handleTableChange"
       />
       <message-template-edit ref="messageTemplateEdit" @ok="queryPage" />
+      <template-render ref="templateRender" />
     </div>
   </div>
 </template>
@@ -58,18 +69,24 @@
   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'
+  import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
+  import Icon from '/@/components/Icon/src/Icon.vue'
+  import TemplateRender from './TemplateRender.vue'
 
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
   const { notification, createMessage, createConfirm } = useMessage()
 
   // 查询条件
-  const fields = [] as QueryField[]
+  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 messageTemplateEdit = $ref<any>()
+  const templateRender = $ref<any>()
 
   onMounted(() => {
     vxeBind()
@@ -101,13 +118,24 @@
   function show(record) {
     messageTemplateEdit.init(record.id, FormEditType.Show)
   }
+  // 渲染测试
+  function render(record) {
+    TemplateRender.init(record.id)
+  }
 
   // 删除
   function remove(record) {
-    del(record.id).then(() => {
-      createMessage.success('删除成功')
+    createConfirm({
+      iconType: 'warning',
+      title: '警告',
+      content: '是否删除该表单',
+      onOk: () => {
+        del(record.id).then(() => {
+          notification.success({ message: '删除成功' })
+          queryPage()
+        })
+      },
     })
-    queryPage()
   }
 </script>
 

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

@@ -0,0 +1,5 @@
+<template> </template>
+
+<script lang="ts" setup></script>
+
+<style scoped></style>