div中显示<script>...</script>标签内容并部分文字标红

最新推荐文章于 2022-12-03 20:15:41 发布
原创 最新推荐文章于 2022-12-03 20:15:41 发布 · 3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在网页中完整显示&lt;script&gt;标签内容的方法，利用&lt;xmp&gt;标签配合JavaScript或者直接使用转义字符并添加样式来实现目标文本的展示与标红。

这里写图片描述

以上为要求的具体实现效果……

  1. 显示<script>标签的div的设置：
    <xmp></xmp>标签可以控制完全显示标签之内的内容，包含标签全部显示为文本内容。
    这种情况下需要配合js进行目标内容的选取；而使用转义字符并在目标文本上加样式则直接达成目标，。
    这里写图片描述
  2. 准备使用js选中标签中的部分内容进行标红：
    这里写图片描述
    上图是失败尝试中的收获，第一种方法可以获取整个div中的内容，第二种则可以定向到目标文本，例如‘项目ID’。
利用 javascript 实现富文本编辑器
ItStar
11-22 6338
近期项目中需要开发一个兼容PC和移动端的富文本编辑器，其中包含了一些特殊的定制功能。考察了下现有的js富文本编辑器，桌面端的很多，移动端的几乎没有。桌面端以UEditor为代表。但是我们并不打算考虑兼容性，所以没有必要采用UEditor这么重的插件。为此决定自研一个富文本编辑器。本文，主要介绍如何实现富文本编辑器，和解决一些不同浏览器和设备之间的bug。 准备阶段 在现代浏览器
深入理解javascript中的富文本编辑
weixin_33943347的博客
09-19 249
前面的话 　　一说起富文本，人们第一印象就是像使用word一样，在网页上操作文档。实际上差不多就是这样。富文本编辑，又称为WYSIWYG (What You See Is What You Get所见即所得)，指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本编辑   方式 　　有两种编辑富文本的方式，一种是使用iframe元素，另一种是使用contentedi...
关于script标签在HTML页面放置的位置
热门推荐
weixin_45832482的博客
03-05 1万+
一般script标签会被放在头部或尾部，头部就是head标签里，尾部就是body里，也有放在body闭合标签之后。 1、script标签放在head标签内部 <head> <title>获取DOM元素</title> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script&g
【JavaScript】富文本编辑器UEditor与代码高亮插件SyntaxHighlighter整合，实现用户贴代码功能
编程记录，亲测有效
09-18 8797
在《【JavaScript】网页中对代码的处理，代码高亮插件SyntaxHighlighter》（点击打开链接）已经提及到，国内著名，完美兼容IE6的富文本编辑器UEditor已经自然整合代码高亮插件SyntaxHighlighter插件了，那么如何实现用户贴代码功能呢？ 值得注意的是，单纯的富文本编辑器UEditor写一段代码，是无法实现如代码高亮插件SyntaxHighlighter带行号、
script代码片段放在html里不会报错，复制粘贴到js里var，if，分号都红了。什么情况
wuwei1030688933的博客
12-03 147
js里面：各种红，第一次写js，不知道啥情况。有大哥知道吗。。
js 输入框新加的文字标红 原文字保持不变<div id="smartInput" contenteditable placeholder="在任意位置输入..."> </div>
最新发布
10-16
`<div id='smartInput' contenteditable placeholder='在任意位置输入...'></div>` 输入框中新添加的文字标红，而原文字保持不变，可以通过监听输入事件，记录原内容，对比新输入的内容，将新增部分用红色显示。...
<blocked>false</blocked>标红
04-03
如果在同一文件中有其他语法错误（如括号不匹配、分号遗漏等），可能导致解析中断，从而使后面的合法代码也被视为非法并标红。这种情况下需要逐行排查代码逻辑。 解决方法： 确保整个脚本没有其他潜在的语法问题。...
------------------------ test.html ------------------------ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>板材库存管理系统</title> <link rel="stylesheet" href="../js/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../js/bootstrap-icons-1.8.1/bootstrap-icons.css"> <link rel="stylesheet" href="../css/test.css"> </head> <body> <div class="container py-4"> <!-- 标题部分 --> <div class="text-center mb-4"> <h1 class="text-primary"><i class="bi bi-boxes"></i> 板材库存管理系统</h1> <p class="text-muted">查询订单、产品、板材及库存信息</p> </div> <!-- 统计卡片 --> <div class="row mb-4" id="statsCards"> <!-- 卡片内容由JS动态生成 --> </div> <!-- 搜索区域 --> <div class="card search-section mb-4"> <div class="card-header"> <h5 class="mb-0"><i class="bi bi-search me-2"></i>高级搜索</h5> </div> <div class="card-body"> <div class="row g-3"> <!-- 订单搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-clipboard-search search-icon"></i> <input type="text" class="form-control with-icon" id="orderSearch" placeholder="搜索订单号..." aria-label="订单号搜索"> </div> </div> <!-- 产品搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-grid search-icon"></i> <input type="text" class="form-control with-icon" id="productSearch" placeholder="搜索产品编号..." aria-label="产品编号搜索"> </div> </div> <!-- 板材搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-box search-icon"></i> <input type="text" class="form-control with-icon" id="materialSearch" placeholder="搜索板材ID或材质..." aria-label="板材搜索"> </div> </div> <!-- 木皮搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-tree search-icon"></i> <input type="text" class="form-control with-icon" id="woodSearch" placeholder="搜索木皮名称..." aria-label="木皮搜索"> </div> </div> <!-- 厚度搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-arrows-vertical search-icon"></i> <input type="number" class="form-control with-icon" id="thicknessSearch" placeholder="厚度(mm)" min="0" step="0.1"> </div> </div> <!-- 库存范围搜索 --> <div class="col-md-4"> <div class="input-group"> <span class="input-group-text"><i class="bi bi-box"></i></span> <input type="number" class="form-control" id="minStock" placeholder="最小库存" min="0"> <input type="number" class="form-control" id="maxStock" placeholder="最大库存" min="0"> <button class="btn btn-primary" type="button" id="stockStatusBtn"> <i class="bi bi-search"></i> </button> </div> </div> <!-- 高级搜索按钮 --> <div class="col-12 text-end"> <button class="btn btn-sm btn-outline-secondary" id="resetFilters"> <i class="bi bi-x-circle"></i> 重置筛选 </button> </div> </div> </div> </div> <!-- 结果区域 --> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <h5 class="mb-0"><i class="bi bi-table me-2"></i>查询结果</h5> <div class="text-secondary"> <span id="resultCount">0</span> 条记录 <span class="ms-2"><i class="bi bi-info-circle"></i> <small>数据更新时间: <span id="lastUpdate">--:--:--</span></small></span> </div> </div> <div class="card-body result-section"> <div class="table-responsive"> <table class="table table-hover" id="resultsTable"> <thead class="table-light sticky-top"> <tr> <th data-sort="dingdan.number">订单号 <span class="sort-indicator"></span></th> <th data-sort="chanpin.bianhao">产品信息 <span class="sort-indicator"></span></th> <th data-sort="dingdan_chanpin.shuliang">产品数量 <span class="sort-indicator"></span></th> <th data-sort="zujian.name">组件 <span class="sort-indicator"></span></th> <th data-sort="bancai.id">板材 <span class="sort-indicator"></span></th> <th data-sort="chanpin_zujian.one_howmany">单件用量 <span class="sort-indicator"></span></th> <th data-sort="orderUsage">订单用量 <span class="sort-indicator"></span></th> <th data-sort="kucun.shuliang">库存数量 <span class="sort-indicator"></span></th> <th>操作</th> </tr> </thead> <tbody id="resultBody"> <tr id="loadingRow"> <td colspan="9" class="text-center py-5"> <div class="d-flex align-items-center justify-content-center"> <div class="spinner-border text-primary" role="status"> <span class="visually-hidden">加载中...</span> </div> <div class="ms-3">正在加载数据，请稍候...</div> </div> </td> </tr> </tbody> </table> </div> <div id="noResults" class="no-results text-center py-5" style="display: none;"> <div> <i class="bi bi-inboxes text-muted" style="font-size: 3rem;"></i> <h4 class="mt-3 text-muted">没有找到匹配的记录</h4> <p class="text-muted">请尝试调整您的搜索条件</p> </div> </div> <!-- 分页控件 --> <nav aria-label="Results pagination" class="mt-3"> <ul class="pagination justify-content-center" id="pagination"> <!-- 分页由JS动态生成 --> </ul> </nav> </div> </div> </div> <!-- 模态框 - 板材详情 --> <div class="modal fade" id="materialDetailModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">板材详情</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" id="materialDetailContent"> <!-- 详情内容由JS动态生成 --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="../js/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script> <script src="../js/dingdan.js"></script> </body> </html> ------------------------ DataManager.js ------------------------ //这个函数不许改，也禁止废话,属性名和其他命名都哼规范不会出现意外， function resolveDataReferences(data) { console.log(data) // 获取 data 对象的所有顶层键 const keys = Object.keys(data); // 遍历每个顶层键（如 users, posts 等） for (const key of keys) { const entities = data[key]; // 遍历该顶层键下的每个实体（如每个 user 或 post） for (const entity of entities) { // 遍历实体的每个属性 for (const attribute in entity) { if (entity?.hasOwnProperty(attribute)) { var trpe=attribute?.replace(/\d/g, ''); // 确保属性属于当前实体 if (Array.isArray(entity[attribute])) { if(data[trpe]==null){ trpe+="s" } // 如果属性是一个数组，则将数组中的每个 ID 替换为对应的实际对象 entity[attribute] = entity[attribute].map(item => data[trpe ]?.find(updateItem => updateItem.id === item.id) || item ); } else if (typeof entity[attribute] === "object" && entity[attribute] !== null) { // 如果属性是一个对象，则将其替换为对应的实际对象 entity[attribute] = data[trpe + "s"]?.find(updateItem => updateItem.id === entity[attribute].id); } } } } } return data; } /** * 数据管理器类，负责与后端API通信并管理数据 */ class DataManager { constructor(baseUrl) { this.baseUrl = baseUrl; this.data = { bancais: [], dingdans: [], mupis: [], chanpins: [], kucuns: [], dingdan_bancais:[], chanpin_zujians: [], zujians: [], caizhis: [], dingdan_chanpins: [], users: [], jinhuos: [] }; this.isSyncing = false; this.lastSync = null; this.callbacks = { all: [], bancais: [], dingdan: [], mupi: [], chanpin: [], kucun: [], chanpin_zujian: [], dingdan_bancai:[], zujian: [], caizhi: [], dingdan_chanpin: [], user: [], jinhuo: [] }; this.syncQueue = Promise.resolve(); this.registerCallback('dingdan_bancai', async (operation, data) => { if (operation === 'add' || operation === 'update') { try { // 构造进货记录数据 const jinhuoData = { dingdan_bancai:data, shuliang: data.shuliang, date: new Date().toISOString(), user: { id: localStorage.getItem("userId") } }; // 创建进货记录 await this.addEntity('jinhuo', jinhuoData); } catch (error) { console.error('进货记录创建失败:', error); } } }); } /** * 获取所有数据 * @returns {Promise<boolean>} 是否成功 */ async fetchAll() { console.log(this) try { const response = await fetch(`${this.baseUrl}/app/all`); if (!response.ok) throw new Error('Network response was not ok'); const result = await response.json(); if (result.status !== 200) throw new Error(result.text || 'API error'); console.log(result.data) const resolvedData = resolveDataReferences(result.data); // 更新本地数据 Object.keys(this.data).forEach(key => { if (resolvedData[key]) { this.data[key] = resolvedData[key]; } }); this.lastSync = new Date(); // 关键改进：数据更新后触发刷新回调 this.triggerCallbacks('refresh', 'all', this.data); return true; } catch (error) { console.error('Fetch error:', error); // 触发错误回调 this.triggerCallbacks('fetch_error', 'all', { error }); return false; } } /** * 注册回调函数 * @param {string} entity - 实体类型（如'bancai'）或'all'表示全局回调 * @param {Function} callback - 回调函数，参数为(operation, data) */ registerCallback(entity, callback) { if (!this.callbacks[entity]) { this.callbacks[entity] = []; } this.callbacks[entity].push(callback); } /** * 移除回调函数 * @param {string} entity - 实体类型单数性质 * @param {Function} callback - 要移除的回调函数 */ unregisterCallback(entity, callback) { if (!this.callbacks[entity]) return; const index = this.callbacks[entity].indexOf(callback); if (index !== -1) { this.callbacks[entity].splice(index, 1); } } /** * 触发回调 * @param {string} operation - 操作类型（'add', 'update', 'delete'） * @param {string} entity - 实体类型单数性质 * @param {Object} data - 相关数据 */ triggerCallbacks(operation, entity, data) { // 触发全局回调 this.callbacks.all.forEach(cb => cb(operation, entity, data)); // 触发特定实体回调 if (this.callbacks[entity]) { this.callbacks[entity].forEach(cb => cb(operation, data)); } } // /** // * 执行CRUD操作并触发回调 // */ // async crudOperation(operation, entity, data) { // try { // const response = await fetch(`${this.baseUrl}/app/${operation}/${entity}`, { // method: 'POST', // headers: {'Content-Type': 'application/json'}, // body: JSON.stringify(data) // }); // // if (!response.ok) throw new Error('Network response was not ok'); // // const result = await response.json(); // if (result.status !== 200) throw new Error(result.text || 'API error'); // // // // // 自动同步数据 // this.syncData(); // // 触发操作成功的回调 // this.triggerCallbacks(operation, entity, data); // return result; // } catch (error) { // console.error('CRUD error:', error); // // 触发操作失败的回调 // this.triggerCallbacks(`${operation}_error`, entity, { // data, // error: error.message // }); // throw error; // } // } /** * 执行CRUD操作 * @param {string} operation - 'add', 'delete', 'update' * @param {string} entity - 实体名称单数性质（小写） * @param {Object} data - 要发送的数据 后端要求数据格式为{属性: "值", 关联对象: {id:0}, 关联对象集: [{id:0}]} * @returns {Promise<Object>} 响应结果 */ async crudOperation(operation, entity, data) { try { const response = await fetch(`${this.baseUrl}/app/${operation}/${entity}`, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) }); if (!response.ok) throw new Error('Network response was not ok'); const result = await response.json(); if (result.status !== 200) throw new Error(result.text || 'API error'); console.log(data)//这了就没有id了 // 自动同步数据 this.syncQueue = this.syncQueue.then(async () => { await this.syncData(); // 同步完成后触发操作回调 this.triggerCallbacks(operation, entity, result.data); }); return result; } catch (error) { console.error('CRUD error:', error); // 触发操作失败的回调 this.triggerCallbacks(`${operation}_error`, entity, { data, error: error.message }); throw error; } } /** * 自动同步数据（防止频繁请求） */ async syncData() { if (this.isSyncing) { this.pendingSync = true; return; } this.isSyncing = true; try { await this.fetchAll(); } catch (error) { console.error('Sync failed:', error); } finally { this.isSyncing = false; // 处理等待中的同步请求 if (this.pendingSync) { this.pendingSync = false; setTimeout(() => this.syncData(), 1000); } } } /** * 添加实体 * @param {string} entity - 实体名称单数性质 * @param {Object} data - 实体数据 */ async addEntity(entity, data) { return this.crudOperation('add', entity, data); } /** * 更新实体 * @param {string} entity - 实体名称单数性质 * @param {Object} data - 实体数据（必须包含id） */ async updateEntity(entity, data) { return this.crudOperation('update', entity, data); } /** * 删除实体 * @param {string} entity - 实体名称单数性质 * @param {number} id - 实体ID */ async deleteEntity(entity, id) { return this.crudOperation('delete', entity, {id}); } /** * 新增方法：手动触发数据刷新 */ async refreshData() { return this.syncQueue = this.syncQueue.then(() => this.syncData()); } /** * 获取订单的可用板材信息 * @param {number} dingdanId - 订单ID * @returns {Object} 可用板材信息 */ getAvailableBancaisForOrder(dingdanId) { const dingdan = this.data.dingdans.find(d => d.id == dingdanId); if (!dingdan) return {}; return dingdan.availableBancais || {}; } /** * 获取产品的组件列表 * @param {number} chanpinId - 产品ID * @returns {Array} 组件列表 */ getZujiansForChanpin(chanpinId) { const chanpin = this.data.chanpins.find(c => c.id == chanpinId); if (!chanpin) return []; return (chanpin.chanpin_zujian_list || []) .map(cz => cz.zujian) .filter(z => z); } /** * 获取组件的板材信息 * @param {number} zujianId - 组件ID * @returns {Array} 板材列表 */ getBancaisForZujian(zujianId) { return (this.data.chanpin_zujians || []) .filter(cz => cz.zujian && cz.zujian.id == zujianId) .map(cz => cz.bancai) .filter(b => b); } /** * 创建进货记录 * @param {Object} jinhuoData - 进货数据 * @returns {Promise} 操作结果 */ async createJinhuo(jinhuoData) { return this.addEntity('jinhuo', jinhuoData); } /** * 获取订单列表 * @returns {Array} 订单列表 */ getDingdans() { return this.data.dingdans || []; } /** * 获取订单的产品列表 * @param {number} dingdanId - 订单ID * @returns {Array} 产品列表 */ getChanpinsForDingdan(dingdanId) { const dingdan = this.data.dingdans.find(d => d.id == dingdanId); if (!dingdan) return []; return (dingdan.dingdan_chanpin_list || []) .map(dc => dc.chanpin) .filter(c => c); } } export { DataManager }; // 创建单例实例 //const dataManager = new DataManager('http://127.0.0.1:8080/KuCun2'); //// 初始化时获取所有数据 //dataManager.fetchAll().then(() => { // console.log('Initial data loaded'); //}); // 导出数据对象，外部可以直接访问 data.bancais, data.dingdans 等 //export const data = dataManager.data; //// 导出操作方法 //export const addEntity = dataManager.addEntity.bind(dataManager); //export const updateEntity = dataManager.updateEntity.bind(dataManager); //export const deleteEntity = dataManager.deleteEntity.bind(dataManager); //export const fetchAll = dataManager.fetchAll.bind(dataManager); ------------------------ test.js ------------------------ // 创建DataManager实例 // 获取全局的DataManager实例 const dataManager = window.parent.dataManager; // 扁平化数据结构 function flattenData(data) { const result = []; // 遍历所有订单 data.dingdans.forEach(dingdan => { // 遍历订单中的产品 dingdan.dingdan_chanpin?.forEach(dc => { const chanpin = dc.chanpin; // 遍历产品中的组件 chanpin.chanpin_zujian.forEach(cz => { const zujian = cz.zujian; const bancai = cz.bancai; const kucun = bancai.kucun; // 计算订单用量 = 产品数量 × 组件数量 × 单件用量 const orderUsage = dc.shuliang * cz.zujianshu * cz.one_howmany; // 创建扁平化数据对象 result.push({ dingdan: dingdan, dingdan_chanpin: dc, chanpin: chanpin, chanpin_zujian: cz, zujian: zujian, bancai: bancai, kucun: kucun, orderUsage: orderUsage }); }); }); }); return result; } // 更新统计卡片 function updateStatistics(data) { // 订单总数 $('#orderCount').text(data.dingdans.length); // 产品种类 $('#productCount').text(data.chanpins.length); // 板材种类 $('#materialCount').text(data.bancais.length); // 库存总量 const totalStock = data.kucuns.reduce((sum, kucun) => sum + kucun.shuliang, 0); $('#totalStock').text(totalStock); } // 渲染表格 function renderTable(dataArray) { const $tbody = $('#resultBody'); $tbody.empty(); if (dataArray.length === 0) { $('#noResults').show(); $('#resultCount').text('0'); return; } $('#noResults').hide(); $('#resultCount').text(dataArray.length); dataArray.forEach(item => { const bancai = item.bancai; const dingdan = item.dingdan; const chanpin = item.chanpin; const zujian = item.zujian; const kucun = item.kucun; const row = ` <tr> <td>${dingdan.number}</td> <td>${chanpin.bianhao}</td> <td>${item.dingdan_chanpin.shuliang}</td> <td>${zujian.name}</td> <td> <div>ID: ${bancai.id}</div> <div>材质: ${bancai.caizhi.name}</div> <div>厚度: ${bancai.houdu}mm</div> <div>木皮1: ${bancai.mupi1.name}${bancai.mupi1.you ? '(油漆)' : ''}</div> <div>木皮2: ${bancai.mupi2.name}${bancai.mupi2.you ? '(油漆)' : ''}</div> </td> <td>${item.chanpin_zujian.one_howmany}</td> <td>${item.orderUsage.toFixed(2)}</td> <td class="${kucun.shuliang < item.orderUsage ? 'text-danger fw-bold' : ''}"> ${kucun.shuliang} </td> <td> <button class="btn btn-sm btn-outline-primary view-detail" data-bancai-id="${bancai.id}"> <i class="bi bi-info-circle"></i> 详情 </button> </td> </tr> `; $tbody.append(row); }); // 绑定详情按钮事件 $('.view-detail').off('click').on('click', function() { const bancaiId = $(this).data('bancai-id'); viewBancaiDetail(bancaiId); }); } // 查看板材详情 function viewBancaiDetail(bancaiId) { const bancai = dataManager.data.bancais.find(b => b.id === bancaiId); if (!bancai) return; const kucun = bancai.kucun; const reservedOrder = kucun.reservedOrder ? kucun.reservedOrder.number : '无'; // 构建详情内容 const detailContent = ` <div class="bancai-detail"> <h5 class="mb-3">板材详情 #${bancai.id}</h5> <div class="row"> <div class="col-md-6"> <div class="mb-2"><strong>材质:</strong> ${bancai.caizhi.name}</div> <div class="mb-2"><strong>厚度:</strong> ${bancai.houdu}mm</div> <div class="mb-2"><strong>木皮1:</strong> ${bancai.mupi1.name}${bancai.mupi1.you ? ' (油漆)' : ''}</div> <div class="mb-2"><strong>木皮2:</strong> ${bancai.mupi2.name}${bancai.mupi2.you ? ' (油漆)' : ''}</div> </div> <div class="col-md-6"> <div class="mb-2"><strong>当前库存:</strong> ${kucun.shuliang}</div> <div class="mb-2"><strong>预定订单:</strong> ${reservedOrder}</div> <div class="mb-2"><strong>库存状态:</strong> <span class="badge ${kucun.shuliang > 50 ? 'bg-success' : kucun.shuliang > 10 ? 'bg-warning' : 'bg-danger'}"> ${kucun.shuliang > 50 ? '充足' : kucun.shuliang > 10 ? '正常' : '不足'} </span> </div> </div> </div> <h6 class="mt-4 border-top pt-3">使用此板材的产品组件</h6> <ul class="list-group"> ${dataManager.data.chanpin_zujians .filter(cz => cz.bancai.id === bancaiId) .map(cz => `<li class="list-group-item">${cz.zujian.name} (产品: ${cz.chanpin.bianhao})</li>`) .join('')} </ul> </div> `; // 使用模态框显示详情 const modal = new bootstrap.Modal(document.getElementById('detailModal')); $('#detailModal .modal-body').html(detailContent); modal.show(); } // 搜索和过滤数据 function filterData(flatData) { const orderSearch = $('#orderSearch').val().toLowerCase(); const productSearch = $('#productSearch').val().toLowerCase(); const materialSearch = $('#materialSearch').val().toLowerCase(); const woodSearch = $('#woodSearch').val().toLowerCase(); const thickness = parseFloat($('#thicknessSearch').val()); const minStock = parseInt($('#minStock').val()) || 0; const maxStock = parseInt($('#maxStock').val()) || Infinity; return flatData.filter(item => { const bancai = item.bancai; const dingdan = item.dingdan; const chanpin = item.chanpin; const kucun = item.kucun; // 订单号搜索 if (orderSearch && !dingdan.number.toLowerCase().includes(orderSearch)) { return false; } // 产品编号搜索 if (productSearch && !chanpin.bianhao.toLowerCase().includes(productSearch)) { return false; } // 板材ID或材质搜索 if (materialSearch && !(bancai.id.toString().includes(materialSearch) || bancai.caizhi.name.toLowerCase().includes(materialSearch))) { return false; } // 木皮搜索 if (woodSearch && !(bancai.mupi1.name.toLowerCase().includes(woodSearch) || bancai.mupi2.name.toLowerCase().includes(woodSearch))) { return false; } // 厚度过滤 if (!isNaN(thickness) && Math.abs(bancai.houdu - thickness) > 0.1) { return false; } // 库存范围过滤 if (kucun.shuliang < minStock || kucun.shuliang > maxStock) { return false; } return true; }); } // 初始化排序功能 function initSorting() { let currentSort = { column: null, direction: 'asc' }; $('th[data-sortable]').on('click', function() { const column = $(this).index(); const $sortIndicator = $(this).find('.sort-indicator'); // 重置其他列的排序指示器 $('.sort-indicator').html(''); // 更新当前排序状态 if (currentSort.column === column) { currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc'; } else { currentSort.column = column; currentSort.direction = 'asc'; } // 更新排序指示器 $sortIndicator.html(currentSort.direction === 'asc' ? '↑' : '↓'); // 执行排序 sortTable(currentSort); }); } // 排序表格数据 function sortTable(sortConfig) { const flatData = window.currentFlatData || []; if (flatData.length === 0) return; flatData.sort((a, b) => { let valueA, valueB; switch (sortConfig.column) { case 0: // 订单号 valueA = a.dingdan.number; valueB = b.dingdan.number; break; case 1: // 产品信息 valueA = a.chanpin.bianhao; valueB = b.chanpin.bianhao; break; case 2: // 产品数量 valueA = a.dingdan_chanpin.shuliang; valueB = b.dingdan_chanpin.shuliang; break; case 3: // 组件 valueA = a.zujian.name; valueB = b.zujian.name; break; case 4: // 板材 valueA = a.bancai.id; valueB = b.bancai.id; break; case 5: // 单件用量 valueA = a.chanpin_zujian.one_howmany; valueB = b.chanpin_zujian.one_howmany; break; case 6: // 订单用量 valueA = a.orderUsage; valueB = b.orderUsage; break; case 7: // 库存数量 valueA = a.kucun.shuliang; valueB = b.kucun.shuliang; break; default: return 0; } // 数字排序 if (typeof valueA === 'number') { return sortConfig.direction === 'asc' ? valueA - valueB : valueB - valueA; } // 字符串排序 if (typeof valueA === 'string') { return sortConfig.direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA); } return 0; }); // 重新渲染排序后的表格 renderTable(flatData); } // 初始化页面 $(document).ready(async function() { // 创建详情模态框（如果不存在） if (!$('#detailModal').length) { $('body').append(` <div class="modal fade" id="detailModal" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">板材详情</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button> </div> </div> </div> </div> `); } // 显示加载状态 $('#loadingRow').show(); $('#noResults').hide(); try { // 加载数据 await dataManager.fetchAll(); // 更新最后更新时间 $('#lastUpdate').text(new Date().toLocaleTimeString()); // 扁平化数据 const flatData = flattenData(dataManager.data); window.currentFlatData = flatData; // 保存当前数据用于排序 // 更新统计卡片 updateStatistics(dataManager.data); // 渲染表格 renderTable(flatData); // 初始化排序 initSorting(); } catch (error) { console.error('初始化失败:', error); $('#resultBody').html(` <tr> <td colspan="9" class="text-center text-danger py-5"> <i class="bi bi-exclamation-circle fs-1"></i> <h4 class="mt-3">数据加载失败</h4> <p>${error.message || '请检查网络连接后重试'}</p> <button class="btn btn-primary mt-2" id="retryBtn">重试</button> </td> </tr> `); $('#retryBtn').on('click', function() { location.reload(); }); } finally { $('#loadingRow').hide(); } // 绑定搜索事件 $('#orderSearch, #productSearch, #materialSearch, #woodSearch, #thicknessSearch, #minStock, #maxStock').on('input', function() { performSearch(); }); $('#stockStatusBtn').on('click', performSearch); }); // 执行搜索 function performSearch() { if (!window.currentFlatData) return; const filteredData = filterData(window.currentFlatData); renderTable(filteredData); } 修改test.js实现页面功能 基本逻辑 一个订单有很多产品不同数量，每个产品可以再很多订单中，一个产品有很多组件，一个组件可以在很多产品中，因为每个组件因为在不同的产品中有不同的生产工艺，所以使用不同的板材和板材能生产组件数量，每个板材有不同的材质和两面木皮，木皮表面可能有油漆， 订购时可能直接购入板材，也可能按订单和产品订购板材，也用可能按订单产品组件订购板材，每次采购不标准，一个订单可能订购几次，用户有姓名 账号 密码 权限， 一个记录进货和消耗，查看的时候会查看订单下有多少板材可用
06-25
-新增一列：<thdata-sort="totalOrderUsage">订单总用量<spanclass="sort-indicator"></span></th>-在表格行中增加：<td>${item.totalOrderUsage.toFixed(2)}</td>-然后修改库存数量的显示：用库存和订单总用量比较...
vue前端展示了检索的的requirement列表后，通过点击查看主页查看详细requirement信息，然后点击返回后为什么检索列表为空了，以下为详细代码 <!-- --> <template> <div> <div class="tagdiv"> <!-- <el-tag v-for="tag in tags" :key="tag.label" :hit="true" type="success" style="margin-left:5px;margin-bottom:4px" size="small" @close="tagclose(tag)" closable>{{tag.value}}</el-tag> --> </div> <div class="inputdiv"> <!-- @keyup.enter.native="inputchange" --> <!-- 回车增加标签 --> <el-input v-model="selectvalue" style="width:500px;text-align:right" size="small" @keyup.enter.native="easySelect" :placeholder="inputplaceholder"> <el-select v-model="selectchange" placeholder="检索方向" slot="prepend" @change="dropdownchange" class="selectchange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-input> <el-tooltip effect="light" content="搜索" placement="top"> <el-button icon="el-icon-search" style="margin-left:5px" size="small" @click="easySelect" circle></el-button> </el-tooltip> <a href="#" target="_self" rel="noopener noreferrer" style="font-size:90%;margin-left:1%;" @click="highselect = true">高级检索</a> <a href="#" target="_self" rel="noopener noreferrer" style="font-size:90%;margin-left:1%;" @click="resetdata">重置</a> </div> <!-- 搜索结果条数 --> <div style="margin-top:0.5%;margin-bottom:1%;font-size:85%;"> 搜索结果 <span style="margin-left:1%;margin-right:1%;color:green;"> {{count}} </span> 条 <span style="color:rgba(36, 36, 196, 0.925)">{{title}}</span> </div> <!-- 表格 --> <el-table id="el-table" :data="tableData" border max-height="500" :header-cell-class-name="headerRow" :cell-class-name="cellClass" :row-style="{height:'40px'}" :cell-style="{padding:'7px 0'}"> <el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" class="demo-table-expand"> <el-form-item label="需求时间："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.requirementtime"></span> </el-form-item> <el-form-item label="需求背景："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.requirementbackground"></span> </el-form-item> <el-form-item label="需求内容："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.requirementcontents"></span> </el-form-item> <el-form-item label="需求描述："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.requirementdescribe"></span> </el-form-item> <el-form-item label="允收标准："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.acceptstandard"></span> </el-form-item> <el-form-item label="技术寻源："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.technicalsource"></span> </el-form-item> </el-form> </template> </el-table-column> <el-table-column prop="id" label="ID" width="50" align="center"> </el-table-column> <!-- <el-table-column prop="achievements" label="科研成果" width="100" align="center"> </el-table-column> --> <el-table-column prop="requirement" label="需求名称" width="300" align="center"> <template slot-scope="props"> <span v-html="props.row.requirement"></span> </template> </el-table-column> <el-table-column prop="department" label="需求组织" width="200" align="center"> <template slot-scope="props"> <span v-html="props.row.department"></span> </template> </el-table-column> <!-- <el-table-column prop="researchdirector" label="研究方向" width="250" align="center"> </el-table-column> --> <el-table-column prop="liaisonman" label="需求联系人" width="150" align="center"> <template slot-scope="props"> <span v-html="props.row.liaisonman"></span> </template> </el-table-column> <el-table-column prop="telphone" label="联系方式" width="150" align="center"> </el-table-column> <el-table-column prop="technicalfield" label="技术领域/关键词" align="center"> <template slot-scope="props"> <span v-html="props.row.technicalfield"></span> </template> </el-table-column> <el-table-column prop="budget" label="预算" width="150" align="center"> </el-table-column> <el-table-column prop="requirementtime" label="需求提出时间" width="200" align="center"> </el-table-column> <!-- <el-table-column prop="technicalsource" label="技术寻源" align="center"> </el-table-column> --> <!-- <el-table-column prop="cooperation" label="是否合作" width="120" align="center"> <template slot-scope="props"> <span> {{props.row.iscooperated === 0 ? '否':'是'}} </span> </template> </el-table-column> --> <el-table-column label="操作" width="130" align="center"> <template slot-scope="scope"> <el-button type="primary" size="mini" icon="el-icon-user" style="margin-left:10px" @click="gotorequirementinfo(scope.$index, scope.row)" slot="reference">查看主页</el-button> </template> </el-table-column> </el-table> <!-- 分页插件 --> <el-pagination style="right:45%;position:absolute;margin-top:1%" background layout="prev, pager, next,jumper" :page-size="7" @current-change="pageChange" :current-page.sync="currentPage" :total="page"> </el-pagination> <!-- 高级搜索选项 --> <el-dialog title="高级搜索" :visible.sync="highselect" width="35%" :close-on-click-modal="false" center> <span style="font-size:100%;font-weight:bold;">需求名称：</span> <el-autocomplete popper-class="my-autocomplete" v-model="highselectvalue.requirement" size="small" style="width:220px" placeholder="需求名称" @keyup.enter.native="highselectfunction" id="requirement"> <template slot-scope="{ item }"> <div class="name">{{ item.value }}</div> </template> </el-autocomplete> <br><br> <span style="font-size:100%;font-weight:bold">需求组织：</span> <el-autocomplete popper-class="my-autocomplete" v-model="highselectvalue.department" :fetch-suggestions="querySearch" size="small" style="width:220px" placeholder="中心/部门/科室" @keyup.enter.native="highselectfunction" id="department"> <template slot-scope="{ item }"> <div class="name">{{ item.value }}</div> </template> </el-autocomplete> <br><br> <span style="font-size:100%;font-weight:bold">需求联系人：</span> <el-input class="inputnormal" size="small" style="width:320px;" placeholder="需求联系人" @keyup.enter.native="highselectfunction" v-model="highselectvalue.liaisonman"> </el-input> <br><br> <span style="font-size:100%;font-weight:bold">需求类型：</span> <el-input class="inputnormal" size="small" style="width:320px;" placeholder="需求类型" @keyup.enter.native="highselectfunction" v-model="highselectvalue.requirementtype"> </el-input> <br><br> <span style="font-size:100%;font-weight:bold">需求方向：</span> <el-input class="inputnormal" size="small" style="width:320px;" placeholder="需求方向搜索项" @keyup.enter.native="highselectfunction" v-model="highselectvalue.requirementcontents"> </el-input> <span slot="footer" class="dialog-footer"> <el-button @click="highselect = false" size="mini">取 消</el-button> <el-button type="primary" @click="highselectfunction()" size="mini">检索</el-button> </span> </el-dialog> </div> </template> <script> import { request } from "../../network/request"; import router from '../../router'; export default { name: 'requirementview', data () { return { options: [ { label: '需求名称', value: '需求名称' }, { label: '需求组织', value: '需求组织' }, { label: '需求联系人', value: '需求联系人' }, { label: '需求类型', value: '需求类型' }, { label: '需求方向', value: '需求方向' }, ], selectchange: '需求名称', selectFieldType: 'requirement', selectvalue: '', inputplaceholder: '请输入搜索需求名称内容,内容不能为空', tags: [], highselect: false, highselectvalue: { requirement: '', department: '', liaisonman: '', requirementtype: '', requirementcontents: '' }, requirementinfoList: [], tableData: [], count: 0, page: 1, title: '', selectDirecat: '需求名称', departments: [], currentPage: 1, show: false, } }, methods: { headerRow (row, column, rowIndex, columnIndex) { return 'headerRow'; }, cellClass (row, column, rowIndex, columnIndex) { return 'cellClass'; }, createFilter (queryString) { return (labelValue) => { return (labelValue.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0); }; }, // 需求组织的输入建议 querySearch (queryString, cb) { var departments = this.departments; var results = queryString ? departments.filter(this.createFilter(queryString)) : departments; // 调用 callback 返回建议列表的数据 cb(results); }, // querydepartments (queryString, cb) { // let department = []; // for (let i = 0; i < this.departments.length; i++) { // let label = this.departments[i].label // if (this.highselectvalue.department === label) { // department = this.departments[i].labels; // break; // } // } // if (department.length === 0) department = [{ 'value': '无匹配输入建议' }] // var results = queryString ? department.filter(this.createFilter(queryString)) : department; // clearTimeout(this.timeout); // this.timeout = setTimeout(() => { // cb(results); // }, 1000 * Math.random()); // }, //获得组织信息 loadAll () { let config = { url: '/requirement/requirementinfo/department', method: 'post', } request(config).then( res => { this.departments = res.data.data[0]; }, ).catch( err => { this.$message({ showClose: true, message: "获取需求组织失败", type: "error" }); } ) }, dropdownchange (value) { this.tags = []; this.inputplaceholder = "请输入搜索" + value + "内容,内容不能为空"; //搜索方向 - 后台 FieldType switch (value) { case "需求名称": this.selectFieldType = 'requirement'; this.selectDirecat = '需求名称'; break; case "需求组织": this.selectFieldType = 'department'; this.selectDirecat = '需求组织'; break; case "需求联系人": this.selectFieldType = 'liaisonman'; this.selectDirecat = '需求联系人'; break; case "需求类型": this.selectFieldType = 'requirementtype'; this.selectDirecat = '需求类型'; break; case "需求方向": this.selectFieldType = 'requirementcontents'; this.selectDirecat = '需求方向'; break; } }, inputchange () { let tagtemp = { label: this.selectvalue, value: this.selectvalue }; this.tags.push(tagtemp); this.selectvalue = ''; }, //tag删除功能 tagclose (tag) { this.tags.splice(this.tags.indexOf(tag), 1); }, resetdata () { Object.assign(this.$data.highselectvalue, this.$options.data().highselectvalue).assign; // Object.assign(this.$data.selectvalue, this.$options.data().selectvalue); this.selectvalue = ''; this.selectFieldType = 'requirement'; this.selectchange = '需求名称'; this.selectDirecat = '需求名称'; }, //高级搜索功能 highselectfunction () { if (this.highselectvalue.requirement == '' && this.highselectvalue.department == '' && this.highselectvalue.liaisonman == '' && this.highselectvalue.requirementcontents == '' && this.highselectvalue.requirementtype == '' ) { this.highselect = false; return; } let config = { url: "/requirement/select/highselect", method: "get", params: this.highselectvalue } request(config).then( res => { this.requirementinfoList = res.data.list; this.tableData = this.requirementinfoList[0]; this.count = res.data.data.count; this.page = res.data.data.count; this.currentPage = 1; this.highselect = false; this.title = "（ [高级搜索] " + (this.highselectvalue.requirement == '' ? '' : '需求名称：' + this.highselectvalue.requirement) + (this.highselectvalue.department == '' ? '' : '，需求组织：' + this.highselectvalue.department) + (this.highselectvalue.liaisonman == '' ? '' : '，需求联系人：' + this.highselectvalue.liaisonman) + (this.highselectvalue.requirementtype == '' ? '' : '，需求类型：' + this.highselectvalue.requirementtype) + (this.highselectvalue.requirementcontents == '' ? '' : '，需求方向：' + this.highselectvalue.requirementcontents) + ' ）' // this.title = "（ " + this.selectDirecat + "：" + this.selectvalue + " ）" } ) }, easySelect () { if (this.selectvalue == '' || this.selectvalue == null) { return; } let params = { FieldType: this.selectFieldType, queryMsg: this.selectvalue } let config = { url: "/requirement/select/simpleselect", method: "get", params: params } request(config).then( res => { this.requirementList = res.data.list; this.tableData = this.requirementList[0]; this.count = res.data.data.count; this.page = res.data.data.count; this.title = "（ " + this.selectDirecat + "：" + this.selectvalue + " ）"; this.currentPage = 1; } ) }, pageChange (val) { this.tableData = this.requirementList[val - 1]; //索引需要减一 }, gotorequirementinfo (index, row) { //教师姓名被标红的话会增加不必要的字符串 let requirement = row.requirement; // requirement = requirement.replace("<b><font color='red'>", ''); // requirement = requirement.replace("</font></b>", ''); requirement = requirement.replace(/<\/?b>|<font color='red'>|<\/font>/g, ''); router.push('/requirementviewinfo/' + row.id + '&' + requirement); }, }, mounted () { this.loadAll(); }, } </script> <style scoped> .selectchange { width: 105px; /* font-weight: bold; */ font-size: 110%; color: rgba(53, 48, 48, 0.993); } .tagdiv { margin-bottom: 3px; min-height: 12px; text-align: center; } .inputdiv { text-align: center; } .inputnormal { width: 30%; } #el-table >>> .headerRow { /* height: 28px!important; */ font-size: 80%; color: black; font-weight: bold; /* color: rgba(36, 36, 196, 0.925); */ /* background-color: cadetblue; */ } #el-table >>> .cellClass { font-size: 75%; } #el-table >>> .cellClass .cell { white-space: pre-line !important; } .demo-table-expand { font-size: 0; text-align: left; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 100%; } </style> <!-- --> <template> <div> <el-container> <el-aside width="150px" class="leftdiv"> <el-page-header @back="goBack" class="backheader" content=""> </el-page-header> </el-aside> </el-container> <el-container> <el-main style="padding:10px"> <!-- 组件缓存 --> <keep-alive> <!-- 动态组件 --> <component :is="tabComponent" style="margin-left: 2%;min-height:550px" ref="requirementinfocomponent" @normalinfotest="normalinfochange" :requirementinfo="requirementinfo" :visitexcelData="visitexcelData"></component> </keep-alive> </el-main> </el-container> </div> </template> <script> import { request } from "../../network/request"; import requirementinfocomponent from '@/components/teacher/teacherpersoncomponent/requirementinfocomponent' import test from '@/components/test/test' import router from '../../router'; export default { components: { requirementinfocomponent, test}, props: { id: String, requirement: String }, data () { return { requirementinfo: { id: '', requirement: '', department: '', liaisonman: '', telphone: '', requirementtype: 0, technicalfield:'', requirementtime: '', requirementbackground : '', requirementdescribe : '', requirementcontents: '', acceptstandard: '', budget: '', assessment:'', technicalsource: '', visitexcel: '', // visitexcelData:[], }, // visitexcelData:[], technicalsourcetable:[], tabComponent: requirementinfocomponent, } }, methods: { getRequirement () { if (this.id == undefined || this.requirement == undefined) { router.go(-1); } const loading = this.$loading({ lock: true, text: '加载信息中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); let config = { url: "/requirement/requirementinfo/requirementinfoget", method: "post", data: { id: this.id, requirement: this.requirement } } request(config).then( res => { this.requirementinfo = res.data.data; // this.fetchtechnicalsourceInfo(); loading.close(); } ).catch(err => { loading.close(); this.$message({ showClose: true, message: err.data.message, type: "error" }); }) }, getfilenames () { this.visitexcelData = [];//表格内容置空，然后在插入 let param = { id: this.id, requirement: this.requirement, filetype: "附件" } // console.log('getfilenames 返回的教师信息1:', this.requirementinfo); let config = { url: "/requirement/requirementinfo/getRequirementFileTableData", method: "get", params: param } request(config).then( res => { let data = res.data; let fileNameList = data.list; for (let i = 0; i < fileNameList.length; i++) { let tempname = { fileName:fileNameList[i] }; this.visitexcelData.push(tempname); } // console.log('API 返回的教师信息:', this.visitexcelData); }) }, goBack () { // router.go(-1); window.history.back(); }, normalinfochange (data) { let config = { url: "/requirement/requirementinfo/requirementinfoupdate", method: "post", data: data } request(config).then( res => { this.requirementinfo.liaisonman = data.liaisonman == '' ? this.requirementinfo.liaisonman : data.liaisonman; this.requirementinfo.telphone = data.telphone == '' ? this.requirementinfo.telphone : data.telphone; this.requirementinfo.requirementbackground = data.requirementbackground == '' ? this.requirementinfo.requirementbackground : data.requirementbackground; this.requirementinfo.requirementdescribe = data.requirementdescribe == '' ? this.requirementinfo.requirementdescribe : data.requirementdescribe; this.requirementinfo.requirementcontents = data.requirementcontents == '' ? this.requirementinfo.requirementcontents : data.requirementcontents; this.requirementinfo.acceptstandard = data.acceptstandard == '' ? this.requirementinfo.acceptstandard : data.acceptstandard; this.requirementinfo.budget = data.budget == '' ? this.requirementinfo.budget : data.budget; this.requirementinfo.technicalsource = data.technicalsource == '' ? this.requirementinfo.technicalsource : data.technicalsource; this.$message({ showClose: true, message: "更新成功", type: "success", duration: 10000 }); // this.fetchtechnicalsourceInfo(); } ).catch(err => { this.$message({ showClose: true, message: "更新失败，请稍候重试", type: "error", duration: 10000 }); }) }, }, created: function () { this.getRequirement(); this.getfilenames(); }, beforeCreate: function () { }, } </script> <style scoped> .leftdiv { height: 30px; } .backheader { /* font-weight: bold; */ font-size: 120%; /* position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */ } .backheader:hover { color: rgb(35, 167, 167); } </style>
08-28
### 去除需求名称中的 `<b><font color='red'>` 标签 在 Vue 中，如果需求名称中包含 `<b><font color='red'>` 这类 HTML 标签，并且希望去除这些标签后再展示，可以使用正则表达式进行替换[^5]。 例如，在模板中...
<template> <div style="background-color: white;margin: 10px 200px;flex: auto;height: auto"> <!-- 图片和详情框--> <div style="padding: 50px"> <!-- 图片的位置--> <el-image style="width: 400px; height: 407px;" :src="itemData.image" :preview-src-list="[itemData.image]"> </el-image> <!-- 详情框--> <div class="recommend"> <div style="float: right;width: 600px"> <!-- <h3 style="margin: 20px 0">{{ itemData.sellPoint }}</h3> --> <el-descriptions title="" :column="1" border> <el-descriptions-item label="价格" :label-style=labelStyle :contentStyle=rowStyle_price> ¥{{ itemData.price }} </el-descriptions-item> <el-descriptions-item label="配送地址" :label-style=labelStyle :contentStyle=rowStyle>{{ address }} </el-descriptions-item> <el-descriptions-item label="描述" :label-style=labelStyle :contentStyle=rowStyle> <el-select v-model="value1" placeholder="请选择" @change="typeOne($event)"> <el-option v-for="(type, index) in finenessList" :key="index" :label="type.fineness" :value="type.finenessId" > </el-option> </el-select> {{itemData.finenessDetail}} </el-descriptions-item> <el-descriptions-item label="承诺" :label-style=labelStyle :contentStyle=rowStyle>七天无理由，包邮 </el-descriptions-item> <el-descriptions-item label="购买数量" :label-style=labelStyle :contentStyle=rowStyle> <el-input-number v-model="num" @change="handleChange" :min=1 label="请选择购买的数量"></el-input-number> </el-descriptions-item> </el-descriptions> </div> </div> </div> <!-- 这里是按钮栏--> <div style="padding: 50px 0;margin: 0 50px;background-color: rgba(255,242,204)"> <el-row> <el-col :span="12" align="center"> <el-button icon="el-icon-s-goods" class="my-button" @click="addCart">加入购物车</el-button> </el-col> <el-col :span="12" align="center"> <el-button icon="el-icon-check" type="danger" class="my-button" @click="buy">立即购买</el-button> </el-col> </el-row> </div> <!-- 商品详情部分--> <div class="price-info"> <div class="container"> <h2 style="margin: 20px 0;color: #d71d3f">商品详情</h2> <div class="desc" v-html="proUrl"> </div> </div> </div> </div> </template> <script> import request from "@/utils/request"; export default { name: "Detail", created() { // 取出当前点击的商品ID console.log("当前查询的ID是" + this.$route.query.id); this.loadData(this.$route.query.id); // 从session中取出登陆者的信息 let str = sessionStorage.getItem("user") || "{}"; // 解析str this.user = JSON.parse(str); console.log("现在登录的人是" + this.user.username); this.jiazai(); this.getFinenessList(); }, data() { return { value1:1, finenessList: [], address: "", finenessId:"", // 商品详情的HTML proUrl: "", // 购买者的信息 user: {}, // 商品的信息 itemData: {}, // 购买的数量 num: 1, // 描述内容样式 rowStyle: { 'text-align': 'center', 'height': '65px', 'font-size': '15px', 'background': '#FDE2E2', }, // 描述标签样式 labelStyle: { 'text-align': 'center', 'font-size': '15px', 'background': '#E1F3D8', }, // 价格标红 rowStyle_price: { 'text-align': 'center', 'height': '65px', 'font-size': '25px', 'background': '#FDE2E2', 'color': 'rgba(255,68,0)' }, } }, methods: { typeOne(event){ this.finenessId=event.target.value; this.loadData(this.$route.query.id,this.finenessId); }, getFinenessList() { request .get("/fineness/getFinenessList", { params: {}, }) .then((res) => { this.finenessList = res.data; console.log(res.data); }); }, loadData: function (id) { this.finenessId=this.value1 // 加载商品数据 request.get('/item/one', { params: { id: id, finenessId:this.finenessId, } }).then(res => { // console.log(res); this.itemData = res.data; document.title = this.itemData.title; }); // 加载详情数据 request.get("/itemDetail", { params: { id: id, } }).then(res => { this.proUrl = res.data.itemDetail; }); }, buy() { request.get("/order/buy",{ params:{ itemId: this.itemData.id, userId: this.user.id, count: this.num } }).then(res => { this.$message.success("即将进入支付页面"); // 直接通过返回的链接打开新窗口 alert("即将进入支付页面，请注意支付环境安全"); window.open("/Success.html", '_blank'); window.location.href = window.location.href; }) }, handleChange(){ }, addCart(){ this.$confirm('是否确定加入购物车?', { confirmButtonText: 'Yes', cancelButtonText: 'No', type: 'warning' }). then(() => { request.get('/order/add',{ params: { itemId: this.itemData.id, userId: this.user.id, count: this.num } }). then(res => { this.$message.success("加入购物车成功"); }); }). catch(() => { this.$message({ type: 'error', message: '取消加入购物车' }); }); }, jiazai(){ request.get("/address/one", { params: { userId: this.user.id } }).then(res => { this.address= res.data; }) } } } </script> <style scoped> .recommend { float: right; background-color: rgba(255, 242, 232); } .my-button { height: 70px; width: 200px; font-size: 25px; border-radius: 4px; color: white; background-color: rgba(255, 68, 0); } .price-info { text-align: center; background-color: #f3f3f3; height: auto; margin: 50px; h2 { font-size: 24px; color: #333333; padding-top: 38px; margin-bottom: 30px; border-bottom: coral 2px solid; line-height: 50px; } .attributes-list { width: 749px; display: block; clear: both; margin: 20px auto; min-height: 50px; text-align: left; li { display: inline; float: left; width: 206px; height: 24px; margin-right: 20px; overflow: hidden; text-indent: 5px; line-height: 24px; white-space: nowrap; text-overflow: ellipsis; } } } </style> 报错"TypeError: Cannot read properties of undefined (reading 'target')"
08-28
在 Vue 中，`event` 对象在使用 `.target` 获取值时，**只有在原生 DOM 事件中才会有 `target` 属性**。 但你使用的是 Element UI 的 `<el-select>` 组件，它的 `@change` 事件返回的 `event` **不是原生 DOM 事件...
如何正确的在div里引入script标签
weixin_46037501的博客
05-17 2465
项目场景： 提示：这里简述项目相关背景： 项目场景：在页面展示<script src=‘https://www.antdv.com/components/overview-cn/’>< /script> 问题描述 提示：这里描述项目中遇到的问题： 直接引入div里会直接报错在data里定义一个方法同样也会报错同一问题 <pre class="hlcode"><script src='https://cssmx.jst.zj.gov.cn/jsapi/dplus.j
angularjs - 富文本编辑器simditor - 上传、显示带格式文本
sinat_33638616的博客
03-23 988
angularjs版本 1.6.9simditor下载地址https://github.com/mycolorway/simditor/releases  点击打开链接加入&lt;link rel="stylesheet" href="../css/simditor.css" /&gt;&lt;link rel="stylesheet" href="../css/font-awesome.css"...
利用 JavaScript 实现富文本编辑器
Provenr的博客
11-27 1301
富文本编辑
富文本中＜script＞标签转义
qq_40285497的博客
06-11 689
使用的是正则的方式，代码如下： let str = '<h1 id="title">XSS Demo</h1><script>alert("xss");</script>' function scriptTransfer(str) { let reg = /(<)([\/]?script)(>)/g // abc分别对应上面正则中第一二三括号内的匹配 return str.replace(reg, function (
说说 JavaScript 表单脚本之富文本编辑功能
读万卷书，行万里路
07-11 2211
富文本编辑，即所见即所得（What You See Is What You Get）。这个技术的本质是在页面中嵌入一个包含空 HTML 页面的 iframe。通过 designMode 属性（设置为 on），这个页面就可以被编辑，编辑对象是这个页面的 <body> 元素的 HTML 代码。iframe 中使用一个简单的 HTML 页面就可以作为内容：<!DOCTYPE html> <html> <
html+js富文本
Juliet_xmj的博客
08-20 1792
html+js富文本 rtf是Rich Text Format的缩写，意即多文本格式。这是一种 类似DOC格式（Word文档） 的文件，有很好的兼容性，使用Windows“附件”中的“写字板”就能打开并进行编辑。 div方式实现简单富文本 依赖方法是doucument.execCommand() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam
数据库中查询的富文本带有标签的文字在前端显示问题
u010357298的博客
12-19 3729
post.content=org.apache.commons.lang.StringEscapeUtils.unescapeHtml(post.content) 未经测试 一般富文本编辑器保存的文章排版都是添加了跟多html或者css代码保存到数据库的，为就是后台预言可以直接从数据库中取出来放到html页面显示那些样式和排版，此时后台读取到带有html标记的数据应该是交给JavaSc...
vue3 script setup 使用tinymce富文本编辑器-f
默的博客
08-17 1303
本文就是对于tinymce在vue3中的组件化封装进行的总结，便于大家直接上手使用。
如何标红文本域的违禁词？
weixin_30888413的博客
12-21 408
一、问题描述 监听文本域的输入信息，向后端发送请求，后端返回违禁词，前端标红违禁词。 二、问题分析 难点是怎么对文本域的某个文字标红？因为textarea标签里面插入的标签会被识别成普通文字，不会显示预期的样式。 三、解决方案 1、富文本编辑器 <div contenteditable=true>这是一个假文本域<span style="color:red"&gt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值