DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(wms): 添加分卷操作的多仓库标签功能

Browse Source 
在分卷操作页面中，根据工序类型动态显示对应的仓库标签，并实现标签切换时自动加载对应仓库的物料列表
This commit is contained in:
砂糖
2025-11-24 17:48:38 +08:00
parent 9d7ce2472d
commit 76c65bd31d
2 changed files with 175 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
klp-ui/src/views/wms/coil/do/split.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<DoPage :label="actionType" /> <DoPage :label="actionType" :tabs="tabs" />
</template> </template>
<script> <script>
@@ -12,13 +12,50 @@
}, },
data() { data() {
return { return {
actionType: '分卷' actionType: '分卷',
tabs: [],
} }
}, },
watch: { watch: {
'$route.query.actionType': { '$route.query.actionType': {
handler(newVal) { handler(newVal) {
this.actionType = newVal this.actionType = newVal;
// 根据名字获取默认的查询参数
const map = {
'酸连轧工序': [
{value: '1988150099140866050', label: '酸连轧成品库'},
{value: '1988150263284953089', label: '镀锌原料库'},
{value: '1988150545175736322', label: '脱脂原料库'},
],
'镀锌工序': [
{value: '1988150263284953089', label: '镀锌原料库'},
{value: '1988150323162836993', label: '镀锌成品库'},
],
'脱脂工序': [
{value: '1988150545175736322', label: '脱脂原料库'},
{value: '1988150586938421250', label: '脱脂成品库'},
],
'退火工序': [
{value: '1988150648993148929', label: '罩式退火原料库'},
{value: '1988150704496373761', label: '罩式退火成品库'},
],
'拉矫平整工序': [
{value: '1988150854442741762', label: '拉矫原料库'},
{value: '1988150915591499777', label: '拉矫成品库'},
],
'双机架工序': [
{value: '1992873386047643650', label: '双机架原料库'},
{value: '1992873437713080322', label: '双机架成品库'},
],
'镀铬工序': [
{value: '1988151076996706306', label: '镀铬原料库'},
{value: '1988151132361519105', label: '镀铬成品库'},
],
}
// 从map中获取默认的查询参数
const defaultWarehouseIds = map[this.actionType] || []
console.log(defaultWarehouseIds, 'defaultWarehouseIds')
this.tabs = defaultWarehouseIds
}, },
immediate: true immediate: true
} }

304
klp-ui/src/views/wms/coil/panels/do.vue
View File

@@ -5,29 +5,24 @@
<el-col :span="12"> <el-col :span="12">
<div class="section-card material-section"> <div class="section-card material-section">
<div class="section-header"> <div class="section-header">
<h3 class="section-title">待领物料列表</h3> <!-- 当tab数量多余一个时，额外渲染一个el-tab-pane. 当tab切换时，切换对应的物料列表 -->
<el-tabs v-if="tabs.length > 1" v-model="currentTab" type="card" class="material-tabs">
<el-tab-pane v-for="(tab, index) in tabs" :key="tab.value" :label="tab.label"
:name="tab.value"></el-tab-pane>
</el-tabs>
<h3 class="section-title" v-else>待领物料列表</h3>
<el-button size="mini" icon="el-icon-refresh" @click="getMaterialCoil">刷新</el-button> <el-button size="mini" icon="el-icon-refresh" @click="getMaterialCoil">刷新</el-button>
</div> </div>
<!-- 搜索栏 --> <!-- 搜索栏 -->
<el-form :model="materialQueryParams" ref="materialQueryForm" size="small" :inline="true" class="query-form"> <el-form :model="materialQueryParams" ref="materialQueryForm" size="small" :inline="true" class="query-form">
<el-form-item label="入场钢卷号" prop="enterCoilNo"> <el-form-item label="入场钢卷号" prop="enterCoilNo">
<el-input <el-input v-model="materialQueryParams.enterCoilNo" placeholder="请输入入场钢卷号" clearable
v-model="materialQueryParams.enterCoilNo" @keyup.enter.native="handleMaterialQuery" style="width: 150px;" />
placeholder="请输入入场钢卷号"
clearable
@keyup.enter.native="handleMaterialQuery"
style="width: 150px;"
/>
</el-form-item> </el-form-item>
<el-form-item label="当前钢卷号" prop="currentCoilNo"> <el-form-item label="当前钢卷号" prop="currentCoilNo">
<el-input <el-input v-model="materialQueryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
v-model="materialQueryParams.currentCoilNo" @keyup.enter.native="handleMaterialQuery" style="width: 150px;" />
placeholder="请输入当前钢卷号"
clearable
@keyup.enter.native="handleMaterialQuery"
style="width: 150px;"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleMaterialQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleMaterialQuery">搜索</el-button>
@@ -41,25 +36,18 @@
<i class="el-icon-box"></i> <i class="el-icon-box"></i>
<p>暂无待领物料</p> <p>暂无待领物料</p>
</div> </div>
<div
v-for="(item, index) in materialCoilList" <div v-for="(item, index) in materialCoilList" :key="item.coilId || index" class="material-card">
:key="item.coilId || index"
class="material-card"
>
<div class="card-header"> <div class="card-header">
<div class="header-left"> <div class="header-left">
<el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag> <el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
<span class="material-type">{{ item.materialType || '原料' }}</span> <span class="material-type">{{ item.materialType || '原料' }}</span>
<el-popover <el-popover v-if="item.rawMaterial || item.product" placement="top" width="280" trigger="hover"
v-if="item.rawMaterial || item.product" popper-class="material-params-popover">
placement="top"
width="280"
trigger="hover"
popper-class="material-params-popover"
>
<div class="material-params-content"> <div class="material-params-content">
<div class="params-title"> <div class="params-title">
{{ item.itemType === 'raw_material' ? (item.rawMaterial && item.rawMaterial.rawMaterialName || '—') : (item.product && item.product.productName || '—') }} {{ item.itemType === 'raw_material' ? (item.rawMaterial && item.rawMaterial.rawMaterialName ||
'—') : (item.product && item.product.productName || '—') }}
</div> </div>
<div class="params-list"> <div class="params-list">
<div class="param-item" v-if="item.itemType === 'raw_material' && item.rawMaterial"> <div class="param-item" v-if="item.itemType === 'raw_material' && item.rawMaterial">
@@ -135,7 +123,7 @@
</el-popover> </el-popover>
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="info-list"> <div class="info-list">
<div class="info-item"> <div class="info-item">
@@ -152,7 +140,8 @@
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label">库区：</span> <span class="info-label">库区：</span>
<span class="info-value" :title="item.actualWarehouseName">{{ item.actualWarehouseName || '—' }}</span> <span class="info-value" :title="item.actualWarehouseName">{{ item.actualWarehouseName || '—'
}}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label">重量：</span> <span class="info-label">重量：</span>
@@ -160,28 +149,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<el-button <el-button type="primary" icon="el-icon-check" size="mini" @click="handlePickMaterial(item)"
type="primary" :loading="item.picking" class="action-btn">领料</el-button>
icon="el-icon-check"
size="mini"
@click="handlePickMaterial(item)"
:loading="item.picking"
class="action-btn"
>领料</el-button>
</div> </div>
</div> </div>
</div> </div>
<!-- 分页 --> <!-- 分页 -->
<pagination <pagination v-show="materialTotal > 0" :total="materialTotal" :page.sync="materialQueryParams.pageNum"
v-show="materialTotal > 0" :limit.sync="materialQueryParams.pageSize" @pagination="getMaterialCoil" />
:total="materialTotal"
:page.sync="materialQueryParams.pageNum"
:limit.sync="materialQueryParams.pageSize"
@pagination="getMaterialCoil"
/>
</div> </div>
</el-col> </el-col>
@@ -196,13 +174,8 @@
<!-- 搜索栏 --> <!-- 搜索栏 -->
<el-form :model="actionQueryParams" ref="actionQueryForm" size="small" :inline="true" class="query-form"> <el-form :model="actionQueryParams" ref="actionQueryForm" size="small" :inline="true" class="query-form">
<el-form-item label="钢卷号" prop="currentCoilNo"> <el-form-item label="钢卷号" prop="currentCoilNo">
<el-input <el-input v-model="actionQueryParams.currentCoilNo" placeholder="请输入钢卷号" clearable
v-model="actionQueryParams.currentCoilNo" @keyup.enter.native="handleActionQuery" style="width: 150px;" />
placeholder="请输入钢卷号"
clearable
@keyup.enter.native="handleActionQuery"
style="width: 150px;"
/>
</el-form-item> </el-form-item>
<el-form-item label="操作状态" prop="actionStatus"> <el-form-item label="操作状态" prop="actionStatus">
<el-select v-model="actionQueryParams.actionStatus" placeholder="请选择状态" clearable style="width: 120px;"> <el-select v-model="actionQueryParams.actionStatus" placeholder="请选择状态" clearable style="width: 120px;">
@@ -224,15 +197,10 @@
<i class="el-icon-document"></i> <i class="el-icon-document"></i>
<p>暂无待操作任务</p> <p>暂无待操作任务</p>
</div> </div>
<div <div v-for="(item, index) in pendingActionList" :key="item.actionId || index" class="action-card" :class="{
v-for="(item, index) in pendingActionList" 'urgent-card': item.priority === 2,
:key="item.actionId || index" 'important-card': item.priority === 1
class="action-card" }">
:class="{
'urgent-card': item.priority === 2,
'important-card': item.priority === 1
}"
>
<div class="card-header"> <div class="card-header">
<el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag> <el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
<div class="status-tags"> <div class="status-tags">
@@ -244,12 +212,13 @@
<el-tag v-else-if="item.priority === 1" type="warning" size="mini">重要</el-tag> <el-tag v-else-if="item.priority === 1" type="warning" size="mini">重要</el-tag>
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="info-list"> <div class="info-list">
<div class="info-item"> <div class="info-item">
<span class="info-label">类型：</span> <span class="info-label">类型：</span>
<dict-tag :options="dict.type.action_type" :value="item.actionType" class="action-type-tag"></dict-tag> <dict-tag :options="dict.type.action_type" :value="item.actionType"
class="action-type-tag"></dict-tag>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label">来源：</span> <span class="info-label">来源：</span>
@@ -276,64 +245,34 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<!-- 待处理状态显示操作按钮 --> <!-- 待处理状态显示操作按钮 -->
<template v-if="item.actionStatus === 0"> <template v-if="item.actionStatus === 0">
<el-button <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleProcess(item)"
type="primary" class="action-btn">操作</el-button>
icon="el-icon-edit" <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAction(item)"
size="mini" class="action-btn">删除</el-button>
@click="handleProcess(item)"
class="action-btn"
>操作</el-button>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
@click="handleDeleteAction(item)"
class="action-btn"
>删除</el-button>
</template> </template>
<!-- 处理中状态显示继续按钮 --> <!-- 处理中状态显示继续按钮 -->
<template v-else-if="item.actionStatus === 1"> <template v-else-if="item.actionStatus === 1">
<el-button <el-button type="warning" icon="el-icon-edit" size="mini" @click="handleProcess(item)"
type="warning" class="action-btn">继续</el-button>
icon="el-icon-edit" <el-button type="info" icon="el-icon-close" size="mini" @click="handleCancel(item)"
size="mini" class="action-btn">取消</el-button>
@click="handleProcess(item)"
class="action-btn"
>继续</el-button>
<el-button
type="info"
icon="el-icon-close"
size="mini"
@click="handleCancel(item)"
class="action-btn"
>取消</el-button>
</template> </template>
<!-- 已完成或已取消状态显示删除按钮 --> <!-- 已完成或已取消状态显示删除按钮 -->
<template v-else> <template v-else>
<el-button <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAction(item)"
type="danger" class="action-btn">删除</el-button>
icon="el-icon-delete"
size="mini"
@click="handleDeleteAction(item)"
class="action-btn"
>删除</el-button>
</template> </template>
</div> </div>
</div> </div>
</div> </div>
<!-- 分页 --> <!-- 分页 -->
<pagination <pagination v-show="actionTotal > 0" :total="actionTotal" :page.sync="actionQueryParams.pageNum"
v-show="actionTotal > 0" :limit.sync="actionQueryParams.pageSize" @pagination="getPendingAction" />
:total="actionTotal"
:page.sync="actionQueryParams.pageNum"
:limit.sync="actionQueryParams.pageSize"
@pagination="getPendingAction"
/>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@@ -354,6 +293,10 @@ export default {
label: { label: {
type: String, type: String,
default: () => '酸连轧工序' default: () => '酸连轧工序'
},
tabs: {
type: Array,
default: () => []
} }
}, },
components: { components: {
@@ -366,6 +309,7 @@ export default {
materialLoading: false, materialLoading: false,
materialCoilList: [], materialCoilList: [],
materialTotal: 0, materialTotal: 0,
currentTab: '',
materialQueryParams: { materialQueryParams: {
pageNum: 1, pageNum: 1,
pageSize: 20, pageSize: 20,
@@ -374,7 +318,7 @@ export default {
enterCoilNo: null, enterCoilNo: null,
currentCoilNo: null currentCoilNo: null
}, },
// 待操作列表相关 // 待操作列表相关
actionLoading: false, actionLoading: false,
pendingActionList: [], pendingActionList: [],
@@ -397,7 +341,8 @@ export default {
return label.includes(this.label) return label.includes(this.label)
}) })
return acidAction ? parseInt(acidAction.value) : null return acidAction ? parseInt(acidAction.value) : null
} },
}, },
watch: { watch: {
// 监听字典数据加载，当acidRollingActionType有值时自动加载待操作列表 // 监听字典数据加载，当acidRollingActionType有值时自动加载待操作列表
@@ -409,12 +354,31 @@ export default {
this.getPendingAction() this.getPendingAction()
} }
} }
},
tabs: {
handler(newVal) {
if (newVal.length > 0) {
// this.materialQueryParams.warehouseId = newVal[0]?.value || ''
// 设置currentTab为第一个tab的value
this.currentTab = newVal[0]?.value || ''
}
},
immediate: true
},
currentTab: {
handler(newVal) {
if (newVal) {
this.materialQueryParams.warehouseId = newVal
this.getMaterialCoil()
}
},
immediate: true
} }
}, },
created() { created() {
// 立即加载物料列表（不依赖字典） // 立即加载物料列表（不依赖字典）
this.getMaterialCoil() // this.getMaterialCoil()
// 尝试加载待操作列表（如果字典已加载） // 尝试加载待操作列表（如果字典已加载）
this.$nextTick(() => { this.$nextTick(() => {
if (this.acidRollingActionType) { if (this.acidRollingActionType) {
@@ -434,7 +398,7 @@ export default {
}, },
methods: { methods: {
parseTime, parseTime,
// ========== 物料列表相关方法 ========== // ========== 物料列表相关方法 ==========
/** 查询物料列表 */ /** 查询物料列表 */
getMaterialCoil() { getMaterialCoil() {
@@ -465,9 +429,9 @@ export default {
this.$message.error(`未找到${this.label}操作类型，请检查字典配置`) this.$message.error(`未找到${this.label}操作类型，请检查字典配置`)
return return
} }
this.$set(row, 'picking', true) this.$set(row, 'picking', true)
const pendingData = { const pendingData = {
coilId: row.coilId, coilId: row.coilId,
currentCoilNo: row.currentCoilNo, currentCoilNo: row.currentCoilNo,
@@ -478,7 +442,7 @@ export default {
priority: 0, // 默认普通优先级 priority: 0, // 默认普通优先级
remark: `PC端领料创建-${this.label}` remark: `PC端领料创建-${this.label}`
} }
addPendingAction(pendingData).then(response => { addPendingAction(pendingData).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message.success('领料成功，已创建待操作任务') this.$message.success('领料成功，已创建待操作任务')
@@ -493,7 +457,7 @@ export default {
this.$set(row, 'picking', false) this.$set(row, 'picking', false)
}) })
}, },
// ========== 待操作列表相关方法 ========== // ========== 待操作列表相关方法 ==========
/** 查询待操作列表 */ /** 查询待操作列表 */
getPendingAction() { getPendingAction() {
@@ -505,7 +469,7 @@ export default {
this.actionLoading = false this.actionLoading = false
return return
} }
this.actionLoading = true this.actionLoading = true
// 强制使用酸连轧工序的 actionType，忽略查询参数中的 actionType // 强制使用酸连轧工序的 actionType，忽略查询参数中的 actionType
const queryParams = { const queryParams = {
@@ -543,20 +507,20 @@ export default {
/** 处理操作 - 跳转到对应页面 */ /** 处理操作 - 跳转到对应页面 */
handleProcess(row) { handleProcess(row) {
const actionType = parseInt(row.actionType) const actionType = parseInt(row.actionType)
// 特殊处理：发货和移库操作不需要跳转 // 特殊处理：发货和移库操作不需要跳转
if (actionType === 4 || actionType === 5) { if (actionType === 4 || actionType === 5) {
this.$message.info(actionType === 4 ? '发货操作已在移动端完成' : '移库操作已在移动端完成') this.$message.info(actionType === 4 ? '发货操作已在移动端完成' : '移库操作已在移动端完成')
return return
} }
// 根据操作类型跳转到不同页面 // 根据操作类型跳转到不同页面
let path = '' let path = ''
// 分条操作：100-199 // 分条操作：100-199
if (actionType >= 100 && actionType <= 199) { if (actionType >= 100 && actionType <= 199) {
path = '/wms/split' path = '/wms/split'
} }
// 合卷操作：200-299 // 合卷操作：200-299
else if (actionType == 200) { else if (actionType == 200) {
path = '/wms/merge' path = '/wms/merge'
@@ -565,19 +529,19 @@ export default {
else { else {
path = '/wms/typing' path = '/wms/typing'
} }
if (!path) { if (!path) {
this.$message.error('未知的操作类型: ' + row.actionType) this.$message.error('未知的操作类型: ' + row.actionType)
return return
} }
// 更新状态为处理中 // 更新状态为处理中
startProcess(row.actionId).then(response => { startProcess(row.actionId).then(response => {
if (response.code !== 200) { if (response.code !== 200) {
this.$message.error(response.msg || '更新状态失败') this.$message.error(response.msg || '更新状态失败')
return return
} }
// 跳转并传递参数 // 跳转并传递参数
this.$router.push({ this.$router.push({
path: path, path: path,
@@ -602,7 +566,7 @@ export default {
}).then(() => { }).then(() => {
this.$message.success('操作已取消') this.$message.success('操作已取消')
this.getPendingAction() this.getPendingAction()
}).catch(() => {}) }).catch(() => { })
}, },
/** 删除待操作 */ /** 删除待操作 */
handleDeleteAction(row) { handleDeleteAction(row) {
@@ -616,7 +580,7 @@ export default {
}).then(() => { }).then(() => {
this.getPendingAction() this.getPendingAction()
this.$message.success('删除成功') this.$message.success('删除成功')
}).catch(() => {}) }).catch(() => { })
}, },
/** 获取物品名称 */ /** 获取物品名称 */
getItemName(item) { getItemName(item) {
@@ -666,6 +630,7 @@ export default {
.section-header { .section-header {
border-bottom-color: #409eff; border-bottom-color: #409eff;
} }
.section-title { .section-title {
color: #409eff; color: #409eff;
} }
@@ -675,6 +640,7 @@ export default {
.section-header { .section-header {
border-bottom-color: #67c23a; border-bottom-color: #67c23a;
} }
.section-title { .section-title {
color: #67c23a; color: #67c23a;
} }
@@ -696,25 +662,25 @@ export default {
max-height: calc(100vh - 320px); max-height: calc(100vh - 320px);
overflow-y: auto; overflow-y: auto;
padding-right: 4px; padding-right: 4px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 6px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: #f1f1f1; background: #f1f1f1;
border-radius: 3px; border-radius: 3px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #c1c1c1; background: #c1c1c1;
border-radius: 3px; border-radius: 3px;
&:hover { &:hover {
background: #a8a8a8; background: #a8a8a8;
} }
} }
@media (min-width: 1600px) { @media (min-width: 1600px) {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
@@ -725,14 +691,14 @@ export default {
text-align: center; text-align: center;
padding: 60px 20px; padding: 60px 20px;
color: #909399; color: #909399;
i { i {
font-size: 48px; font-size: 48px;
margin-bottom: 16px; margin-bottom: 16px;
display: block; display: block;
color: #c0c4cc; color: #c0c4cc;
} }
p { p {
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
@@ -748,51 +714,51 @@ export default {
flex-direction: column; flex-direction: column;
transition: all 0.3s ease; transition: all 0.3s ease;
height: 100%; height: 100%;
&:hover { &:hover {
border-color: #409eff; border-color: #409eff;
box-shadow: 0 2px 6px rgba(64, 158, 255, 0.12); box-shadow: 0 2px 6px rgba(64, 158, 255, 0.12);
} }
.card-header { .card-header {
padding: 6px 8px; padding: 6px 8px;
border-bottom: 1px solid #e4e7ed; border-bottom: 1px solid #e4e7ed;
background-color: #fafafa; background-color: #fafafa;
.header-left { .header-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
} }
.coil-no-tag { .coil-no-tag {
font-weight: 600; font-weight: 600;
font-size: 11px; font-size: 11px;
padding: 2px 6px; padding: 2px 6px;
} }
.material-type { .material-type {
font-size: 11px; font-size: 11px;
color: #606266; color: #606266;
font-weight: 500; font-weight: 500;
} }
.param-icon { .param-icon {
font-size: 13px; font-size: 13px;
color: #909399; color: #909399;
cursor: pointer; cursor: pointer;
transition: color 0.3s; transition: color 0.3s;
&:hover { &:hover {
color: #409eff; color: #409eff;
} }
} }
} }
.card-body { .card-body {
padding: 8px; padding: 8px;
flex: 1; flex: 1;
.info-list { .info-list {
.info-item { .info-item {
display: flex; display: flex;
@@ -800,11 +766,11 @@ export default {
margin-bottom: 4px; margin-bottom: 4px;
font-size: 11px; font-size: 11px;
line-height: 1.4; line-height: 1.4;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.info-label { .info-label {
color: #909399; color: #909399;
white-space: nowrap; white-space: nowrap;
@@ -812,7 +778,7 @@ export default {
min-width: 40px; min-width: 40px;
font-size: 11px; font-size: 11px;
} }
.info-value { .info-value {
color: #303133; color: #303133;
flex: 1; flex: 1;
@@ -824,14 +790,14 @@ export default {
} }
} }
} }
.card-footer { .card-footer {
padding: 6px 8px; padding: 6px 8px;
border-top: 1px solid #e4e7ed; border-top: 1px solid #e4e7ed;
background-color: #fafafa; background-color: #fafafa;
display: flex; display: flex;
justify-content: center; justify-content: center;
.action-btn { .action-btn {
width: 100%; width: 100%;
padding: 5px 10px; padding: 5px 10px;
@@ -849,32 +815,32 @@ export default {
flex-direction: column; flex-direction: column;
transition: all 0.3s ease; transition: all 0.3s ease;
height: 100%; height: 100%;
&:hover { &:hover {
border-color: #67c23a; border-color: #67c23a;
box-shadow: 0 2px 8px rgba(103, 194, 58, 0.15); box-shadow: 0 2px 8px rgba(103, 194, 58, 0.15);
} }
&.urgent-card { &.urgent-card {
border-left: 4px solid #f56c6c; border-left: 4px solid #f56c6c;
background-color: #fef0f0; background-color: #fef0f0;
&:hover { &:hover {
border-color: #f56c6c; border-color: #f56c6c;
box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2); box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2);
} }
} }
&.important-card { &.important-card {
border-left: 4px solid #e6a23c; border-left: 4px solid #e6a23c;
background-color: #fdf6ec; background-color: #fdf6ec;
&:hover { &:hover {
border-color: #e6a23c; border-color: #e6a23c;
box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2); box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
} }
} }
.card-header { .card-header {
padding: 10px 12px; padding: 10px 12px;
border-bottom: 1px solid #e4e7ed; border-bottom: 1px solid #e4e7ed;
@@ -882,41 +848,41 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.coil-no-tag { .coil-no-tag {
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
} }
.status-tags { .status-tags {
display: flex; display: flex;
gap: 4px; gap: 4px;
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
.card-body { .card-body {
padding: 12px; padding: 12px;
flex: 1; flex: 1;
.info-list { .info-list {
.info-item { .info-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 8px;
font-size: 12px; font-size: 12px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.info-label { .info-label {
color: #909399; color: #909399;
white-space: nowrap; white-space: nowrap;
margin-right: 6px; margin-right: 6px;
min-width: 50px; min-width: 50px;
} }
.info-value { .info-value {
color: #303133; color: #303133;
flex: 1; flex: 1;
@@ -924,14 +890,14 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.action-type-tag { .action-type-tag {
font-size: 11px; font-size: 11px;
} }
} }
} }
} }
.card-footer { .card-footer {
padding: 10px 12px; padding: 10px 12px;
border-top: 1px solid #e4e7ed; border-top: 1px solid #e4e7ed;
@@ -939,7 +905,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 6px; gap: 6px;
.action-btn { .action-btn {
flex: 1; flex: 1;
font-size: 12px; font-size: 12px;
@@ -968,7 +934,7 @@ export default {
padding-bottom: 8px; padding-bottom: 8px;
border-bottom: 1px solid #e4e7ed; border-bottom: 1px solid #e4e7ed;
} }
.params-list { .params-list {
.param-item { .param-item {
.param-row { .param-row {
@@ -976,17 +942,17 @@ export default {
margin-bottom: 6px; margin-bottom: 6px;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.param-label { .param-label {
color: #909399; color: #909399;
min-width: 70px; min-width: 70px;
margin-right: 8px; margin-right: 8px;
} }
.param-value { .param-value {
color: #303133; color: #303133;
flex: 1; flex: 1;
@@ -994,7 +960,7 @@ export default {
} }
} }
} }
.param-divider { .param-divider {
height: 1px; height: 1px;
background-color: #e4e7ed; background-color: #e4e7ed;