@4399ywkf/design 2.0.0 → 2.1.1

package/dist/FormDesigner/card/templates/feishuOrderConfirm.js

@@ -0,0 +1,718 @@
+/**
+ * ════════ 订单待确认 —— 卡片「数据回填 + 确认提交」范式实例 ════════
+ *
+ * 翻译自飞书 CardKit 案例「您有订单待确认」，但不停在外观复刻：按
+ * feishuLeaveApproval 的范式重新接通了挂载回填 + 一键确认的真链路，
+ * 给「待确认 / 待支付 / 待签收」一类只需一个动作的卡片做样板。
+ *
+ * 与 feishuLeaveApproval 共享同一套三件套：
+ *  ① 布局        全部展示字段 (markdown) 排在 formContainer 内，右下角放唯一动作按钮
+ *  ② 数据结构    回填字段叶子名扁平：OrderHeader / OrderItem1..3 /
+ *                OrderAmount / InvoiceSequence / PaymentTerm /
+ *                PaymentFrequency / TenantName
+ *  ③ 事件↔后端   onMount api_request → set_values 整批回填；按钮
+ *                form_submit + api_request(mode='form') 提交确认；
+ *                后端按业务推下一张卡（已确认 / 已超期…），前端不切态
+ *
+ * ──── 参考接口契约（mock 见 test/mock-server.mjs）────
+ *  GET  /api/order/detail
+ *    · 订单 id 由后端按卡片烘焙进 url，前端不传（card-state-switching 决策）
+ *    · resp: { code:0, data: { OrderHeader, OrderItem1..3, OrderAmount,
+ *      InvoiceSequence, PaymentTerm, PaymentFrequency, TenantName } }
+ *      —— 展示字段是 markdown，值是「直接展示串」（含 markdown 语法），
+ *         回填后整串覆盖占位 props.content
+ *  POST /api/order/confirm
+ *    · body: { json:<卡片 schema>, value:<全表值> }（mode='form' 自动打包）
+ *    · resp: { code:0, data:{} }；成功后后端重推「已确认」卡
+ *
+ * ──── 关键实现点（与 feishuLeaveApproval 完全一致，照抄即可）────
+ *  · markdown 字段的占位整串放 `props.content`，**不要放 `default`**：
+ *    markdown 渲染取 value||props.content，根本不读 default；放 default 会让
+ *    占位变成"字段值"，预览态 PreviewFR 的 watch 链每次重渲染会把 default 再
+ *    灌回去，盖掉 onMount 刚回填的值（表现：日志显示已赋值，UI 仍是占位）。
+ *  · 行内「label : value」用左右两列。label 是固定文案，仍用 markdown 写死；
+ *    value 才是要回填的字段。所以左 label 不需要 name，也不进 set_values 列表。
+ *  · 回填字段统一配 `title:`（与左列文案一致）+ `props.showTitle: false`：
+ *    title 给 schema 层留下「这字段的标签是什么」的元信息，showTitle:false 抑制
+ *    frCardFieldLabel 的纵向渲染，保留原版「左 label / 右 value」横向视觉。
+ *  · 提交统一用 body.mode='form'：整包送 { json:schema, value:全表值 }，避免
+ *    {{字段}} 在卡片模式下需要点号全路径的坑（见 card-submit-paradigm 备忘）。
+ *  · lockForm:true —— 提交在途锁整卡，防止用户连点。
+ *  · 原版的「先票后款 / 14 天 / 按年支付」从纯 `div` 改成 `markdown`：div 不是
+ *    表单组件，set_values 改不到它的 text；改 markdown 才能进 form state、被回填。
+ */
+export var feishuOrderConfirm = {
+  type: 'object',
+  widget: 'cardRoot',
+  style: {
+    padding: 0
+  },
+  props: {
+    template: 'orange',
+    padding: '12px 12px 12px 12px',
+    direction: 'vertical',
+    horizontalSpacing: '8px',
+    verticalSpacing: '16px',
+    updateMulti: true,
+    textSizeMode: 'normal_v2',
+    // ① 挂载：拉详情 → 一次性回填整卡 8 个展示字段。
+    //    含 api_request，cardRoot 自动给整卡盖 loading 蒙层，回填完撤掉。
+    onMount: [{
+      type: 'api_request',
+      value: {
+        url: '/api/order/detail',
+        method: 'GET'
+      },
+      onSuccess: [{
+        type: 'set_values',
+        value: [{
+          targetField: '#/Form_orderConfirm/OrderHeader',
+          sourceType: 'path',
+          sourcePath: 'data.OrderHeader'
+        }, {
+          targetField: '#/Form_orderConfirm/column_set_27/col_26/OrderItem1',
+          sourceType: 'path',
+          sourcePath: 'data.OrderItem1'
+        }, {
+          targetField: '#/Form_orderConfirm/column_set_27/col_26/OrderItem2',
+          sourceType: 'path',
+          sourcePath: 'data.OrderItem2'
+        }, {
+          targetField: '#/Form_orderConfirm/column_set_27/col_26/OrderItem3',
+          sourceType: 'path',
+          sourcePath: 'data.OrderItem3'
+        }, {
+          targetField: '#/Form_orderConfirm/column_set_27/col_26/row_amount/col_amount_v/OrderAmount',
+          sourceType: 'path',
+          sourcePath: 'data.OrderAmount'
+        }, {
+          targetField: '#/Form_orderConfirm/column_set_27/col_26/row_invoice/col_invoice_v/InvoiceSequence',
+          sourceType: 'path',
+          sourcePath: 'data.InvoiceSequence'
+        }, {
+          targetField: '#/Form_orderConfirm/column_set_27/col_26/row_term/col_term_v/PaymentTerm',
+          sourceType: 'path',
+          sourcePath: 'data.PaymentTerm'
+        }, {
+          targetField: '#/Form_orderConfirm/column_set_27/col_26/row_freq/col_freq_v/PaymentFrequency',
+          sourceType: 'path',
+          sourcePath: 'data.PaymentFrequency'
+        }, {
+          targetField: '#/Form_orderConfirm/column_set_32/col_31/TenantName',
+          sourceType: 'path',
+          sourcePath: 'data.TenantName'
+        }]
+      }],
+      onError: []
+    }]
+  },
+  properties: {
+    header: {
+      type: 'void',
+      widget: 'displayHeader',
+      props: {
+        title: {
+          tag: 'plain_text',
+          content: '您有订单待确认',
+          i18n_content: {
+            en_us: 'You Have an Order Pending Confirmation',
+            ja_jp: '注文確認待ち'
+          }
+        },
+        subtitle: {
+          tag: 'plain_text',
+          content: ''
+        },
+        template: 'orange',
+        padding: '12px 12px 12px 12px'
+      }
+    },
+    Form_orderConfirm: {
+      type: 'object',
+      widget: 'formContainer',
+      props: {
+        name: 'Form_orderConfirm',
+        direction: 'vertical',
+        horizontalSpacing: '8px',
+        verticalSpacing: '16px',
+        horizontalAlign: 'left',
+        verticalAlign: 'top',
+        padding: '0px 0px 0px 0px',
+        margin: '0px 0px 0px 0px'
+      },
+      properties: {
+        // ════ 顶部说明（含动态截止时间，回填）════
+        OrderHeader: {
+          title: '订单说明',
+          type: 'string',
+          widget: 'markdown',
+          props: {
+            // 整段是正文，不要在上面再套一行灰标签
+            showTitle: false,
+            content: '加载中…',
+            textAlign: 'left',
+            textSize: 'normal_v2',
+            margin: '0px 0px 0px 0px'
+          }
+        },
+        // ════ 订单详情区块（灰底卡） ════
+        column_set_27: {
+          type: 'object',
+          widget: 'columnSet',
+          props: {
+            backgroundStyle: 'grey-100',
+            horizontalSpacing: '8px',
+            horizontalAlign: 'left',
+            margin: '0px 0px 0px 0px',
+            style: {
+              flexDirection: 'row',
+              flexWrap: 'nowrap',
+              gap: '8px'
+            }
+          },
+          properties: {
+            col_26: {
+              type: 'object',
+              widget: 'column',
+              props: {
+                width: 'weighted',
+                padding: '8px 8px 8px 8px',
+                direction: 'vertical',
+                horizontalSpacing: '8px',
+                verticalSpacing: '8px',
+                horizontalAlign: 'left',
+                verticalAlign: 'top',
+                margin: '0px 0px 0px 0px',
+                weight: 1
+              },
+              properties: {
+                // ─── 订单条目 3 行（回填）───
+                OrderItem1: {
+                  title: '服务项 1',
+                  type: 'string',
+                  widget: 'markdown',
+                  props: {
+                    showTitle: false,
+                    content: '加载中…',
+                    textAlign: 'left',
+                    textSize: 'normal_v2',
+                    margin: '0px 0px 0px 0px'
+                  }
+                },
+                OrderItem2: {
+                  title: '服务项 2',
+                  type: 'string',
+                  widget: 'markdown',
+                  props: {
+                    showTitle: false,
+                    content: '加载中…',
+                    textAlign: 'left',
+                    textSize: 'normal_v2',
+                    margin: '0px 0px 0px 0px'
+                  }
+                },
+                OrderItem3: {
+                  title: '服务项 3（赠品）',
+                  type: 'string',
+                  widget: 'markdown',
+                  props: {
+                    showTitle: false,
+                    content: '加载中…',
+                    textAlign: 'left',
+                    textSize: 'normal_v2',
+                    margin: '0px 0px 0px 0px'
+                  }
+                },
+                hr_items: {
+                  type: 'string',
+                  widget: 'hr',
+                  props: {
+                    margin: '0px 0px 0px 0px'
+                  }
+                },
+                // ─── 订单金额 行 ───
+                row_amount: {
+                  type: 'object',
+                  widget: 'columnSet',
+                  props: {
+                    horizontalSpacing: '8px',
+                    horizontalAlign: 'left',
+                    margin: '0px 0px 0px 0px',
+                    style: {
+                      flexDirection: 'row',
+                      flexWrap: 'nowrap',
+                      gap: '8px'
+                    }
+                  },
+                  properties: {
+                    col_amount_l: {
+                      type: 'object',
+                      widget: 'column',
+                      props: {
+                        width: '72px',
+                        direction: 'vertical',
+                        verticalSpacing: '8px',
+                        horizontalAlign: 'left',
+                        verticalAlign: 'top'
+                      },
+                      properties: {
+                        label_amount: {
+                          type: 'string',
+                          widget: 'markdown',
+                          props: {
+                            content: '**订单金额**',
+                            textAlign: 'left',
+                            textSize: 'normal_v2',
+                            margin: '0px 0px 0px 0px'
+                          },
+                          default: '**订单金额**'
+                        }
+                      },
+                      style: {
+                        flex: '1 1 0%',
+                        width: 'auto',
+                        minWidth: 0
+                      }
+                    },
+                    col_amount_v: {
+                      type: 'object',
+                      widget: 'column',
+                      props: {
+                        width: 'auto',
+                        verticalSpacing: '8px',
+                        horizontalAlign: 'left',
+                        verticalAlign: 'top'
+                      },
+                      properties: {
+                        OrderAmount: {
+                          title: '订单金额',
+                          type: 'string',
+                          widget: 'markdown',
+                          props: {
+                            showTitle: false,
+                            content: '加载中…',
+                            textAlign: 'right',
+                            textSize: 'normal_v2',
+                            margin: '0px 0px 0px 0px'
+                          }
+                        }
+                      },
+                      style: {
+                        flex: '0 0 auto',
+                        width: 'auto'
+                      }
+                    }
+                  }
+                },
+                // ─── 票款顺序 行 ───
+                row_invoice: {
+                  type: 'object',
+                  widget: 'columnSet',
+                  props: {
+                    horizontalSpacing: '8px',
+                    horizontalAlign: 'left',
+                    margin: '0px 0px 0px 0px',
+                    style: {
+                      flexDirection: 'row',
+                      flexWrap: 'nowrap',
+                      gap: '8px'
+                    }
+                  },
+                  properties: {
+                    col_invoice_l: {
+                      type: 'object',
+                      widget: 'column',
+                      props: {
+                        width: '72px',
+                        direction: 'vertical',
+                        verticalSpacing: '8px',
+                        horizontalAlign: 'left',
+                        verticalAlign: 'top'
+                      },
+                      properties: {
+                        label_invoice: {
+                          type: 'string',
+                          widget: 'markdown',
+                          props: {
+                            content: '票款顺序',
+                            textAlign: 'left',
+                            textSize: 'normal_v2',
+                            margin: '0px 0px 0px 0px'
+                          },
+                          default: '票款顺序'
+                        }
+                      },
+                      style: {
+                        flex: '1 1 0%',
+                        width: 'auto',
+                        minWidth: 0
+                      }
+                    },
+                    col_invoice_v: {
+                      type: 'object',
+                      widget: 'column',
+                      props: {
+                        width: 'auto',
+                        verticalSpacing: '8px',
+                        horizontalAlign: 'left',
+                        verticalAlign: 'top'
+                      },
+                      properties: {
+                        InvoiceSequence: {
+                          title: '票款顺序',
+                          type: 'string',
+                          widget: 'markdown',
+                          props: {
+                            showTitle: false,
+                            content: '加载中…',
+                            textAlign: 'right',
+                            textSize: 'normal_v2',
+                            margin: '0px 0px 0px 0px'
+                          }
+                        }
+                      },
+                      style: {
+                        flex: '0 0 auto',
+                        width: 'auto'
+                      }
+                    }
+                  }
+                },
+                // ─── 支付账期 行 ───
+                row_term: {
+                  type: 'object',
+                  widget: 'columnSet',
+                  props: {
+                    horizontalSpacing: '8px',
+                    horizontalAlign: 'left',
+                    margin: '0px 0px 0px 0px',
+                    style: {
+                      flexDirection: 'row',
+                      flexWrap: 'nowrap',
+                      gap: '8px'
+                    }
+                  },
+                  properties: {
+                    col_term_l: {
+                      type: 'object',
+                      widget: 'column',
+                      props: {
+                        width: '72px',
+                        direction: 'vertical',
+                        verticalSpacing: '8px',
+                        horizontalAlign: 'left',
+                        verticalAlign: 'top'
+                      },
+                      properties: {
+                        label_term: {
+                          type: 'string',
+                          widget: 'markdown',
+                          props: {
+                            content: '支付账期',
+                            textAlign: 'left',
+                            textSize: 'normal_v2',
+                            margin: '0px 0px 0px 0px'
+                          },
+                          default: '支付账期'
+                        }
+                      },
+                      style: {
+                        flex: '1 1 0%',
+                        width: 'auto',
+                        minWidth: 0
+                      }
+                    },
+                    col_term_v: {
+                      type: 'object',
+                      widget: 'column',
+                      props: {
+                        width: 'auto',
+                        verticalSpacing: '8px',
+                        horizontalAlign: 'left',
+                        verticalAlign: 'top'
+                      },
+                      properties: {
+                        PaymentTerm: {
+                          title: '支付账期',
+                          type: 'string',
+                          widget: 'markdown',
+                          props: {
+                            showTitle: false,
+                            content: '加载中…',
+                            textAlign: 'right',
+                            textSize: 'normal_v2',
+                            margin: '0px 0px 0px 0px'
+                          }
+                        }
+                      },
+                      style: {
+                        flex: '0 0 auto',
+                        width: 'auto'
+                      }
+                    }
+                  }
+                },
+                // ─── 支付频率 行 ───
+                row_freq: {
+                  type: 'object',
+                  widget: 'columnSet',
+                  props: {
+                    horizontalSpacing: '8px',
+                    horizontalAlign: 'left',
+                    margin: '0px 0px 0px 0px',
+                    style: {
+                      flexDirection: 'row',
+                      flexWrap: 'nowrap',
+                      gap: '8px'
+                    }
+                  },
+                  properties: {
+                    col_freq_l: {
+                      type: 'object',
+                      widget: 'column',
+                      props: {
+                        width: '72px',
+                        direction: 'vertical',
+                        verticalSpacing: '8px',
+                        horizontalAlign: 'left',
+                        verticalAlign: 'top'
+                      },
+                      properties: {
+                        label_freq: {
+                          type: 'string',
+                          widget: 'markdown',
+                          props: {
+                            content: '支付频率',
+                            textAlign: 'left',
+                            textSize: 'normal_v2',
+                            margin: '0px 0px 0px 0px'
+                          },
+                          default: '支付频率'
+                        }
+                      },
+                      style: {
+                        flex: '1 1 0%',
+                        width: 'auto',
+                        minWidth: 0
+                      }
+                    },
+                    col_freq_v: {
+                      type: 'object',
+                      widget: 'column',
+                      props: {
+                        width: 'auto',
+                        verticalSpacing: '8px',
+                        horizontalAlign: 'left',
+                        verticalAlign: 'top'
+                      },
+                      properties: {
+                        PaymentFrequency: {
+                          title: '支付频率',
+                          type: 'string',
+                          widget: 'markdown',
+                          props: {
+                            showTitle: false,
+                            content: '加载中…',
+                            textAlign: 'right',
+                            textSize: 'normal_v2',
+                            margin: '0px 0px 0px 0px'
+                          }
+                        }
+                      },
+                      style: {
+                        flex: '0 0 auto',
+                        width: 'auto'
+                      }
+                    }
+                  }
+                }
+              },
+              style: {
+                flex: '1 1 0%',
+                width: 'auto',
+                minWidth: 0
+              }
+            }
+          }
+        },
+        // ════ 租户名称 行（左 label 固定 / 右 value 回填）════
+        column_set_32: {
+          type: 'object',
+          widget: 'columnSet',
+          props: {
+            horizontalSpacing: '8px',
+            horizontalAlign: 'left',
+            margin: '0px 0px 0px 0px',
+            style: {
+              flexDirection: 'row',
+              flexWrap: 'nowrap',
+              gap: '8px'
+            }
+          },
+          properties: {
+            col_29: {
+              type: 'object',
+              widget: 'column',
+              props: {
+                width: 'auto',
+                direction: 'vertical',
+                verticalSpacing: '8px',
+                horizontalAlign: 'left',
+                verticalAlign: 'top'
+              },
+              properties: {
+                label_tenant: {
+                  type: 'string',
+                  widget: 'markdown',
+                  props: {
+                    content: '租户名称：',
+                    textAlign: 'left',
+                    textSize: 'normal_v2',
+                    margin: '0px 0px 0px 0px'
+                  },
+                  default: '租户名称：'
+                }
+              },
+              style: {
+                flex: '0 0 auto',
+                width: 'auto'
+              }
+            },
+            col_31: {
+              type: 'object',
+              widget: 'column',
+              props: {
+                width: 'weighted',
+                weight: 1,
+                verticalSpacing: '8px',
+                horizontalAlign: 'left',
+                verticalAlign: 'top'
+              },
+              properties: {
+                TenantName: {
+                  title: '租户名称',
+                  type: 'string',
+                  widget: 'markdown',
+                  props: {
+                    showTitle: false,
+                    content: '加载中…',
+                    textAlign: 'left',
+                    textSize: 'normal_v2',
+                    margin: '0px 0px 0px 0px'
+                  }
+                }
+              },
+              style: {
+                flex: '1 1 0%',
+                width: 'auto',
+                minWidth: 0
+              }
+            }
+          }
+        },
+        // ════ 动作区：立即确认（form_submit + api_request 提交）════
+        column_set_37: {
+          type: 'object',
+          widget: 'columnSet',
+          props: {
+            horizontalSpacing: '8px',
+            horizontalAlign: 'left',
+            margin: '0px 0px 0px 0px',
+            style: {
+              flexDirection: 'row',
+              flexWrap: 'nowrap',
+              gap: '8px'
+            }
+          },
+          properties: {
+            col_34: {
+              type: 'object',
+              widget: 'column',
+              props: {
+                width: 'auto',
+                direction: 'vertical',
+                verticalSpacing: '8px',
+                horizontalAlign: 'left',
+                verticalAlign: 'center'
+              },
+              properties: {
+                confirmBtn: {
+                  type: 'string',
+                  widget: 'button',
+                  props: {
+                    text: {
+                      tag: 'plain_text',
+                      content: '立即确认',
+                      i18n_content: {
+                        ja_jp: 'すぐに確認',
+                        en_us: 'Confirm Now'
+                      }
+                    },
+                    type: 'primary_filled',
+                    width: 'default',
+                    size: 'medium',
+                    margin: '0px 0px 0px 0px',
+                    // 提交在途锁整卡，防误触/连点
+                    lockForm: true,
+                    // ② 确认链：先触发校验/onFinish，再发统一确认请求。
+                    //    body 用 mode='form' 整包送出 { json:schema, value:全表值 }
+                    behaviors: [{
+                      type: 'form_submit'
+                    }, {
+                      type: 'api_request',
+                      value: {
+                        url: '/api/order/confirm',
+                        method: 'POST',
+                        body: {
+                          mode: 'form'
+                        }
+                      },
+                      // 成功：后端重推「已确认」卡，前端不切态
+                      onSuccess: [],
+                      onError: []
+                    }],
+                    name: 'confirmBtn'
+                  }
+                }
+              },
+              style: {
+                flex: '0 0 auto',
+                width: 'auto'
+              }
+            },
+            col_36: {
+              type: 'object',
+              widget: 'column',
+              props: {
+                width: 'weighted',
+                weight: 1,
+                direction: 'vertical',
+                verticalSpacing: '8px',
+                horizontalAlign: 'left',
+                verticalAlign: 'center'
+              },
+              properties: {
+                tip_console: {
+                  type: 'string',
+                  widget: 'markdown',
+                  props: {
+                    content: '<font color="grey">点击前往 "管理后台>费用中心" 查看更多信息</font>',
+                    textAlign: 'left',
+                    textSize: 'notation',
+                    margin: '0px 0px 0px 0px'
+                  },
+                  default: '<font color="grey">点击前往 "管理后台>费用中心" 查看更多信息</font>'
+                }
+              },
+              style: {
+                flex: '1 1 0%',
+                width: 'auto',
+                minWidth: 0
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};