refactor(steelGrade): 重构钢种管理页面布局和交互
feat(roller): 调整轧辊页面布局并移除标准组件 style(pdo): 修改操作按钮样式为文本类型 chore: 更新pnpm-lock.yaml文件依赖配置
This commit is contained in:
@@ -82,6 +82,6 @@ export function getSteelGradeInfo(gradeid) {
|
|||||||
export function deleteSteelGrade(id) {
|
export function deleteSteelGrade(id) {
|
||||||
return l2Request({
|
return l2Request({
|
||||||
method: 'delete',
|
method: 'delete',
|
||||||
url: `/l2-api/api/steelGrade/delete/${id}`
|
url: `/api/steelGrade/delete/${id}`
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -121,13 +121,13 @@
|
|||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<el-button
|
<el-button
|
||||||
size="mini"
|
size="mini"
|
||||||
type="primary"
|
type="text"
|
||||||
icon="el-icon-edit"
|
icon="el-icon-edit"
|
||||||
@click.stop="handleEdit(item)"
|
@click.stop="handleEdit(item)"
|
||||||
>操作</el-button>
|
>操作</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
size="mini"
|
size="mini"
|
||||||
type="danger"
|
type="text"
|
||||||
icon="el-icon-delete"
|
icon="el-icon-delete"
|
||||||
:loading="item.deleteLoading"
|
:loading="item.deleteLoading"
|
||||||
@click.stop="handleDelete(item)"
|
@click.stop="handleDelete(item)"
|
||||||
|
|||||||
@@ -32,6 +32,10 @@
|
|||||||
<el-table-column prop="rolledWeight" label="重量" show-overflow-tooltip />
|
<el-table-column prop="rolledWeight" label="重量" show-overflow-tooltip />
|
||||||
<el-table-column prop="rolledCount" label="轧制数量" show-overflow-tooltip />
|
<el-table-column prop="rolledCount" label="轧制数量" show-overflow-tooltip />
|
||||||
<el-table-column prop="instalTime" label="装机时间" show-overflow-tooltip />
|
<el-table-column prop="instalTime" label="装机时间" show-overflow-tooltip />
|
||||||
|
<!-- <el-table-column prop="usableLength" label="可用长度" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="leftLength" label="剩余长度" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="usableWeight" label="可用重量" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="leftWeight" label="剩余重量" show-overflow-tooltip /> -->
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,82 +0,0 @@
|
|||||||
<!-- 换坤标准,props接收在线辊的表格数据 -->
|
|
||||||
<template>
|
|
||||||
<div class="standard-roll">
|
|
||||||
<div class="panel-header">
|
|
||||||
<h4>换辊标准</h4>
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
:data="onlineData"
|
|
||||||
border
|
|
||||||
stripe
|
|
||||||
size="mini"
|
|
||||||
class="compact-table"
|
|
||||||
v-loading="loading"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
header-align="center"
|
|
||||||
align="center"
|
|
||||||
style="width: 100%; table-layout: fixed;"
|
|
||||||
>
|
|
||||||
<el-table-column prop="usableLength" label="可用长度" show-overflow-tooltip />
|
|
||||||
<el-table-column prop="leftLength" label="剩余长度" show-overflow-tooltip />
|
|
||||||
<el-table-column prop="usableWeight" label="可用重量" show-overflow-tooltip />
|
|
||||||
<el-table-column prop="leftWeight" label="剩余重量" show-overflow-tooltip />
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "Standard",
|
|
||||||
props: {
|
|
||||||
onlineData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loading: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
onlineData: {
|
|
||||||
handler() {
|
|
||||||
this.loading = false
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.standard-roll {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compact-table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-table th,
|
|
||||||
::v-deep .el-table td {
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -17,12 +17,12 @@
|
|||||||
:show-overflow-tooltip="true"
|
:show-overflow-tooltip="true"
|
||||||
style="width: 100%; table-layout: fixed;"
|
style="width: 100%; table-layout: fixed;"
|
||||||
>
|
>
|
||||||
<el-table-column fixed="left" label="位置/类型" min-width="130" show-overflow-tooltip>
|
<el-table-column label="位置/类型" show-overflow-tooltip>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
{{ getRollerTitle(scope.row.type, scope.row.position) }}
|
{{ getRollerTitle(scope.row.type, scope.row.position) }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="rollid" label="轧辊号" min-width="150" show-overflow-tooltip>
|
<el-table-column prop="rollid" label="轧辊号" show-overflow-tooltip>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-select
|
<el-select
|
||||||
size="mini"
|
size="mini"
|
||||||
@@ -30,6 +30,7 @@
|
|||||||
clearable
|
clearable
|
||||||
allow-create
|
allow-create
|
||||||
v-model="scope.row.rollid"
|
v-model="scope.row.rollid"
|
||||||
|
style="width: 100%;"
|
||||||
placeholder="请选择轧辊号"
|
placeholder="请选择轧辊号"
|
||||||
@change="handleChange(scope.row)"
|
@change="handleChange(scope.row)"
|
||||||
>
|
>
|
||||||
@@ -37,19 +38,19 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="diameter" label="直径" min-width="110" show-overflow-tooltip>
|
<el-table-column prop="diameter" label="直径" show-overflow-tooltip>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-input size="mini" :disabled="!scope.row.rollid" v-model="scope.row.diameter" placeholder="请输入直径" />
|
<el-input style="width: 100%;" size="mini" :disabled="!scope.row.rollid" v-model="scope.row.diameter" placeholder="请输入直径" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="rough" label="粗糙度" min-width="110" show-overflow-tooltip>
|
<el-table-column prop="rough" label="粗糙度" show-overflow-tooltip>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-input size="mini" :disabled="!scope.row.rollid" v-model="scope.row.rough" placeholder="请输入粗糙度" />
|
<el-input style="width: 100%;" size="mini" :disabled="!scope.row.rollid" v-model="scope.row.rough" placeholder="请输入粗糙度" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="crown" label="凹度" min-width="110" show-overflow-tooltip>
|
<el-table-column prop="crown" label="凹度" show-overflow-tooltip>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-input size="mini" :disabled="!scope.row.rollid" v-model="scope.row.crown" placeholder="请输入凹度" />
|
<el-input style="width: 100%;" size="mini" :disabled="!scope.row.rollid" v-model="scope.row.crown" placeholder="请输入凹度" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|||||||
@@ -1,21 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="roller-page" v-loading="loading">
|
<div class="roller-page" v-loading="loading">
|
||||||
<el-row class="panel-row">
|
<el-row class="panel-row">
|
||||||
<el-col :span="7">
|
<el-col :span="8">
|
||||||
<div class="panel-card tall-panel">
|
<div class="panel-card tall-panel">
|
||||||
<Standby :onlineData="onlineData" @online="fetchData" />
|
<Standby :onlineData="onlineData" @online="fetchData" />
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="16">
|
||||||
<div class="panel-card tall-panel">
|
<div class="panel-card tall-panel">
|
||||||
<Online :onlineData="onlineData" />
|
<Online :onlineData="onlineData" />
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="5">
|
|
||||||
<div class="panel-card tall-panel">
|
|
||||||
<Standard :onlineData="onlineData" />
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-row :gutter="12" style="height: 520px;">
|
<el-row :gutter="12" style="height: 520px;">
|
||||||
@@ -37,7 +32,6 @@
|
|||||||
import FilterVue from './components/filter.vue'
|
import FilterVue from './components/filter.vue'
|
||||||
import History from './components/history.vue'
|
import History from './components/history.vue'
|
||||||
import Online from './components/online.vue'
|
import Online from './components/online.vue'
|
||||||
import Standard from './components/standard.vue'
|
|
||||||
import Standby from './components/standby.vue'
|
import Standby from './components/standby.vue'
|
||||||
|
|
||||||
import { getRollHistorytList, getOnlineRollList } from '@/api/l2/roller'
|
import { getRollHistorytList, getOnlineRollList } from '@/api/l2/roller'
|
||||||
@@ -48,7 +42,6 @@ export default {
|
|||||||
FilterVue,
|
FilterVue,
|
||||||
History,
|
History,
|
||||||
Online,
|
Online,
|
||||||
Standard,
|
|
||||||
Standby
|
Standby
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -115,7 +108,7 @@ export default {
|
|||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border: 1px solid #dcdcdc;
|
border: 1px solid #dcdcdc;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 12px;
|
padding: 12px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -1,15 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="steel-grade-management">
|
<div class="steel-grade-management">
|
||||||
<!-- 1. 顶部搜索区域(自定义容器,无el-card) -->
|
<!-- 整体布局:左侧卡片列表 + 右侧明细面板 -->
|
||||||
|
<div class="layout-container">
|
||||||
|
<!-- 左侧:搜索+卡片列表 -->
|
||||||
|
<div class="left-panel">
|
||||||
|
<!-- 顶部搜索区域 -->
|
||||||
<div class="search-container">
|
<div class="search-container">
|
||||||
<el-form
|
<el-form
|
||||||
:inline="true"
|
:inline="true"
|
||||||
:model="queryForm"
|
:model="queryForm"
|
||||||
ref="queryForm"
|
ref="queryForm"
|
||||||
label-width="100px"
|
label-width="0"
|
||||||
class="search-form"
|
class="search-form"
|
||||||
>
|
>
|
||||||
<el-form-item label="钢种名称" prop="name">
|
<el-form-item prop="name">
|
||||||
<el-input
|
<el-input
|
||||||
size="mini"
|
size="mini"
|
||||||
v-model="queryForm.name"
|
v-model="queryForm.name"
|
||||||
@@ -41,45 +45,97 @@
|
|||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 2. 钢种数据列表(自定义卡片,仅展示gradeid和name) -->
|
<!-- 钢种卡片列表 -->
|
||||||
<div class="card-list-container" v-loading="tableLoading">
|
<div class="card-list-container" v-loading="tableLoading">
|
||||||
<!-- 无数据提示 -->
|
<!-- 无数据提示 -->
|
||||||
<div class="empty-tip" v-if="tableData.length === 0 && !tableLoading">
|
<div class="empty-tip" v-if="tableData.length === 0 && !tableLoading">
|
||||||
<el-empty description="暂无钢种数据"></el-empty>
|
<el-empty description="暂无钢种数据"></el-empty>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 循环渲染自定义卡片(替代el-card) -->
|
<!-- 循环渲染紧凑卡片 -->
|
||||||
<el-card
|
<div
|
||||||
style="width: 220px;"
|
class="steel-grade-card"
|
||||||
v-for="(item, index) in tableData"
|
v-for="(item) in tableData"
|
||||||
:key="index + item.gradeid"
|
:class="{ active: (selectedItem && selectedItem.gradeid) === item.gradeid }"
|
||||||
|
@click="handleCardClick(item)"
|
||||||
>
|
>
|
||||||
<!-- 卡片内容:仅展示接口返回的2个字段 -->
|
<!-- 卡片第一行:钢种名称 # ID -->
|
||||||
<el-descriptions :column="1">
|
<div class="card-row row1">
|
||||||
<el-descriptions-item label="钢种ID">{{ item.gradeid }}</el-descriptions-item>
|
<span class="grade-name">{{ item.name }}</span>
|
||||||
<el-descriptions-item label="钢种名称">{{ item.name }}</el-descriptions-item>
|
<span class="grade-id">#{{ item.gradeid }}</span>
|
||||||
</el-descriptions>
|
</div>
|
||||||
|
<!-- 卡片第二行:插入日期 + 操作按钮 -->
|
||||||
<!-- 卡片操作按钮 -->
|
<div class="card-row row2">
|
||||||
|
<span class="ins-date">{{ parseTime(item.insDate, '{y}-{m}-{d}') }}</span>
|
||||||
<div class="card-actions">
|
<div class="card-actions">
|
||||||
<el-button
|
<el-button
|
||||||
size="mini"
|
size="mini"
|
||||||
type="primary"
|
type="text"
|
||||||
@click="handleEdit(item)"
|
@click.stop="handleEdit(item)"
|
||||||
icon="el-icon-edit"
|
icon="el-icon-edit"
|
||||||
>编辑</el-button>
|
>编辑</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
size="mini"
|
size="mini"
|
||||||
type="danger"
|
type="text"
|
||||||
@click="handleDelete(item)"
|
@click.stop="handleDelete(item)"
|
||||||
:loading="item.deleteLoading"
|
:loading="item.deleteLoading"
|
||||||
icon="el-icon-delete"
|
icon="el-icon-delete"
|
||||||
>删除</el-button>
|
>删除</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 3. 编辑/新增弹窗(完整保留原表单所有字段) -->
|
<!-- 右侧:明细面板 -->
|
||||||
|
<div class="right-panel">
|
||||||
|
<!-- 未选择卡片提示 -->
|
||||||
|
<div class="empty-detail" v-if="!selectedItem && !dialogVisible">
|
||||||
|
<el-empty description="请选择左侧钢种查看详情"></el-empty>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 钢种明细展示 -->
|
||||||
|
<div class="detail-content" v-if="selectedItem && !dialogVisible">
|
||||||
|
<div class="detail-header">
|
||||||
|
<h3>钢种详情</h3>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="handleEdit(selectedItem)"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
>编辑</el-button>
|
||||||
|
</div>
|
||||||
|
<el-descriptions :column="2" border style="margin-top: 10px;">
|
||||||
|
<el-descriptions-item label="钢种ID">{{ selectedItem.gradeid }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="钢种名称">{{ selectedItem.name }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="来源">{{ selectedItem.origin }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="Sigma0">{{ selectedItem.sigma0 }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="首次Sigma0">{{ selectedItem.firstSigma0 }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="初始Sigma">{{ selectedItem.initSigma }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="Ro值">{{ selectedItem.ro }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="分类ID">{{ selectedItem.classId }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="参数A">{{ selectedItem.a }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="参数B">{{ selectedItem.b }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="参数C">{{ selectedItem.c }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="参数D">{{ selectedItem.d }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="KC0参数">{{ selectedItem.kc0 }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="KC1参数">{{ selectedItem.kc1 }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="KC2参数">{{ selectedItem.kc2 }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="KC3参数">{{ selectedItem.kc3 }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="KC4参数">{{ selectedItem.kc4 }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="Nu参数">{{ selectedItem.nu }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="E参数">{{ selectedItem.e }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="Chal参数">{{ selectedItem.chal }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="Temp0参数">{{ selectedItem.temp0 }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="强度">{{ selectedItem.strength }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="焊接代码">{{ selectedItem.weldCode }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="插入日期">{{ parseTime(selectedItem.insDate) }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 编辑/新增弹窗 -->
|
||||||
<el-dialog
|
<el-dialog
|
||||||
:title="dialogTitle"
|
:title="dialogTitle"
|
||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
@@ -94,7 +150,6 @@
|
|||||||
class="dialog-form"
|
class="dialog-form"
|
||||||
>
|
>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<!-- 原表单所有字段完整保留 -->
|
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="钢种ID" prop="gradeid">
|
<el-form-item label="钢种ID" prop="gradeid">
|
||||||
<el-input v-model="formData.gradeid" :disabled="isEdit"></el-input>
|
<el-input v-model="formData.gradeid" :disabled="isEdit"></el-input>
|
||||||
@@ -241,7 +296,6 @@ export default {
|
|||||||
btnLoading: false,
|
btnLoading: false,
|
||||||
dialogVisible: false,
|
dialogVisible: false,
|
||||||
dialogTitle: '新增钢种',
|
dialogTitle: '新增钢种',
|
||||||
// 表单数据完整保留所有字段
|
|
||||||
formData: {
|
formData: {
|
||||||
gradeid: null,
|
gradeid: null,
|
||||||
name: '',
|
name: '',
|
||||||
@@ -278,7 +332,8 @@ export default {
|
|||||||
},
|
},
|
||||||
saveLoading: false,
|
saveLoading: false,
|
||||||
currentRow: {},
|
currentRow: {},
|
||||||
isEdit: false
|
isEdit: false,
|
||||||
|
selectedItem: null // 选中的钢种项
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@@ -288,10 +343,9 @@ export default {
|
|||||||
getSteelGradeList() {
|
getSteelGradeList() {
|
||||||
this.tableLoading = true
|
this.tableLoading = true
|
||||||
getSteelGradeList().then(res => {
|
getSteelGradeList().then(res => {
|
||||||
// 列表仅保留接口返回的gradeid和name,添加删除加载状态
|
// 保留完整数据,添加删除加载状态
|
||||||
this.tableData = res.data.map(item => ({
|
this.tableData = res.data.map(item => ({
|
||||||
gradeid: item.gradeid,
|
...item,
|
||||||
name: item.name,
|
|
||||||
deleteLoading: false
|
deleteLoading: false
|
||||||
}))
|
}))
|
||||||
// 前端搜索过滤(仅针对name)
|
// 前端搜索过滤(仅针对name)
|
||||||
@@ -316,13 +370,20 @@ export default {
|
|||||||
this.$refs.queryForm.resetFields();
|
this.$refs.queryForm.resetFields();
|
||||||
this.getSteelGradeList()
|
this.getSteelGradeList()
|
||||||
},
|
},
|
||||||
handleRowClick(row) {
|
// 卡片点击事件:加载详情并展示
|
||||||
this.currentRow = row
|
handleCardClick(item) {
|
||||||
|
// 调用详情接口获取完整数据
|
||||||
|
getSteelGradeInfo(item.gradeid).then(res => {
|
||||||
|
this.selectedItem = { ...res.data }
|
||||||
|
}).catch(() => {
|
||||||
|
// 降级处理:使用列表数据
|
||||||
|
this.selectedItem = { ...item }
|
||||||
|
})
|
||||||
},
|
},
|
||||||
handleAdd() {
|
handleAdd() {
|
||||||
this.dialogTitle = '新增钢种';
|
this.dialogTitle = '新增钢种';
|
||||||
this.isEdit = false;
|
this.isEdit = false;
|
||||||
// 重置表单(所有字段恢复默认值)
|
// 重置表单
|
||||||
this.formData = {
|
this.formData = {
|
||||||
gradeid: null,
|
gradeid: null,
|
||||||
name: '',
|
name: '',
|
||||||
@@ -354,15 +415,14 @@ export default {
|
|||||||
handleEdit(row) {
|
handleEdit(row) {
|
||||||
this.dialogTitle = '编辑钢种';
|
this.dialogTitle = '编辑钢种';
|
||||||
this.isEdit = true;
|
this.isEdit = true;
|
||||||
// 调用详情接口获取完整字段数据(适配编辑时需展示所有参数)
|
// 调用详情接口获取完整字段数据
|
||||||
getSteelGradeInfo(row.gradeid).then(res => {
|
getSteelGradeInfo(row.gradeid).then(res => {
|
||||||
this.formData = { ...res.data }
|
this.formData = { ...res.data }
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
// 降级处理:若详情接口也仅返回2个字段,用列表数据填充核心字段,其他字段保留默认
|
// 降级处理
|
||||||
this.formData = {
|
this.formData = {
|
||||||
...this.formData,
|
...this.formData,
|
||||||
gradeid: row.gradeid,
|
...row
|
||||||
name: row.name
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.dialogVisible = true
|
this.dialogVisible = true
|
||||||
@@ -374,6 +434,10 @@ export default {
|
|||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
this.$message.success('删除成功');
|
this.$message.success('删除成功');
|
||||||
this.getSteelGradeList()
|
this.getSteelGradeList()
|
||||||
|
// 若删除的是当前选中项,清空选中状态
|
||||||
|
if (this.selectedItem?.gradeid === row.gradeid) {
|
||||||
|
this.selectedItem = null
|
||||||
|
}
|
||||||
} else this.$message.error(res.msg || '删除失败')
|
} else this.$message.error(res.msg || '删除失败')
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
row.deleteLoading = false
|
row.deleteLoading = false
|
||||||
@@ -423,20 +487,44 @@ export default {
|
|||||||
/* 页面整体容器 */
|
/* 页面整体容器 */
|
||||||
.steel-grade-management {
|
.steel-grade-management {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
min-height: calc(100vh - 40px);
|
min-height: calc(100vh - 100px);
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 搜索区域样式(自定义容器,替代el-card) */
|
/* 整体布局容器 */
|
||||||
.search-container {
|
.layout-container {
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 卡片列表容器:流式布局 + 响应式 */
|
|
||||||
.card-list-container {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
margin-bottom: 30px;
|
height: calc(100vh - 100px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧面板 */
|
||||||
|
.left-panel {
|
||||||
|
width: 320px; /* 缩小左侧面板宽度 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索区域样式 */
|
||||||
|
.search-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片列表容器 */
|
||||||
|
.card-list-container {
|
||||||
|
flex: 1;
|
||||||
|
background: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow-y: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px; /* 缩小卡片间距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 无数据提示 */
|
/* 无数据提示 */
|
||||||
@@ -448,48 +536,113 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 自定义钢种卡片(完全替代el-card) */
|
/* 钢种卡片样式 - 紧凑两行式 */
|
||||||
.steel-grade-card {
|
.steel-grade-card {
|
||||||
width: calc(25% - 15px); /* 默认4列 */
|
padding: 8px 12px; /* 缩小内边距 */
|
||||||
min-width: 280px; /* 最小宽度,防止窄屏变形 */
|
border: 1px solid #e6e6e6;
|
||||||
border-radius: 8px;
|
border-radius: 4px;
|
||||||
background-color: #333;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.2s ease;
|
||||||
overflow: hidden;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
/* 卡片hover交互效果 */
|
gap: 4px; /* 行间距 */
|
||||||
.steel-grade-card:hover {
|
min-height: 60px; /* 固定最小高度 */
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 卡片内容区(仅展示gradeid和name) */
|
.steel-grade-card:hover {
|
||||||
.card-content {
|
border-color: #409eff;
|
||||||
padding: 20px;
|
box-shadow: 0 2px 6px rgba(64, 158, 255, 0.1);
|
||||||
border-bottom: 1px solid #f2f2f2;
|
|
||||||
}
|
}
|
||||||
.grade-info {
|
|
||||||
margin-bottom: 12px;
|
.steel-grade-card.active {
|
||||||
|
border-color: #409eff;
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片行样式 */
|
||||||
|
.card-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第一行:名称 + ID */
|
||||||
|
.row1 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
|
||||||
.grade-info:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.info-label {
|
|
||||||
color: #fff;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
.info-value {
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 卡片操作按钮区 */
|
.grade-name {
|
||||||
|
color: #333;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 180px; /* 限制名称宽度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.grade-id {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第二行:日期 + 操作按钮 */
|
||||||
|
.row2 {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ins-date {
|
||||||
|
color: #909399;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片操作按钮区 - 紧凑文本按钮 */
|
||||||
.card-actions {
|
.card-actions {
|
||||||
padding: 12px 20px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
gap: 4px; /* 缩小按钮间距 */
|
||||||
gap: 8px;
|
}
|
||||||
|
|
||||||
|
.card-actions .el-button--text {
|
||||||
|
padding: 0 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-actions .el-icon {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧面板 */
|
||||||
|
.right-panel {
|
||||||
|
flex: 1;
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧空提示 */
|
||||||
|
.empty-detail {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 详情内容 */
|
||||||
|
.detail-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 弹窗表单:滚动优化 */
|
/* 弹窗表单:滚动优化 */
|
||||||
@@ -498,24 +651,25 @@ export default {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog-footer {
|
.dialog-footer {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 响应式适配:不同屏幕宽度调整卡片列数 */
|
/* 响应式适配 */
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.steel-grade-card {
|
|
||||||
width: calc(33.33% - 14px); /* 3列 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
.steel-grade-card {
|
.layout-container {
|
||||||
width: calc(50% - 10px); /* 2列 */
|
flex-direction: column;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.left-panel {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
}
|
}
|
||||||
@media (max-width: 576px) {
|
|
||||||
.steel-grade-card {
|
.grade-name {
|
||||||
width: 100%; /* 1列 */
|
max-width: 280px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
16
pnpm-lock.yaml
generated
16
pnpm-lock.yaml
generated
@@ -462,18 +462,6 @@ importers:
|
|||||||
specifier: ^2.0.21
|
specifier: ^2.0.21
|
||||||
version: 2.2.12(typescript@5.9.3)
|
version: 2.2.12(typescript@5.9.3)
|
||||||
|
|
||||||
packages/pkg-a:
|
|
||||||
dependencies:
|
|
||||||
tooling-config:
|
|
||||||
specifier: workspace:*
|
|
||||||
version: link:../tooling-config
|
|
||||||
|
|
||||||
packages/pkg-b:
|
|
||||||
dependencies:
|
|
||||||
tooling-config:
|
|
||||||
specifier: workspace:*
|
|
||||||
version: link:../tooling-config
|
|
||||||
|
|
||||||
packages/ruoyi:
|
packages/ruoyi:
|
||||||
dependencies:
|
dependencies:
|
||||||
axios:
|
axios:
|
||||||
@@ -489,8 +477,6 @@ importers:
|
|||||||
specifier: ^3.0.5
|
specifier: ^3.0.5
|
||||||
version: 3.0.5
|
version: 3.0.5
|
||||||
|
|
||||||
packages/tooling-config: {}
|
|
||||||
|
|
||||||
packages:
|
packages:
|
||||||
|
|
||||||
/@achrinza/node-ipc@9.2.2:
|
/@achrinza/node-ipc@9.2.2:
|
||||||
@@ -9127,6 +9113,7 @@ packages:
|
|||||||
/ini@4.1.1:
|
/ini@4.1.1:
|
||||||
resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
|
resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
|
||||||
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
|
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
|
||||||
|
requiresBuild: true
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/inquirer@7.3.3:
|
/inquirer@7.3.3:
|
||||||
@@ -9698,6 +9685,7 @@ packages:
|
|||||||
/jiti@2.6.1:
|
/jiti@2.6.1:
|
||||||
resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
|
resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
|
requiresBuild: true
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/js-base64@2.6.4:
|
/js-base64@2.6.4:
|
||||||
|
|||||||
Reference in New Issue
Block a user