feat(crm): 优化合同模板管理和订单明细页面功能

1. 合同模板管理:添加选中状态高亮样式,新增当前选中模板状态管理
2. 订单明细页面:
   - 合并搜索框为产品名称/材质统一搜索
   - 重构表格数据结构,拆分合同与产品明细展示
   - 添加批量/单行保存功能,自动计算产品金额字段
   - 优化筛选条件和默认日期范围,调整表格列样式与配置
This commit is contained in:
2026-06-18 10:27:09 +08:00
parent b4a9a48ae6
commit 379aa9d44b
2 changed files with 328 additions and 237 deletions

View File

@@ -4,6 +4,7 @@
<el-button
v-for="template in contractTemplateList"
:key="template.dictValue"
:class="{ 'template-btn-selected': currentSelectedTemplate && currentSelectedTemplate.dictCode === template.dictCode }"
@click="handleTemplateSelect(template)"
>
{{ template.dictLabel }}
@@ -72,6 +73,8 @@ export default {
dialogTitle: "合同模板管理",
// 选中的模板
selectedTemplate: {},
// 当前选用的合同模板
currentSelectedTemplate: null,
// 保存按钮loading状态
saveLoading: false,
// 表单数据
@@ -109,7 +112,7 @@ export default {
/** 处理合同模板选择 */
handleTemplateSelect(template) {
// 抛出选择事件,将选中的模板数据传出
this.currentSelectedTemplate = template;
this.$emit('select', template);
},
@@ -197,6 +200,13 @@ export default {
margin-bottom: 16px;
}
.template-btn-selected {
border-bottom: 3px solid #409eff;
border-radius: 4px 4px 0 0;
color: #409eff;
font-weight: 600;
}
.template-management-layout {
display: flex;
height: 70vh;

View File

@@ -19,35 +19,11 @@
@keyup.enter.native="handleQuery"
/>
<el-input
v-model="queryParams.productName"
placeholder="产品名称"
v-model="queryParams.keyword"
placeholder="产品名称/材质"
size="small"
clearable
style="width: 140px"
@keyup.enter.native="handleQuery"
/>
<el-input
v-model="queryParams.material"
placeholder="材质"
size="small"
clearable
style="width: 120px"
@keyup.enter.native="handleQuery"
/>
<el-input
v-model="queryParams.surfaceTreatment"
placeholder="表面处理"
size="small"
clearable
style="width: 130px"
@keyup.enter.native="handleQuery"
/>
<el-input
v-model="queryParams.packagingReq"
placeholder="包装要求"
size="small"
clearable
style="width: 250px"
style="width: 160px"
@keyup.enter.native="handleQuery"
/>
<el-date-picker
@@ -76,34 +52,46 @@
/>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">筛选</el-button>
<el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<span class="sort-hint">已按合同交货日期倒序 + 明细创建时间倒序排列</span>
<span class="sort-hint">已按合同签订日期默认当月结果按交货日期倒序排列</span>
</div>
<!-- 订单明细表格 -->
<!-- 合同产品表格 -->
<div class="table-section">
<el-table
:data="orderItemList"
v-loading="loading"
:data="tableList"
size="small"
border
v-loading="loading"
style="width: 100%"
class="order-item-table"
:header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 600 }"
:row-class-name="groupRowClassName"
>
<!-- 合同信息列只读灰色背景 -->
<!-- 操作列 -->
<el-table-column label="操作" width="70" fixed="left" align="center">
<template slot-scope="{ row }">
<el-button
type="text"
size="small"
icon="el-icon-check"
style="color: #67c23a"
@click="handleSaveRow(row)"
>保存</el-button>
</template>
</el-table-column>
<!-- 合同信息列只读 -->
<el-table-column label="合同信息" align="center">
<el-table-column label="合同号" prop="contractCode" min-width="170">
<el-table-column label="合同号" prop="contractCode" min-width="160">
<template slot-scope="{ row }">
<span class="contract-info" :title="row.contractCode">{{ row.contractCode }}</span>
</template>
</el-table-column>
<el-table-column label="供方" prop="supplier" min-width="200">
<el-table-column label="供方" prop="supplier" min-width="180">
<template slot-scope="{ row }">
<span class="contract-info" :title="row.supplier">{{ row.supplier }}</span>
</template>
</el-table-column>
<el-table-column label="需方" prop="customer" min-width="240">
<el-table-column label="需方" prop="customer" min-width="200">
<template slot-scope="{ row }">
<span class="contract-info" :title="row.customer">{{ row.customer }}</span>
</template>
@@ -120,164 +108,140 @@
</el-table-column>
</el-table-column>
<!-- 订单明细列可编辑 -->
<el-table-column label="订单明细" align="center">
<el-table-column label="序号" prop="seqNo" width="60">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.seqNo"
size="small"
:title="scope.row.seqNo"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 产品明细列可编辑 -->
<el-table-column label="产品明细" align="center">
<el-table-column label="产品名称" prop="productName" min-width="120">
<template slot-scope="{ row }">
<span class="contract-info contract-product-name" :title="row.productName">{{ row.productName }}</span>
</template>
</el-table-column>
<el-table-column label="规格(mm)" prop="spec" min-width="120">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.productName"
v-model="scope.row.spec"
size="small"
class="editable-cell"
:title="scope.row.productName"
@blur="saveRow(scope.row)"
:title="scope.row.spec"
@blur="handleProductChange(scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="规格" prop="productSpec" min-width="110">
<el-table-column label="材质" prop="material" width="110">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.productSpec"
size="small"
class="editable-cell"
:title="scope.row.productSpec"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="材质" prop="material" width="80">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
<el-select
v-model="scope.row.material"
size="small"
class="editable-cell-blue"
:title="scope.row.material"
@blur="saveRow(scope.row)"
/>
class="editable-cell-blue select-material"
clearable
filterable
allow-create
@change="handleProductChange(scope.row)"
>
<el-option
v-for="m in materialOptions"
:key="m.value"
:label="m.label"
:value="m.value"
/>
</el-select>
</div>
</template>
</el-table-column>
<el-table-column label="宽度(mm)" prop="width" width="85">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.width"
size="small"
class="editable-cell-blue"
:title="scope.row.width"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="厚度(mm)" prop="thickness" width="85">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.thickness"
size="small"
class="editable-cell-blue"
:title="scope.row.thickness"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="数量" prop="quantity" width="80">
<el-table-column label="数量(吨)" prop="quantity" width="90">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.quantity"
size="small"
class="editable-cell-green"
:title="scope.row.quantity"
@blur="saveRow(scope.row)"
:title="String(scope.row.quantity)"
@blur="handleProductChange(scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="重量(吨)" prop="weight" width="90">
<el-table-column label="含税单价" prop="taxPrice" width="100">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.weight"
v-model="scope.row.taxPrice"
size="small"
class="editable-cell-green"
:title="scope.row.weight"
@blur="saveRow(scope.row)"
:title="String(scope.row.taxPrice)"
@blur="handleProductChange(scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="单价" prop="unitPrice" width="90">
<el-table-column label="税率除数" prop="taxDivisor" width="85">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.unitPrice"
v-model="scope.row.taxDivisor"
size="small"
class="editable-cell-blue"
:title="String(scope.row.taxDivisor)"
@blur="handleProductChange(scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="无税单价" prop="noTaxPrice" width="100">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.noTaxPrice"
size="small"
class="editable-cell-green"
:title="scope.row.unitPrice"
@blur="saveRow(scope.row)"
:title="String(scope.row.noTaxPrice)"
@blur="handleProductChange(scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="额" prop="amount" width="100">
<el-table-column label="含税总额" prop="taxTotal" width="110">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.amount"
v-model="scope.row.taxTotal"
size="small"
class="editable-cell-green"
:title="scope.row.amount"
@blur="saveRow(scope.row)"
:title="String(scope.row.taxTotal)"
@blur="handleProductChange(scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="表面处理" prop="surfaceTreatment" width="130">
<el-table-column label="无税总额" prop="noTaxTotal" width="110">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.surfaceTreatment"
v-model="scope.row.noTaxTotal"
size="small"
class="editable-cell-pink"
:title="scope.row.surfaceTreatment"
@blur="saveRow(scope.row)"
class="editable-cell-green"
:title="String(scope.row.noTaxTotal)"
@blur="handleProductChange(scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="包装要求" prop="packagingReq" min-width="275">
<el-table-column label="税额" prop="taxAmount" width="100">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.packagingReq"
v-model="scope.row.taxAmount"
size="small"
class="editable-cell-pink"
:title="scope.row.packagingReq"
@blur="saveRow(scope.row)"
class="editable-cell-green"
:title="String(scope.row.taxAmount)"
@blur="handleProductChange(scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="备注" prop="remark" min-width="120">
<el-table-column label="备注" prop="remark" min-width="150">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -285,19 +249,12 @@
size="small"
class="editable-cell-pink"
:title="scope.row.remark"
@blur="saveRow(scope.row)"
@blur="handleProductChange(scope.row)"
/>
</div>
</template>
</el-table-column>
</el-table-column>
<!-- 操作列 -->
<el-table-column label="操作" width="70" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="saveRow(scope.row)">保存</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
@@ -313,50 +270,53 @@
</template>
<script>
import { listOrderItem, updateOrderItem } from '@/api/crm/orderItem'
import { listCategory } from '@/api/wms/category'
import { listOrder, updateOrder } from '@/api/crm/order'
import { parseProductContent, stringifyProductContent, calculateProductFields, recalculateTotals } from '@/utils/productContent'
export default {
name: 'OrderItemList',
data() {
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const firstDay = `${year}-${month}-01`
const lastDay = new Date(year, now.getMonth() + 1, 0)
const lastDayStr = `${year}-${month}-${String(lastDay.getDate()).padStart(2, '0')}`
return {
loading: false,
orderItemList: [],
tableList: [],
total: 0,
signDateRange: null,
signDateRange: [firstDay, lastDayStr],
deliveryDateRange: null,
queryParams: {
pageNum: 1,
pageSize: 50,
contractCode: undefined,
customer: undefined,
productName: undefined,
material: undefined,
surfaceTreatment: undefined,
packagingReq: undefined,
signDateStart: undefined,
signDateEnd: undefined,
keyword: undefined,
signDateStart: firstDay,
signDateEnd: lastDayStr,
deliveryDateStart: undefined,
deliveryDateEnd: undefined
},
// 存储原始数据,用于判断是否有修改
originalData: {},
// 表面处理选项
surfaceTreatmentOptions: []
materialOptions: [
{ label: 'SPCC', value: 'SPCC' },
{ label: 'DX51D+Z', value: 'DX51D+Z' },
{ label: 'DC01', value: 'DC01' },
{ label: 'DC01-H', value: 'DC01-H' }
]
}
},
created() {
this.getList()
this.loadSurfaceTreatmentOptions()
},
methods: {
// 格式化日期为 YYYY-MM-DD
formatDate(dateStr) {
if (!dateStr) return ''
// 处理各种日期格式
const date = new Date(dateStr)
if (isNaN(date.getTime())) {
// 如果不是有效日期尝试直接截取前10位
return String(dateStr).substring(0, 10)
}
const year = date.getFullYear()
@@ -365,38 +325,193 @@ export default {
return `${year}-${month}-${day}`
},
// 获取订单明细列表
getList() {
this.loading = true
listOrderItem(this.queryParams).then(res => {
this.orderItemList = res.rows || []
this.total = res.total || 0
// 保存原始数据副本
this.originalData = {}
this.orderItemList.forEach(row => {
this.originalData[row.itemId || row.detailId] = JSON.stringify(row)
listOrder(this.queryParams).then(res => {
const rows = []
const orders = res.rows || []
orders.forEach(order => {
const parsed = parseProductContent(order.productContent)
const products = parsed.products || []
const productName = parsed.productName || ''
products.forEach((product, index) => {
rows.push({
_order: { ...order },
orderId: order.orderId,
contractCode: order.contractCode,
supplier: order.supplier,
customer: order.customer,
signTime: order.signTime,
deliveryDate: order.deliveryDate,
productName: productName,
productIndex: index,
spec: product.spec || '',
material: product.material || '',
quantity: product.quantity || 0,
taxPrice: product.taxPrice || 0,
taxDivisor: product.taxDivisor || 1.13,
noTaxPrice: product.noTaxPrice || 0,
taxTotal: product.taxTotal || 0,
noTaxTotal: product.noTaxTotal || 0,
taxAmount: product.taxAmount || 0,
remark: product.remark || ''
})
})
if (products.length === 0) {
rows.push({
_order: { ...order },
orderId: order.orderId,
contractCode: order.contractCode,
supplier: order.supplier,
customer: order.customer,
signTime: order.signTime,
deliveryDate: order.deliveryDate,
productName: productName,
productIndex: -1,
spec: '',
material: '',
quantity: 0,
taxPrice: 0,
taxDivisor: 1.13,
noTaxPrice: 0,
taxTotal: 0,
noTaxTotal: 0,
taxAmount: 0,
remark: ''
})
}
})
}).catch(e => {
console.error(e)
rows.forEach(row => {
row.noTaxPrice = this.format3Decimal(row.noTaxPrice)
row.taxTotal = this.format3Decimal(row.taxTotal)
row.noTaxTotal = this.format3Decimal(row.noTaxTotal)
row.taxAmount = this.format3Decimal(row.taxAmount)
})
this.tableList = rows
this.total = res.total || 0
this.originalData = {}
rows.forEach((row, i) => {
this.originalData[i] = JSON.stringify({
spec: row.spec,
material: row.material,
quantity: row.quantity,
taxPrice: row.taxPrice,
taxDivisor: row.taxDivisor,
noTaxPrice: row.noTaxPrice,
taxTotal: row.taxTotal,
noTaxTotal: row.noTaxTotal,
taxAmount: row.taxAmount,
remark: row.remark
})
})
}).catch(() => {
this.tableList = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
// 判断数据是否有变化
hasChanged(row) {
const id = row.itemId || row.detailId
if (!id || !this.originalData[id]) return false
return this.originalData[id] !== JSON.stringify(row)
handleProductChange(row) {
const updated = calculateProductFields(row, 'quantity')
Object.assign(row, {
noTaxPrice: this.format3Decimal(updated.noTaxPrice),
taxTotal: this.format3Decimal(updated.taxTotal),
noTaxTotal: this.format3Decimal(updated.noTaxTotal),
taxAmount: this.format3Decimal(updated.taxAmount),
taxDivisor: updated.taxDivisor
})
},
format3Decimal(v) {
return Number(v).toFixed(3)
},
saveOrderProducts(row, silent = false) {
if (!row.orderId) {
return Promise.resolve()
}
return new Promise((resolve, reject) => {
const orderRows = this.tableList.filter(r => r.orderId === row.orderId)
const newProducts = orderRows
.filter(r => r.productIndex >= 0)
.sort((a, b) => a.productIndex - b.productIndex)
.map(r => ({
spec: r.spec,
material: r.material,
quantity: parseFloat(r.quantity) || 0,
taxPrice: parseFloat(r.taxPrice) || 0,
taxDivisor: parseFloat(r.taxDivisor) || 1.13,
noTaxPrice: parseFloat(r.noTaxPrice) || 0,
taxTotal: parseFloat(r.taxTotal) || 0,
noTaxTotal: parseFloat(r.noTaxTotal) || 0,
taxAmount: parseFloat(r.taxAmount) || 0,
remark: r.remark || ''
}))
const parsed = parseProductContent(row._order.productContent)
parsed.products = newProducts
const updatedContent = recalculateTotals(parsed)
const productContentJson = stringifyProductContent(updatedContent)
const orderData = { ...row._order }
orderData.productContent = productContentJson
updateOrder(orderData).then(() => {
row._order.productContent = productContentJson
orderRows.forEach(r => {
r._order.productContent = productContentJson
})
if (!silent) {
this.$message.success('保存成功')
}
resolve()
}).catch(() => {
if (!silent) {
this.$message.error('保存失败')
this.getList()
}
reject()
})
})
},
handleSaveAll() {
const orderIds = [...new Set(this.tableList.map(r => r.orderId).filter(Boolean))]
if (orderIds.length === 0) {
this.$message.warning('没有需要保存的数据')
return
}
this.loading = true
let savedCount = 0
let failedCount = 0
const promises = orderIds.map(orderId => {
const row = this.tableList.find(r => r.orderId === orderId)
return this.saveOrderProducts(row, true).then(() => {
savedCount++
}).catch(() => {
failedCount++
})
})
Promise.all(promises).then(() => {
this.loading = false
if (failedCount === 0) {
this.$message.success(`成功保存 ${savedCount} 个订单`)
} else {
this.$message.warning(`成功保存 ${savedCount} 个,${failedCount} 个失败`)
}
})
},
handleSaveRow(row) {
this.saveOrderProducts(row)
},
// 筛选
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
// 签订日期范围变更
handleSignDateChange(val) {
if (val && val.length === 2) {
this.queryParams.signDateStart = val[0]
@@ -408,7 +523,6 @@ export default {
this.handleQuery()
},
// 交货日期范围变更
handleDeliveryDateChange(val) {
if (val && val.length === 2) {
this.queryParams.deliveryDateStart = val[0]
@@ -420,73 +534,35 @@ export default {
this.handleQuery()
},
// 重置
resetQuery() {
this.signDateRange = null
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const firstDay = `${year}-${month}-01`
const lastDay = new Date(year, now.getMonth() + 1, 0)
const lastDayStr = `${year}-${month}-${String(lastDay.getDate()).padStart(2, '0')}`
this.signDateRange = [firstDay, lastDayStr]
this.deliveryDateRange = null
this.queryParams.contractCode = undefined
this.queryParams.customer = undefined
this.queryParams.productName = undefined
this.queryParams.material = undefined
this.queryParams.surfaceTreatment = undefined
this.queryParams.packagingReq = undefined
this.queryParams.signDateStart = undefined
this.queryParams.signDateEnd = undefined
this.queryParams.keyword = undefined
this.queryParams.signDateStart = firstDay
this.queryParams.signDateEnd = lastDayStr
this.queryParams.deliveryDateStart = undefined
this.queryParams.deliveryDateEnd = undefined
this.queryParams.pageNum = 1
this.getList()
},
// 加载表面处理选项
loadSurfaceTreatmentOptions() {
listCategory({ categoryType: 'surface_treatment', pageNum: 1, pageSize: 100 }).then(res => {
this.surfaceTreatmentOptions = res.rows || []
}).catch(e => {
console.error('获取表面处理选项失败', e)
})
},
// 保存行数据
saveRow(row) {
if (!row.itemId && !row.detailId) {
this.$message.warning('数据ID不存在')
return
groupRowClassName({ row, rowIndex }) {
if (row.productIndex === 0) {
return 'group-row-a'
}
// 判断是否有修改
if (!this.hasChanged(row)) {
return
if (row.productIndex > 0) {
return 'group-row-b'
}
// 只保存订单明细相关字段
const data = {
itemId: row.itemId,
detailId: row.detailId,
orderId: row.orderId,
seqNo: row.seqNo,
productName: row.productName,
productSpec: row.productSpec,
material: row.material,
width: row.width,
thickness: row.thickness,
quantity: row.quantity,
weight: row.weight,
unitPrice: row.unitPrice,
amount: row.amount,
surfaceTreatment: row.surfaceTreatment,
packagingReq: row.packagingReq,
remark: row.remark
}
updateOrderItem(data).then(() => {
// 更新原始数据
const id = row.itemId || row.detailId
this.originalData[id] = JSON.stringify(row)
this.$message.success('保存成功')
}).catch(e => {
this.$message.error('保存失败')
console.error(e)
// 刷新数据
this.getList()
})
return rowIndex % 2 === 0 ? 'group-row-a' : 'group-row-b'
}
}
}
@@ -517,7 +593,6 @@ export default {
padding: 16px;
}
/* 合同信息样式(只读) */
.contract-info {
color: #606266;
background: #f5f7fa;
@@ -531,7 +606,11 @@ export default {
text-overflow: ellipsis;
}
/* 日期单元格样式 */
.contract-product-name {
background: #e6f0fa;
font-weight: 600;
}
.contract-date {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 11px;
@@ -540,12 +619,10 @@ export default {
text-align: center;
}
/* 可编辑单元格包装器 */
.editable-cell-wrapper {
width: 100%;
}
/* 可编辑单元格样式 */
.editable-cell ::v-deep .el-input__inner {
background-color: #fff3e6;
border-color: transparent;
@@ -576,6 +653,21 @@ export default {
white-space: normal;
}
.select-material ::v-deep .el-input__inner {
background-color: #e6f7ff;
border-color: transparent;
padding: 0 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.select-material ::v-deep .el-input__inner:focus {
border-color: #5F7BA0;
background-color: #fff;
overflow: visible;
white-space: normal;
}
.editable-cell-green ::v-deep .el-input__inner {
background-color: #f6ffed;
border-color: transparent;
@@ -606,7 +698,6 @@ export default {
white-space: normal;
}
/* 表格样式优化 */
.order-item-table ::v-deep .el-input__inner {
border-color: transparent;
}
@@ -626,14 +717,6 @@ export default {
line-height: 1.4;
}
/* 合同信息文本换行 */
.contract-info {
white-space: normal !important;
word-break: break-all !important;
overflow: visible;
text-overflow: clip;
}
::v-deep .el-button--primary {
color: #fff !important;
background: #5F7BA0 !important;
@@ -645,7 +728,6 @@ export default {
border-color: #4d6a8e !important;
}
/* 排序状态提示 */
.sort-hint {
margin-left: auto;
font-size: 12px;
@@ -653,7 +735,6 @@ export default {
white-space: nowrap;
}
/* 分组交替背景色 */
::v-deep .el-table .group-row-a td {
background-color: #ffffff !important;
}