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)

相关推荐
千码君20169 小时前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
暮之沧蓝10 小时前
Vue总结
前端·javascript·vue.js
木易 士心11 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
又是忙碌的一天11 小时前
前端学习day01
前端·学习·html
Joker Zxc11 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
excel11 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
不会算法的小灰12 小时前
HTML简单入门—— 基础标签与路径解析
前端·算法·html
zero13_小葵司12 小时前
在Vue项目中构建后端配置的动态路由及权限控制体系
前端·javascript·vue.js
GISer_Jing12 小时前
前端框架篇——Vue&React篇
前端·javascript
面向星辰12 小时前
css其他选择器(精细修饰)
前端·css