odoo打印新解

打印特定区域为 PDF(对话助手样式)

/* 打印区域(仿"上图格式") */

.print-area{

background:linear-gradient(180deg, var(--panel-2), var(--panel));

border:1px solid var(--border);

border-radius:16px;

padding:20px;

box-shadow:0 6px 24px rgba(0,0,0,.25);

}

.header{

display:flex;align-items:center;justify-content:space-between;gap:12px;

padding-bottom:16px;border-bottom:1px solid var(--border);

}

.title{

display:flex;align-items:center;gap:10px;

}

.title .logo{

width:36px;height:36px;border-radius:10px;background:#0d1320;border:1px solid var(--border);

display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--blue)

}

.title h1{margin:0;font-size:18px}

.title small{display:block;color:var(--subtext);font-weight:400}

.selects{display:flex;gap:12px;flex-wrap:wrap}

.select{

background:#0d1320;border:1px solid var(--border);color:var(--text);

padding:8px 10px;border-radius:10px;min-width:180px;

}

.tip{

margin:16px 0 20px;

background:rgba(43,124,255,.12);

border:1px solid rgba(43,124,255,.35);

color:#cfe0ff;

padding:12px 14px;border-radius:12px;

}

.section-title{

margin:10px 0 8px;font-size:15px;color:var(--subtext);

display:flex;align-items:center;gap:8px;

}

.section-title .dot{width:8px;height:8px;border-radius:999px;background:var(--blue)}

.history{

display:flex;flex-direction:column;gap:12px;

margin-top:8px;

}

.card{

background:#0e1423;

border:1px solid var(--border);

border-radius:14px;

padding:14px;

}

.card .meta{

display:flex;gap:10px;align-items:center;color:var(--subtext);font-size:12px;margin-bottom:6px;

}

.badge{

display:inline-flex;align-items:center;gap:6px;

font-size:12px;color:#d1e7ff;background:rgba(43,124,255,.15);

border:1px solid rgba(43,124,255,.35);

padding:4px 8px;border-radius:999px;

}

.qa{

display:grid;grid-template-columns: 92px 1fr;gap:10px;align-items:start;

}

.qa .tag{color:var(--subtext)}

.qa .content{white-space:pre-wrap}

.ok{color:var(--green)}

.kbd{

font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

background:#0b0f1a;border:1px solid var(--border);padding:2px 6px;border-radius:6px;

}

/* 非打印的说明与底栏 */

.hint{color:var(--subtext);margin-top:10px}

/* 打印样式:仅打印 .print-area */

@media print {

body{background:#fff}

body *{visibility:hidden}

.print-area, .print-area *{visibility:visible}

.print-area{position:absolute;inset:0;margin:0;border:none;border-radius:0;box-shadow:none}

.toolbar{display:none !important}

}
系统打印 下载 PDF
AI

AI 智能数据查询助手

智能聊天 · 5A助手专业对话
选择工作模式:智能模式 表格分析模式 SQL 模式 网络模式:本地模式 联网模式

复制代码
<div class="tip">
  示例:什么是 Odoo ERP 系统?如何管理销售订单?/ 库存管理的最佳实践...
</div>

<div class="section-title"><span class="dot"></span><span>对话历史</span></div>

<div class="history">
  <!-- 示例卡片 1 -->
  <div class="card">
    <div class="meta">
      <span class="badge">查询成功</span>
      <span>找到 <b>19</b> 条记录 · 2025-08-28 20:48</span>
    </div>
    <div class="qa">
      <div class="tag">👤 提问</div>
      <div class="content">金额大于 <span class="kbd">1000</span> 的销售订单</div>
      <div class="tag">🤖 分析</div>
      <div class="content">
        查询 <b>金额大于 1000</b> 的销售订单信息,包括订单号、客户、总金额、状态和日期;按金额降序。<br/>
        模型:<span class="kbd">sale.order</span>;条件:<span class="kbd">[['amount_total','&gt;',1000]]</span>
      </div>
    </div>
  </div>

  <!-- 示例卡片 2 -->
  <div class="card">
    <div class="meta">
      <span class="badge">查询成功</span>
      <span>找到 <b>47</b> 条记录 · 2025-08-28 20:49</span>
    </div>
    <div class="qa">
      <div class="tag">👤 提问</div>
      <div class="content">查看产品的销售价格和成本价</div>
      <div class="tag">🤖 分析</div>
      <div class="content">
        查询产品的销售价和成本价,包含产品编码、名称、价格和成本。<br/>
        模型:<span class="kbd">product.product</span>;条件:<span class="kbd">[]</span>
      </div>
    </div>
  </div>

  <!-- 示例卡片 3 -->
  <div class="card">
    <div class="meta">
      <span class="badge ok">已完成</span>
      <span>2025-08-28 20:50</span>
    </div>
    <div class="qa">
      <div class="tag">📄 结论</div>
      <div class="content">
        本次会话共执行 2 次查询,均返回有效结果。可导出明细或继续细化筛选条件。
      </div>
    </div>
  </div>
</div>

<div class="hint">提示:点击右上角「下载 PDF」仅导出此区域;或用浏览器「系统打印」。</div>

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/fb7534cd9509413e8b77d1dc5ff914f9.png#pic_center)

相关推荐
风舞38 分钟前
一文搞定JS所有类型判断最佳实践
前端·javascript
一树山茶1 小时前
uniapp在微信小程序中实现 SSE进行通信
前端·javascript
萌萌哒草头将军1 小时前
Rspack 1.5 版本更新速览!🚀🚀🚀
前端·javascript·vue.js
阿卡不卡1 小时前
基于多场景的通用单位转换功能实现
前端·javascript
♡喜欢做梦1 小时前
jQuery 从入门到实践:基础语法、事件与元素操作全解析
前端·javascript·jquery
酸菜土狗1 小时前
gitignor配置禁止上传文件目录到 Git
前端·javascript
纯JS甘特图_MZGantt1 小时前
五分钟搞定多视图甘特图!mzgantt的视图系统简直太强了
javascript
王六岁1 小时前
JavaScript 运算符的那些"坑"与技巧
前端·javascript
酸菜土狗1 小时前
nvm常用命令行操作
前端·javascript
前端搬运侠1 小时前
🚀 前端面试必刷!50道HTML+CSS高频面试题详解
css·html