feat: [bpm][antd] review todo 修改

apps/web-antd/src/views/bpm/model/form/modules/custom-print-template.vue

@@ -6,7 +6,7 @@ import { computed, onBeforeUnmount, ref, shallowRef } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 
 import Editor from '@tinymce/tinymce-vue';
-import { Alert, Button } from 'ant-design-vue';
+import { Alert } from 'ant-design-vue';
 
 import { setupTinyPlugins } from './tinymce-plugin';
 
@@ -19,11 +19,14 @@ const props = withDefaults(
   },
 );
 
+const emits = defineEmits<{
+  (e: 'confirm', value: string): void;
+}>();
+
 /** TinyMCE 自托管：https://www.jianshu.com/p/59a9c3802443 */
 const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
 
 const [Modal, modalApi] = useVbenModal({
-  footer: false,
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
@@ -40,15 +43,12 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
+  onConfirm() {
+    emits('confirm', valueHtml.value);
+    modalApi.close();
+  },
 });
 
-const handleConfirm = () => {
-  /** 通过 setData 传递确认的数据，在父组件的 onConfirm 中获取 */
-  modalApi.setData({ confirmedTemplate: valueHtml.value as string });
-  modalApi.onConfirm();
-  modalApi.close();
-};
-
 const mentionList = computed<MentionItem[]>(() => {
   const base: MentionItem[] = [
     { id: 'startUser', name: '发起人' },
@@ -99,7 +99,6 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <!-- TODO @jason：a-button 改成 Modal 自带的 onConfirm 替代；= = 我貌似试着改了下，有点问题，略奇怪 -->
   <Modal class="w-3/4" title="自定义模板">
     <div class="mb-3">
       <Alert
@@ -114,11 +113,5 @@ onBeforeUnmount(() => {
       :tinymce-script-src="tinymceScriptSrc"
       license-key="gpl"
     />
-    <template #footer>
-      <div class="flex justify-end gap-2">
-        <Button @click="modalApi.onCancel()">取 消</Button>
-        <Button type="primary" @click="handleConfirm">确 定</Button>
-      </div>
-    </template>
   </Modal>
 </template>

apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue

@@ -266,23 +266,14 @@ async function validate() {
 const [PrintTemplateModal, printTemplateModalApi] = useVbenModal({
   connectedComponent: PrintTemplate,
   destroyOnClose: true,
-  onConfirm() {
-    // 会在内部模态框中设置数据，这里获取数据， 内部模态框中不能有 onConfirm 方法
-    const { confirmedTemplate } = printTemplateModalApi.getData<{
-      confirmedTemplate: string;
-    }>();
-    if (confirmedTemplate !== undefined) {
-      modelData.value.printTemplateSetting.template = confirmedTemplate;
-    }
-  },
 });
 
 /** 弹出自定义打印模板弹窗 */
-const openPrintTemplateModal = () => {
+function openPrintTemplateModal() {
   printTemplateModalApi
     .setData({ template: modelData.value.printTemplateSetting.template })
     .open();
-};
+}
 
 /** 默认的打印模板， 目前自定义模板没有引入自定义样式。 看后续是否需要 */
 const defaultTemplate = `<p style="text-align: center;font-size: 1.25rem;"><strong><span data-w-e-type="mention" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></strong></p>
@@ -341,6 +332,10 @@ function handlePrintTemplateEnableChange(checked: any) {
   }
 }
 
+function confirmPrintTemplate(template: string) {
+  modelData.value.printTemplateSetting.template = template;
+}
+
 defineExpose({ initData, validate });
 </script>
 <template>
@@ -625,6 +620,9 @@ defineExpose({ initData, validate });
         </div>
       </div>
     </FormItem>
-    <PrintTemplateModal :form-fields="formFields" />
+    <PrintTemplateModal
+      :form-fields="formFields"
+      @confirm="confirmPrintTemplate"
+    />
   </Form>
 </template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue

@@ -233,7 +233,6 @@ function getPrintTemplateHTML() {
               </td>
               <td class="w-1/4 border border-black p-1.5">发起时间</td>
               <td class="w-1/4 border border-black p-1.5">
-                <!-- TODO @jason：这里会告警呢 TODO @芋艿 我这边不会有警告呀 -->
                 {{ formatDate(printData.processInstance.startTime) }}
               </td>
             </tr>