|
|
@@ -7,99 +7,6 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
|
|
|
|
|
|
var Controller = {
|
|
|
index: function () {
|
|
|
- // 添加列表样式优化
|
|
|
- $('<style>')
|
|
|
- .prop('type', 'text/css')
|
|
|
- .html(`
|
|
|
- .bootstrap-table .fixed-table-container {
|
|
|
- border: 1px solid #ddd;
|
|
|
- }
|
|
|
- .bootstrap-table .table th {
|
|
|
- background-color: #f8f9fa;
|
|
|
- font-weight: 600;
|
|
|
- border-bottom: 2px solid #dee2e6;
|
|
|
- }
|
|
|
- .bootstrap-table .table td {
|
|
|
- vertical-align: middle;
|
|
|
- padding: 4px 6px;
|
|
|
- min-height: 75px;
|
|
|
- }
|
|
|
- .bootstrap-table .table tr {
|
|
|
- border-bottom: 1px solid #f1f3f4;
|
|
|
- }
|
|
|
- .bootstrap-table .table tbody tr:hover {
|
|
|
- background-color: #f8f9fa;
|
|
|
- }
|
|
|
- .label-xs {
|
|
|
- font-size: 10px;
|
|
|
- padding: 2px 6px;
|
|
|
- }
|
|
|
- .goods-info-cell {
|
|
|
- word-wrap: break-word;
|
|
|
- padding: 3px 5px !important;
|
|
|
- max-width: 280px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .goods-info-cell:hover {
|
|
|
- background-color: #fafbfc;
|
|
|
- }
|
|
|
- .goods-info-cell .goods-title {
|
|
|
- transition: color 0.3s ease;
|
|
|
- }
|
|
|
- .goods-info-cell:hover .goods-title {
|
|
|
- color: #3498db;
|
|
|
- }
|
|
|
- .price-cell {
|
|
|
- text-align: center;
|
|
|
- font-family: 'Arial', sans-serif;
|
|
|
- }
|
|
|
- .stock-cell {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- /* 响应式优化 */
|
|
|
- @media (max-width: 1200px) {
|
|
|
- .goods-info-cell {
|
|
|
- max-width: 220px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: 768px) {
|
|
|
- .bootstrap-table .table td {
|
|
|
- padding: 3px 4px;
|
|
|
- font-size: 11px;
|
|
|
- min-height: 65px;
|
|
|
- }
|
|
|
- .goods-info-cell {
|
|
|
- max-width: 180px;
|
|
|
- }
|
|
|
- .goods-info-cell .goods-img {
|
|
|
- width: 40px !important;
|
|
|
- height: 40px !important;
|
|
|
- }
|
|
|
- .goods-info-cell .goods-title {
|
|
|
- font-size: 11px !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 图片优化 */
|
|
|
- .bootstrap-table .table .img-center img {
|
|
|
- max-width: 80px;
|
|
|
- max-height: 80px;
|
|
|
- object-fit: cover;
|
|
|
- border-radius: 6px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- /* 标签优化 */
|
|
|
- .label {
|
|
|
- display: inline-block;
|
|
|
- margin: 1px;
|
|
|
- line-height: 1.2;
|
|
|
- }
|
|
|
- `)
|
|
|
- .appendTo('head');
|
|
|
// 初始化表格参数配置
|
|
|
Table.api.init({
|
|
|
extend: {
|
|
|
@@ -135,42 +42,38 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
|
|
|
width: 300,
|
|
|
operate: 'LIKE',
|
|
|
formatter: function (value, row, index) {
|
|
|
- var html = '<div style="width: 280px; padding: 8px 0; line-height: 1.4; word-wrap: break-word;">';
|
|
|
-
|
|
|
- // 商品名称、编码、品牌在一行 - 固定宽度，超出换行
|
|
|
- html += '<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; width: 100%;">';
|
|
|
+ var html = '<div style="width: 280px; max-width: 280px; padding: 8px 0; line-height: 1.4; overflow: hidden; box-sizing: border-box;">';
|
|
|
|
|
|
- // 商品标题
|
|
|
- html += '<span style="font-weight: 600; color: #2c3e50; font-size: 14px; word-break: break-all;" title="' + (value || '') + '">' + (value || '') + '</span>';
|
|
|
+ // 商品标题 - 严格限制宽度，强制换行
|
|
|
+ html += '<div style="width: 100%; max-width: 100%; font-weight: 600; color: #2c3e50; font-size: 14px; line-height: 1.3; margin-bottom: 5px; word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; white-space: normal; overflow: hidden; box-sizing: border-box;" title="' + (value || '') + '">' + (value || '') + '</div>';
|
|
|
|
|
|
- // 分隔符
|
|
|
- html += '<span style="color: #ddd; font-size: 12px; flex-shrink: 0;">|</span>';
|
|
|
+ // 商品信息行 - 编码和品牌
|
|
|
+ html += '<div style="width: 100%; max-width: 100%; font-size: 11px; color: #666; margin-bottom: 3px; line-height: 1.2; overflow: hidden; box-sizing: border-box;">';
|
|
|
|
|
|
// 商品编码
|
|
|
- html += '<div style="display: flex; align-items: center; flex-shrink: 0;">';
|
|
|
- html += '<i class="fa fa-barcode" style="margin-right: 3px; color: #999; font-size: 10px;"></i>';
|
|
|
- html += '<span style="font-size: 11px; color: #666; word-break: break-all;">' + (row.goods_sn || '-') + '</span>';
|
|
|
- html += '</div>';
|
|
|
+ html += '<span style="display: inline-block; margin-right: 8px; max-width: 120px; overflow: hidden;">';
|
|
|
+ html += '<i class="fa fa-barcode" style="margin-right: 3px; color: #999;"></i>';
|
|
|
+ html += '<span style="word-break: break-all; overflow-wrap: break-word;">' + (row.goods_sn || '-') + '</span>';
|
|
|
+ html += '</span>';
|
|
|
|
|
|
// 品牌信息
|
|
|
if (row.brand && row.brand.name) {
|
|
|
- html += '<span style="color: #ddd; font-size: 12px; flex-shrink: 0;">|</span>';
|
|
|
- html += '<div style="display: flex; align-items: center; flex-shrink: 0;">';
|
|
|
- html += '<i class="fa fa-tag" style="margin-right: 3px; color: #999; font-size: 10px;"></i>';
|
|
|
- html += '<span style="font-size: 11px; color: #666; word-break: break-all;">' + row.brand.name + '</span>';
|
|
|
- html += '</div>';
|
|
|
+ html += '<span style="display: inline-block; max-width: 120px; overflow: hidden;">';
|
|
|
+ html += '<i class="fa fa-tag" style="margin-right: 3px; color: #999;"></i>';
|
|
|
+ html += '<span style="word-break: break-all; overflow-wrap: break-word;">' + row.brand.name + '</span>';
|
|
|
+ html += '</span>';
|
|
|
}
|
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
// 副标题
|
|
|
if (row.subtitle) {
|
|
|
- html += '<div style="font-size: 11px; color: #999; line-height: 1.4; word-wrap: break-word; word-break: break-all;" title="' + row.subtitle + '">' + row.subtitle + '</div>';
|
|
|
+ html += '<div style="width: 100%; max-width: 100%; font-size: 11px; color: #999; line-height: 1.3; margin-bottom: 3px; word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; white-space: normal; overflow: hidden; box-sizing: border-box;" title="' + row.subtitle + '">' + row.subtitle + '</div>';
|
|
|
}
|
|
|
|
|
|
// 显示规格信息（如果是多规格商品且有默认SKU）
|
|
|
if (row.spec_type == 1 && row.default_sku && row.default_sku.sku_attr) {
|
|
|
- html += '<div style="font-size: 10px; color: #888; margin-top: 4px; padding: 2px 6px; background-color: #f5f5f5; border-radius: 3px;">';
|
|
|
+ html += '<div style="width: 100%; max-width: 100%; font-size: 10px; color: #888; margin-top: 4px; padding: 2px 6px; background-color: #f5f5f5; border-radius: 3px; word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; white-space: normal; overflow: hidden; box-sizing: border-box;">';
|
|
|
html += '<i class="fa fa-list-alt" style="margin-right: 3px;"></i>';
|
|
|
html += '默认规格: ' + Controller.formatSkuAttr(row.default_sku.sku_attr);
|
|
|
html += '</div>';
|
|
|
@@ -215,7 +118,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
|
|
|
{field: 'stocks', title: '库存', width: 80, operate: 'BETWEEN', sortable: true},
|
|
|
{field: 'sales', title: '销量', width: 80, operate: 'BETWEEN', sortable: true},
|
|
|
{field: 'views', title: '浏览量', width: 80, operate: 'BETWEEN', sortable: true},
|
|
|
- {
|
|
|
+ {
|
|
|
field: 'status',
|
|
|
title: '状态',
|
|
|
width: 80,
|
super-yimizi