<template>
|
<div>
|
<vol-box
|
v-model="showDetailBox"
|
:lazy="true"
|
width="65%"
|
:padding="20"
|
title="虚拟出入库"
|
class="custom-vol-box"
|
>
|
<!-- 提交遮罩层：覆盖整个弹窗内容区域 -->
|
<div class="submit-mask" v-show="submitLoading">
|
<div class="mask-content">
|
<el-loading-spinner class="loading-icon" />
|
<span class="loading-text">正在提交出库，请稍候...</span>
|
</div>
|
</div>
|
|
<div>
|
<!-- 单据输入区域（支持扫码） -->
|
<el-form
|
:inline="true"
|
:model="orderForm"
|
style="margin-bottom: 20px; align-items: flex-end;"
|
@submit.prevent
|
>
|
<el-form-item label="出库单据:" name="outboundOrderNo">
|
<el-input
|
v-model="orderForm.outboundOrderNo"
|
placeholder="请输入或扫描出库单据号"
|
clearable
|
style="width: 220px; margin-right: 10px;"
|
@input="handleOutboundInput"
|
@keyup.enter="validateOutboundOrder"
|
ref="outboundInputRef"
|
:disabled="loading || submitLoading || isOutboundVerified"
|
></el-input>
|
<!-- 新增：验证状态提示 -->
|
<span v-if="isOutboundVerified" class="verified-tag">✓ 已验证</span>
|
<span v-else-if="loading" class="loading-tag">✦ 验证中...</span>
|
</el-form-item>
|
<el-form-item label="采购单据:" name="purchaseOrderNo">
|
<el-input
|
v-model="orderForm.purchaseOrderNo"
|
placeholder="扫码条码后自动填充"
|
clearable
|
style="width: 220px; margin-right: 10px;"
|
@input="handlePurchaseInput"
|
readonly
|
ref="purchaseInputRef"
|
:disabled="submitLoading"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
|
<!-- 上方输入框 -->
|
<el-form
|
:inline="true"
|
:model="formData"
|
ref="formRef"
|
style="margin-bottom: 20px; align-items: flex-end;"
|
@submit.prevent
|
>
|
<el-form-item
|
label="扫描条码:"
|
style="width: 80%"
|
name="barcode"
|
>
|
<el-input
|
ref="barcodeInputRef"
|
v-model="formData.barcode"
|
placeholder="请使用扫码枪扫描条码，或手动输入"
|
@keydown.enter="debouncedHandleScan"
|
autofocus
|
class="custom-input"
|
:disabled="!isOutboundVerified || loading || submitLoading"
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
size="small"
|
@click="handleScan"
|
class="custom-button"
|
:disabled="!isOutboundVerified || loading || submitLoading"
|
>
|
<Search /> 确认扫描
|
</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 下方显示框（直接渲染后端返回的数组） -->
|
<div class="scan-list">
|
<el-card shadow="hover" style="margin-bottom: 10px; border: none;" class="custom-card">
|
<div class="card-header">
|
<span class="header-title">已扫描条码列表（共{{ scannedBarcodes.length }}条）</span>
|
</div>
|
<div class="card-body">
|
<el-scrollbar height="400px" class="custom-scrollbar">
|
<transition-group name="barcode-item-transition">
|
<div class="barcode-item" v-for="(item, index) in scannedBarcodes" :key="`${item.barcode}-${index}`" :data-index="index">
|
<div class="barcode-detail">
|
<div class="detail-row">
|
<span class="label">条码：</span>
|
<span class="value">{{ item.barcode || '-' }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">物料编码：</span>
|
<span class="value">{{ item.materielCode || '-' }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">物料名称：</span>
|
<span class="value">{{ item.materielName || '-' }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">批次号：</span>
|
<span class="value">{{ item.batchNo || '-' }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">条码数量：</span>
|
<span class="value">{{ item.orderQuantity || item.quantity || 0 }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">供应商编码：</span>
|
<span class="value">{{ item.supplyCode || '-' }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">采购单号：</span>
|
<span class="value">{{ item.purchaseOrderNo || '-' }}</span>
|
</div>
|
</div>
|
<el-button
|
class="delete-btn"
|
@click="removeItem(index, item.barcode)"
|
icon="Delete"
|
circle
|
:disabled="loading || submitLoading"
|
></el-button>
|
</div>
|
</transition-group>
|
<div class="empty-tip" v-if="scannedBarcodes.length === 0">
|
<span v-if="isOutboundVerified">暂无扫描记录，请扫描条码</span>
|
<span v-else>请先输入并验证有效的出库单据号</span>
|
</div>
|
</el-scrollbar>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
|
<template #footer>
|
<div class="footer-actions">
|
<el-button
|
type="primary"
|
size="small"
|
@click="submit"
|
:disabled="scannedBarcodes.length === 0 || !isOutboundVerified || loading || submitLoading"
|
class="submit-btn"
|
>
|
<Check /> 提交出库
|
</el-button>
|
<el-button
|
type="text"
|
size="small"
|
@click="(e) => {
|
e.stopPropagation();
|
e.preventDefault();
|
showDetailBox = false;
|
}"
|
class="cancel-btn"
|
:disabled="loading || submitLoading"
|
>
|
取消
|
</el-button>
|
</div>
|
</template>
|
</vol-box>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, nextTick } from 'vue';
|
import { ElMessage } from 'element-plus';
|
import { Search, Check } from '@element-plus/icons-vue';
|
|
import VolBox from "@/components/basic/VolBox.vue";
|
import http from '@/api/http';
|
|
// 响应式数据
|
const showDetailBox = ref(false);
|
const orderForm = reactive({
|
outboundOrderNo: "",
|
purchaseOrderNo: ""
|
});
|
const formData = reactive({
|
barcode: "",
|
});
|
const scannedBarcodes = ref([]);
|
const loading = ref(false);
|
// 新增：提交专属loading状态，控制遮罩层显示
|
const submitLoading = ref(false);
|
// 核心新增：出库单验证状态标识
|
const isOutboundVerified = ref(false);
|
|
// 模板引用
|
const formRef = ref(null);
|
const barcodeInputRef = ref(null);
|
const outboundInputRef = ref(null);
|
const purchaseInputRef = ref(null);
|
|
const successAudioSrc = require('@/assets/audio/success.mp3');
|
const errorAudioSrc = require('@/assets/audio/error.mp3');
|
|
// ========== 仅新增：音频播放函数（无其他代码改动） ==========
|
const playAudio = (audioSrc, volume = 0.8) => {
|
try {
|
const audio = new Audio(audioSrc);
|
audio.volume = volume;
|
audio.play().catch(() => {});
|
} catch (e) {}
|
};
|
const playSuccess = () => playAudio(successAudioSrc);
|
const playError = () => playAudio(errorAudioSrc);
|
// ========== 音频函数结束 ==========
|
|
// 组件挂载时聚焦到出库单输入框
|
onMounted(() => {
|
nextTick(() => {
|
outboundInputRef.value?.focus();
|
});
|
});
|
|
// 简单防抖函数
|
const debounce = (fn, delay = 100) => {
|
let timer = null;
|
return (...args) => {
|
if (timer) clearTimeout(timer);
|
timer = setTimeout(() => {
|
fn.apply(this, args);
|
}, delay);
|
};
|
};
|
|
// 打开弹窗
|
const open = () => {
|
showDetailBox.value = true;
|
scannedBarcodes.value = [];
|
formData.barcode = "";
|
orderForm.outboundOrderNo = "";
|
orderForm.purchaseOrderNo = "";
|
submitLoading.value = false; // 打开弹窗时重置提交loading
|
isOutboundVerified.value = false; // 打开弹窗时重置出库单验证状态
|
nextTick(() => {
|
outboundInputRef.value?.focus(); // 打开弹窗仍聚焦出库单输入框
|
});
|
};
|
|
/**
|
* 验证出库单据号的有效性
|
* 核心修改：验证成功后标记isOutboundVerified为true，失败则重置为false
|
*/
|
const validateOutboundOrder = async () => {
|
const outboundOrderNo = orderForm.outboundOrderNo.trim();
|
if (!outboundOrderNo) {
|
ElMessage.warning("请输入出库单据号");
|
return;
|
}
|
|
try {
|
loading.value = true;
|
const res = await http.post(
|
`/api/OutboundPicking/GetAvailablePickingOrders?outOrder=`+ outboundOrderNo,
|
"验证出库单据号中..."
|
);
|
|
if (res.status !== true) {
|
// 验证失败：清空输入框，提示错误，重置验证状态，聚焦回出库单输入框
|
orderForm.outboundOrderNo = "";
|
isOutboundVerified.value = false;
|
ElMessage.error(res.message || "出库单据号验证失败，请检查单据号是否正确");
|
nextTick(() => {
|
outboundInputRef.value?.focus(); // 失败聚焦出库单输入框
|
});
|
return;
|
}
|
|
// 验证成功：标记验证状态为true，提示用户，聚焦条码扫描框
|
isOutboundVerified.value = true;
|
ElMessage.success("出库单据号验证通过");
|
nextTick(() => {
|
barcodeInputRef.value?.focus(); // 成功直接跳转到条码扫描框
|
});
|
} catch (error) {
|
// 接口异常：清空输入框，提示错误，重置验证状态，聚焦回出库单输入框
|
orderForm.outboundOrderNo = "";
|
isOutboundVerified.value = false;
|
ElMessage.error(`出库单据号验证异常：${error.message || "网络错误，请重试"}`);
|
nextTick(() => {
|
outboundInputRef.value?.focus(); // 异常聚焦出库单输入框
|
});
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 出库单输入处理
|
const handleOutboundInput = (value) => {
|
// 核心修改：输入时自动重置验证状态（防止手动修改已验证的出库单号）
|
if (value && value.trim()) {
|
isOutboundVerified.value = false;
|
}
|
};
|
|
// 采购单输入处理
|
const handlePurchaseInput = (value) => {
|
if (value && value.trim()) {
|
// 可保留采购单号格式验证逻辑
|
}
|
};
|
|
// 聚焦条码输入框（复用函数）
|
const focusBarcodeInputDirectly = () => {
|
if (isOutboundVerified.value) {
|
barcodeInputRef.value?.focus();
|
} else {
|
ElMessage.warning("请先输入并验证有效的出库单据号");
|
nextTick(() => {
|
outboundInputRef.value?.focus();
|
});
|
}
|
};
|
|
/**
|
* 根据条码查询采购单号
|
*/
|
const getPurchaseOrderByBarcode = async (barcode) => {
|
const res = await http.post(`/api/OutboundPicking/GetPurchaseOrderByBarcode?barCode=${encodeURIComponent(barcode)}`, "查询采购单号中...");
|
|
if (res.status !== true) {
|
throw new Error(res.message || "查询采购单号失败");
|
}
|
|
let purchaseOrderNo = '';
|
if (Array.isArray(res.data) && res.data.length > 0) {
|
purchaseOrderNo = res.data[0].purchaseOrderNo || res.data[0].orderId;
|
} else {
|
purchaseOrderNo = res.data?.purchaseOrderNo || res.data?.orderId;
|
}
|
|
return purchaseOrderNo;
|
};
|
|
// 扫描条码核心逻辑
|
const handleScan = async () => {
|
// 核心新增：前置校验，确保出库单已验证
|
if (!isOutboundVerified.value) {
|
ElMessage.warning("请先验证有效的出库单据号后再扫描条码");
|
playError(); // ========== 仅新增这一行 ==========
|
nextTick(() => {
|
outboundInputRef.value?.focus();
|
});
|
return;
|
}
|
|
if (!formRef.value) return;
|
await formRef.value.validateField('barcode');
|
|
const barcode = formData.barcode.trim();
|
const outboundOrderNo = orderForm.outboundOrderNo.trim();
|
|
// 条码去重
|
const isDuplicate = scannedBarcodes.value.some(item => item.barcode === barcode);
|
if (isDuplicate) {
|
ElMessage.warning(`条码【${barcode}】已存在，无需重复扫描`);
|
playError(); // ========== 仅新增这一行 ==========
|
formData.barcode = "";
|
nextTick(() => barcodeInputRef.value?.focus()); // 去重后仍聚焦条码框
|
return;
|
}
|
|
try {
|
loading.value = true;
|
|
// 步骤1：查询采购单号
|
let purchaseOrderNo = '';
|
try {
|
purchaseOrderNo = await getPurchaseOrderByBarcode(barcode);
|
if (purchaseOrderNo) {
|
orderForm.purchaseOrderNo = purchaseOrderNo;
|
} else {
|
ElMessage.info("未查询到该条码对应的采购单号，继续验证条码有效性");
|
playError(); // ========== 仅新增这一行 ==========
|
}
|
} catch (error) {
|
ElMessage.info("未查询到该条码对应的采购单号，继续验证条码有效性：" + error.message);
|
playError(); // ========== 仅新增这一行 ==========
|
}
|
|
// 步骤2：验证条码并获取物料信息
|
const validateRes = await http.post("/api/OutboundPicking/BarcodeValidate", {
|
outOder: outboundOrderNo,
|
inOder: purchaseOrderNo || orderForm.purchaseOrderNo,
|
barCode: barcode
|
});
|
|
if (validateRes.status === true) {
|
if (!Array.isArray(validateRes.data) || validateRes.data.length === 0) {
|
ElMessage.warning("该条码验证成功，但未返回物料信息");
|
playError(); // ========== 仅新增这一行 ==========
|
formData.barcode = "";
|
nextTick(() => barcodeInputRef.value?.focus());
|
} else {
|
const newItems = validateRes.data.map(item => ({
|
barcode: item.barcode || '',
|
materielCode: item.materielCode || '',
|
materielName: item.materielName || '',
|
batchNo: item.batchNo || '',
|
orderQuantity: item.orderQuantity || item.quantity || 0,
|
supplyCode: item.supplyCode || '',
|
purchaseOrderNo: purchaseOrderNo || ''
|
}));
|
scannedBarcodes.value.push(...newItems);
|
ElMessage.success(`扫描成功，新增 ${newItems.length} 条物料信息，累计 ${scannedBarcodes.value.length} 条`);
|
playSuccess(); // ========== 仅新增这一行 ==========
|
formData.barcode = "";
|
}
|
} else {
|
|
playError(); // ========== 仅新增这一行 ==========
|
formData.barcode = "";
|
nextTick(() => barcodeInputRef.value?.focus());
|
}
|
} catch (error) {
|
ElMessage.error(error.message);
|
playError(); // ========== 仅新增这一行 ==========
|
formData.barcode = "";
|
nextTick(() => barcodeInputRef.value?.focus());
|
} finally {
|
loading.value = false;
|
// 扫描完成后始终聚焦条码输入框（方便连续扫描）
|
nextTick(() => {
|
barcodeInputRef.value?.focus();
|
if (barcodeInputRef.value?.input) {
|
barcodeInputRef.value.input.select = () => {};
|
}
|
});
|
}
|
};
|
|
// 带防抖的扫描处理
|
const debouncedHandleScan = debounce(async (e) => {
|
e.stopPropagation();
|
e.preventDefault();
|
await handleScan();
|
}, 100);
|
|
// 移除单条记录
|
const removeItem = async (index, barcode) => {
|
try {
|
loading.value = true;
|
const currentItem = scannedBarcodes.value[index];
|
const res = await http.post("/api/OutboundPicking/DeleteBarcode", {
|
outOder: orderForm.outboundOrderNo,
|
inOder: currentItem?.purchaseOrderNo || orderForm.purchaseOrderNo,
|
barCode: barcode
|
});
|
|
if (res.status === true) {
|
scannedBarcodes.value.splice(index, 1);
|
ElMessage.success("删除成功");
|
if (scannedBarcodes.value.length === 0) {
|
orderForm.purchaseOrderNo = "";
|
}
|
} else {
|
ElMessage.error("删除失败：" + (res.message || '删除失败'));
|
}
|
} catch (error) {
|
ElMessage.error("删除条码异常：" + error.message);
|
} finally {
|
loading.value = false;
|
// 删除后仍聚焦条码输入框
|
nextTick(() => barcodeInputRef.value?.focus());
|
}
|
};
|
|
// 提交出库
|
const submit = async () => {
|
// 核心新增：前置校验出库单验证状态
|
if (!isOutboundVerified.value) {
|
ElMessage.warning("出库单据号未验证，无法提交");
|
nextTick(() => {
|
outboundInputRef.value?.focus();
|
});
|
return;
|
}
|
|
if (scannedBarcodes.value.length === 0) {
|
ElMessage.warning("请先扫描至少一条条码");
|
nextTick(() => barcodeInputRef.value?.focus());
|
return;
|
}
|
|
const barcodes = scannedBarcodes.value.map(item => item.barcode);
|
const purchaseOrderNos = [...new Set(scannedBarcodes.value.map(item => item.purchaseOrderNo).filter(Boolean))];
|
|
try {
|
// 开启提交loading，显示遮罩层
|
submitLoading.value = true;
|
const res = await http.post("/api/OutboundPicking/NoStockOutSubmit", {
|
OutOderSubmit: orderForm.outboundOrderNo,
|
InOderSubmit: purchaseOrderNos.join(',') || '',
|
BarCodeSubmit: barcodes
|
});
|
|
if (res.status === true) {
|
ElMessage.success("出库提交成功");
|
showDetailBox.value = false;
|
scannedBarcodes.value = [];
|
orderForm.purchaseOrderNo = "";
|
isOutboundVerified.value = false; // 提交成功后重置验证状态
|
} else {
|
ElMessage.error("出库提交失败：" + (res.message || '提交失败'));
|
nextTick(() => barcodeInputRef.value?.focus());
|
}
|
} catch (error) {
|
ElMessage.error("出库提交异常：" + error.message);
|
nextTick(() => barcodeInputRef.value?.focus());
|
} finally {
|
// 关闭提交loading，隐藏遮罩层
|
submitLoading.value = false;
|
loading.value = false;
|
}
|
};
|
|
// 暴露给父组件的方法
|
defineExpose({
|
open
|
});
|
</script>
|
|
<style scoped>
|
/*过渡动画 */
|
.barcode-item-transition-enter-active,
|
.barcode-item-transition-leave-active {
|
transition: all 0.3s ease;
|
}
|
.barcode-item-transition-enter-from {
|
opacity: 0;
|
transform: translateY(10px);
|
}
|
.barcode-item-transition-leave-to {
|
opacity: 0;
|
transform: translateX(30px);
|
}
|
.barcode-item-transition-move {
|
transition: transform 1s ease;
|
}
|
|
/* 新增：提交遮罩层样式 */
|
.submit-mask {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(255, 255, 255, 0.85);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 100;
|
border-radius: inherit;
|
}
|
.mask-content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 12px;
|
color: #409eff;
|
font-size: 15px;
|
}
|
.loading-icon {
|
font-size: 24px;
|
animation: el-loading-circle 1.5s linear infinite;
|
}
|
|
/* 新增：验证状态标签样式 */
|
.verified-tag {
|
color: #67c23a;
|
font-size: 12px;
|
margin-left: 8px;
|
font-weight: 500;
|
}
|
.loading-tag {
|
color: #409eff;
|
font-size: 12px;
|
margin-left: 8px;
|
font-weight: 500;
|
animation: spin 1s linear infinite;
|
}
|
@keyframes spin {
|
0% { transform: rotate(0deg); }
|
100% { transform: rotate(360deg); }
|
}
|
|
.scan-list {
|
width: 100%;
|
}
|
|
.custom-card {
|
border-radius: 12px;
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
}
|
.custom-card:hover {
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
.header-title {
|
font-weight: 600;
|
font-size: 15px;
|
color: #333;
|
}
|
|
.card-body {
|
padding: 0;
|
}
|
|
.custom-scrollbar :deep(.el-scrollbar__thumb) {
|
background: rgba(0, 0, 0, 0.2);
|
border-radius: 4px;
|
width: 4px;
|
}
|
.custom-scrollbar :deep(.el-scrollbar__bar:hover .el-scrollbar__thumb) {
|
background: rgba(0, 0, 0, 0.3);
|
width: 6px;
|
}
|
.custom-scrollbar :deep(.el-scrollbar__wrap) {
|
overflow-x: hidden;
|
}
|
|
.barcode-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
padding: 15px;
|
border-bottom: 1px solid #f7f7f7;
|
transition: background-color 0.2s ease;
|
}
|
.barcode-item:hover {
|
background-color: #fafafa;
|
}
|
.barcode-item:nth-child(odd) {
|
background-color: #f9f9f9;
|
}
|
.barcode-detail {
|
flex: 1;
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 8px 15px;
|
font-size: 14px;
|
}
|
@media (max-width: 1200px) {
|
.barcode-detail {
|
grid-template-columns: repeat(3, 1fr);
|
}
|
}
|
@media (max-width: 992px) {
|
.barcode-detail {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
.detail-row {
|
display: flex;
|
align-items: center;
|
}
|
.label {
|
color: #999;
|
margin-right: 5px;
|
white-space: nowrap;
|
}
|
.value {
|
color: #666;
|
flex: 1;
|
word-break: break-all;
|
}
|
|
.delete-btn {
|
color: #ea1919;
|
font-size: 16px;
|
transition: all 0.2s;
|
opacity: 0.7;
|
margin-left: 10px;
|
flex-shrink: 0;
|
}
|
.barcode-item:hover .delete-btn {
|
opacity: 1;
|
}
|
.delete-btn:hover {
|
color: #f56c6c !important;
|
background: rgba(245, 108, 108, 0.1);
|
}
|
|
.empty-tip {
|
text-align: center;
|
padding: 80px 0;
|
color: #999;
|
font-size: 14px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
gap: 15px;
|
}
|
.empty-tip i {
|
font-size: 40px;
|
color: #dcdfe6;
|
}
|
|
.custom-input :deep(.el-input__inner) {
|
border-radius: 6px;
|
border-color: #e4e7ed;
|
transition: all 0.3s;
|
height: 36px;
|
line-height: 36px;
|
}
|
.custom-input :deep(.el-input__inner:focus) {
|
border-color: #409eff;
|
box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
|
}
|
|
.custom-button {
|
border-radius: 6px;
|
height: 36px;
|
line-height: 36px;
|
font-size: 13px;
|
font-weight: 500;
|
transition: all 0.2s;
|
}
|
.custom-button:hover {
|
transform: translateY(-1px);
|
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
|
}
|
|
.footer-actions {
|
text-align: right;
|
}
|
.submit-btn {
|
border-radius: 6px;
|
font-weight: 500;
|
padding: 10px 20px;
|
transition: all 0.2s;
|
}
|
.submit-btn:hover {
|
transform: translateY(-1px);
|
box-shadow: 0 4px 12px rgba(46, 164, 79, 0.2);
|
}
|
.cancel-btn {
|
color: #666;
|
margin-right: 10px;
|
transition: color 0.2s;
|
}
|
.cancel-btn:hover {
|
color: #333;
|
background: #f5f5f5;
|
}
|
</style>
|
|
<style>
|
.text-button:hover {
|
background-color: #f0f9eb !important;
|
}
|
.el-table .warning-row {
|
background: oldlace;
|
}
|
.box-table .el-table tbody tr:hover > td {
|
background-color: #d8e0d4 !important;
|
}
|
.box-table .el-table tbody tr.current-row > td {
|
background-color: #f0f9eb !important;
|
}
|
.el-table .success-row {
|
background: #f0f9eb;
|
}
|
.box-table .el-table {
|
border: 1px solid #ebeef5;
|
}
|
.box-head .el-alert__content {
|
width: 100%;
|
}
|
</style>
|
