refactor(面板组件): 重构面板组件为通用模板结构
将T1-T6面板组件重构为使用ProcessParamCardTemplate通用模板，统一处理CRUD逻辑 移除重复代码，通过配置apis、schema等参数实现不同面板功能 优化代码结构，提高可维护性和复用性
This commit is contained in:
砂糖
579
apps/l2/src/views/l2/setup/panels/T.vue
Normal file
579
apps/l2/src/views/l2/setup/panels/T.vue
Normal file
@@ -0,0 +1,579 @@
|
||||
<!-- ProcessParamCardTemplate.vue 最终版 -->
|
||||
<template>
|
||||
<div class="panel-container">
|
||||
<!-- 顶部操作栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="handleRefresh"
|
||||
>刷新</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in paramList"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="5"
|
||||
:xl="4"
|
||||
class="card-col"
|
||||
>
|
||||
<el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }">
|
||||
<!-- 卡片头部：processAcceptKeys 字段（编辑禁用的标识字段） -->
|
||||
<div slot="header" class="card-header">
|
||||
<span class="card-title">
|
||||
<template v-for="(key, idx) in processAcceptKeys">
|
||||
{{ getFieldLabel(key) }}: {{ getFieldDisplayValue(key, item[key]) || '-' }}
|
||||
{{ idx < processAcceptKeys.length - 1 ? ' | ' : '' }}
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 卡片主体：processReturnKeys 字段（业务参数） -->
|
||||
<div class="card-body">
|
||||
<div
|
||||
class="param-row"
|
||||
v-for="(row, rowIdx) in getGroupedReturnKeys"
|
||||
:key="rowIdx"
|
||||
>
|
||||
<div
|
||||
class="param-item"
|
||||
v-for="(key, colIdx) in row"
|
||||
:key="colIdx"
|
||||
>
|
||||
<span class="param-label">{{ getFieldLabel(key) }}:</span>
|
||||
<span class="param-value">{{ getFieldDisplayValue(key, item[key]) || '-' }}</span>
|
||||
</div>
|
||||
<!-- 补全空项（保证每行两个布局） -->
|
||||
<div class="param-item" v-if="row.length === 1"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片底部：操作按钮 -->
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(item)"
|
||||
>复制</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(item)"
|
||||
>删除</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 空数据提示 -->
|
||||
<div v-if="paramList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="formRules" label-width="100px">
|
||||
<!-- 第一部分：processAcceptKeys（编辑禁用，新增可编辑） -->
|
||||
<el-form-item
|
||||
v-for="(key, idx) in processAcceptKeys"
|
||||
:key="`accept-${idx}-${key}`"
|
||||
:label="getFieldLabel(key)"
|
||||
:prop="key"
|
||||
>
|
||||
<el-input v-if="getFieldComponentType(key) == 'el-input'" v-model="form[key]" placeholder="请输入" :disabled="isEdit"/>
|
||||
<el-select v-else-if="getFieldComponentType(key) == 'el-select'" v-model="form[key]" placeholder="请选择" :disabled="isEdit">
|
||||
<el-option v-for="item in getFieldOptions(key)" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<component
|
||||
v-else
|
||||
:is="getFieldComponentType(key)"
|
||||
v-model="form[key]"
|
||||
:placeholder="`请${getFieldInputHint(key)}${getFieldLabel(key)}`"
|
||||
:disabled="isEdit"
|
||||
:options="getFieldOptions(key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 第二部分：processReturnKeys（始终可编辑） -->
|
||||
<el-form-item
|
||||
v-for="(key, idx) in processReturnKeys"
|
||||
:key="`return-${idx}-${key}`"
|
||||
:label="getFieldLabel(key)"
|
||||
:prop="key"
|
||||
>
|
||||
<el-input v-if="getFieldComponentType(key) == 'el-input'" v-model="form[key]" placeholder="请输入" />
|
||||
<el-select v-else-if="getFieldComponentType(key) == 'el-select'" v-model="form[key]" placeholder="请选择">
|
||||
<el-option v-for="item in getFieldOptions(key)" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<component
|
||||
:is="getFieldComponentType(key)"
|
||||
v-model="form[key]"
|
||||
:placeholder="`请${getFieldInputHint(key)}${getFieldLabel(key)}`"
|
||||
:options="getFieldOptions(key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProcessParamCardTemplate",
|
||||
props: {
|
||||
// 1. 接口集合：list/get/add/update/del/export
|
||||
apis: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (val) => {
|
||||
const requiredKeys = ['list', 'get', 'add', 'update', 'del', 'export'];
|
||||
return requiredKeys.every(key => typeof val[key] === 'function');
|
||||
}
|
||||
},
|
||||
// 2. 字段配置schema（数组格式）：[{
|
||||
// prop: 字段名,
|
||||
// label: 字段标签,
|
||||
// required?: 是否必填,
|
||||
// type?: 'input'|'select'（默认input）,
|
||||
// options?: 下拉选项数组（type=select时生效）,
|
||||
// dict?: 字典转换函数（用于显示值转换，如钢种ID转名称）
|
||||
// }]
|
||||
schema: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: (val) => val.every(item => !!item.prop && !!item.label)
|
||||
},
|
||||
// 3. 工艺参数接受值：字符串数组（编辑禁用的字段prop）
|
||||
processAcceptKeys: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: (val) => val.every(item => typeof item === 'string')
|
||||
},
|
||||
// 4. 工艺参数返回值：字符串数组（可编辑的业务参数字段prop）
|
||||
processReturnKeys: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: (val) => val.every(item => typeof item === 'string')
|
||||
},
|
||||
// 7. 额外查询参数（如钢种筛选）
|
||||
extraQueryParams: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 合并所有需要绑定的字段，初始化空值（解决响应式问题）
|
||||
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
||||
const initForm = {};
|
||||
allKeys.forEach(key => {
|
||||
initForm[key] = ''; // 为每个字段初始化空字符串，保证响应式
|
||||
});
|
||||
|
||||
return {
|
||||
// 加载状态
|
||||
loading: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 参数列表数据
|
||||
paramList: [],
|
||||
// 弹窗标题
|
||||
title: "",
|
||||
// 弹窗显隐
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
...this.extraQueryParams
|
||||
},
|
||||
// 表单数据（初始化所有字段）
|
||||
form: initForm,
|
||||
// 是否为新增状态
|
||||
isAdd: false,
|
||||
// 表单校验规则
|
||||
formRules: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 初始化表单校验规则
|
||||
this.initFormRules();
|
||||
// 查询列表
|
||||
this.getList();
|
||||
},
|
||||
computed: {
|
||||
// 将processReturnKeys按每行2个分组（适配卡片布局）
|
||||
getGroupedReturnKeys() {
|
||||
const groups = [];
|
||||
for (let i = 0; i < this.processReturnKeys.length; i += 2) {
|
||||
groups.push(this.processReturnKeys.slice(i, i + 2));
|
||||
}
|
||||
return groups;
|
||||
},
|
||||
// 编辑状态（更直观的计算属性）
|
||||
isEdit() {
|
||||
return !this.isAdd;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 根据字段prop获取标签（从schema数组中匹配） */
|
||||
getFieldLabel(prop) {
|
||||
const field = this.schema.find(item => item.prop === prop);
|
||||
return field ? field.label : prop;
|
||||
},
|
||||
|
||||
/** 根据字段prop获取控件类型（默认input） */
|
||||
getFieldComponentType(prop) {
|
||||
const field = this.schema.find(item => item.prop === prop);
|
||||
return field?.type || 'el-input';
|
||||
},
|
||||
|
||||
/** 根据字段prop获取输入提示（输入/选择） */
|
||||
getFieldInputHint(prop) {
|
||||
const field = this.schema.find(item => item.prop === prop);
|
||||
return field?.type === 'select' ? '选择' : '输入';
|
||||
},
|
||||
|
||||
/** 根据字段prop获取下拉选项 */
|
||||
getFieldOptions(prop) {
|
||||
const field = this.schema.find(item => item.prop === prop);
|
||||
return field?.options || [];
|
||||
},
|
||||
|
||||
/** 根据字段prop和值获取显示值（支持字典转换） */
|
||||
getFieldDisplayValue(prop, value) {
|
||||
if (value === '' || value === null || value === undefined) return '-';
|
||||
const field = this.schema.find(item => item.prop === prop);
|
||||
console.log(field, 'field', prop, value);
|
||||
// 有字典转换函数则执行转换
|
||||
if (field?.dict && typeof field.dict === 'function') {
|
||||
return field.dict(value);
|
||||
}
|
||||
// 下拉选项转换（ID转label）
|
||||
if (field?.type === 'el-select' && field?.options.length) {
|
||||
console.log(field.options, '替换钢种下拉选');
|
||||
const option = field.options.find(item => item.value == value);
|
||||
return option ? option.label : value;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
|
||||
/** 初始化表单校验规则（基于schema中的required配置） */
|
||||
initFormRules() {
|
||||
this.formRules = {};
|
||||
// 遍历所有字段（接受值+返回值）生成校验规则
|
||||
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
||||
allKeys.forEach(key => {
|
||||
const field = this.schema.find(item => item.prop === key);
|
||||
if (field?.required !== false) { // 默认必填，除非显式设置required: false
|
||||
this.formRules[key] = [
|
||||
{ required: true, message: `请${this.getFieldInputHint(key)}${this.getFieldLabel(key)}`, trigger: 'blur' }
|
||||
];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleRefresh() {
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/** 搜索操作（适配right-toolbar的queryTable事件） */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/** 查询参数列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 合并额外查询参数
|
||||
const queryParams = { ...this.queryParams, ...this.extraQueryParams };
|
||||
this.apis.list(queryParams).then(response => {
|
||||
this.paramList = response.rows || [];
|
||||
this.total = response.total || 0;
|
||||
this.loading = false;
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 取消弹窗 */
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.resetForm();
|
||||
},
|
||||
|
||||
/** 重置表单（重新初始化所有字段，保证响应式） */
|
||||
resetForm() {
|
||||
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
||||
const initForm = {};
|
||||
allKeys.forEach(key => {
|
||||
initForm[key] = '';
|
||||
});
|
||||
this.form = initForm; // 重置为初始化状态
|
||||
if (this.$refs.form) {
|
||||
this.$refs.form.resetFields(); // 重置Element UI表单状态
|
||||
}
|
||||
},
|
||||
|
||||
/** 新增操作 */
|
||||
handleAdd() {
|
||||
this.isAdd = true;
|
||||
this.resetForm();
|
||||
this.open = true;
|
||||
this.title = `添加${this.$options.name || '工艺参数'}`;
|
||||
},
|
||||
|
||||
/** 复制新增操作 */
|
||||
handleCopy(row) {
|
||||
this.isAdd = true;
|
||||
this.resetForm();
|
||||
// 复制行数据到表单
|
||||
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
||||
allKeys.forEach(key => {
|
||||
this.form[key] = row[key] || '';
|
||||
});
|
||||
this.open = true;
|
||||
this.title = `复制新增${this.$options.name || '工艺参数'}`;
|
||||
},
|
||||
|
||||
/** 修改操作（优化异常处理和数据赋值） */
|
||||
handleUpdate(row) {
|
||||
this.isAdd = false; // 标记为编辑态
|
||||
console.log(row)
|
||||
this.resetForm(); // 重置表单
|
||||
this.apis.get(row).then(response => {
|
||||
const data = response.data || {};
|
||||
// 赋值到表单（处理undefined情况，保证字段有值）
|
||||
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
||||
allKeys.forEach(key => {
|
||||
this.form[key] = data[key] !== undefined ? data[key] : '';
|
||||
});
|
||||
this.open = true;
|
||||
this.title = `修改${this.$options.name || '工艺参数'}`;
|
||||
}).catch(error => {
|
||||
// 新增错误提示，避免静默失败
|
||||
this.$modal.msgError('获取参数详情失败，请重试');
|
||||
console.error('获取详情失败：', error);
|
||||
});
|
||||
},
|
||||
|
||||
/** 提交表单 */
|
||||
submitForm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
const api = this.isAdd ? this.apis.add : this.apis.update;
|
||||
api(this.form).then(() => {
|
||||
this.$modal.msgSuccess(this.isAdd ? "新增成功" : "修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).catch(error => {
|
||||
// 新增提交失败提示
|
||||
this.$modal.msgError(this.isAdd ? "新增失败" : "修改失败");
|
||||
console.error('提交失败：', error);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** 删除操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm('是否确认删除该工艺参数？').then(() => {
|
||||
return this.apis.del(row);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
|
||||
/** 导出操作 */
|
||||
handleExport() {
|
||||
try {
|
||||
this.download(this.apis.export, {
|
||||
...this.queryParams
|
||||
}, `${this.$options.name || 'process_param'}_${new Date().getTime()}.xlsx`);
|
||||
} catch (error) {
|
||||
this.$modal.msgWarning('导出功能暂未配置，请联系管理员');
|
||||
console.error('导出失败：', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 样式部分保持不变
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -1,485 +1,58 @@
|
||||
<template>
|
||||
<div class="panel-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in tensionList"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="5"
|
||||
:xl="4"
|
||||
class="card-col"
|
||||
>
|
||||
<el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }">
|
||||
<div slot="header" class="card-header">
|
||||
<span class="card-title">厚度: {{ item.thick || '-' }} | 屈服点: {{ item.yieldStren || '-' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">开卷机张力:</span>
|
||||
<span class="param-value">{{ item.value1 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">入口活套:</span>
|
||||
<span class="param-value">{{ item.value2 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">清洗段:</span>
|
||||
<span class="param-value">{{ item.value3 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">炉区张力:</span>
|
||||
<span class="param-value">{{ item.value4 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">冷却塔:</span>
|
||||
<span class="param-value">{{ item.value5 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">光整机-不投:</span>
|
||||
<span class="param-value">{{ item.value6 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">光整机入口:</span>
|
||||
<span class="param-value">{{ item.value7 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">光整机出口:</span>
|
||||
<span class="param-value">{{ item.value8 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">拉矫机-不投:</span>
|
||||
<span class="param-value">{{ item.value9 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">拉矫机出口:</span>
|
||||
<span class="param-value">{{ item.value10 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">后处理:</span>
|
||||
<span class="param-value">{{ item.value11 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">出口活套:</span>
|
||||
<span class="param-value">{{ item.value12 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">卷取机:</span>
|
||||
<span class="param-value">{{ item.value13 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(item)"
|
||||
>复制</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(item)"
|
||||
>删除</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="tensionList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改全线张力对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="厚度" prop="thick">
|
||||
<el-input v-model="form.thick" placeholder="请输入厚度" :disabled="!isAdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="屈服点" prop="yieldStren">
|
||||
<el-input v-model="form.yieldStren" placeholder="请输入屈服点" :disabled="!isAdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开卷机张力" prop="value1">
|
||||
<el-input v-model="form.value1" placeholder="请输入开卷机张力" />
|
||||
</el-form-item>
|
||||
<el-form-item label="入口活套" prop="value2">
|
||||
<el-input v-model="form.value2" placeholder="请输入入口活套" />
|
||||
</el-form-item>
|
||||
<el-form-item label="清洗段" prop="value3">
|
||||
<el-input v-model="form.value3" placeholder="请输入清洗段" />
|
||||
</el-form-item>
|
||||
<el-form-item label="炉区张力" prop="value4">
|
||||
<el-input v-model="form.value4" placeholder="请输入炉区张力" />
|
||||
</el-form-item>
|
||||
<el-form-item label="冷却塔" prop="value5">
|
||||
<el-input v-model="form.value5" placeholder="请输入冷却塔" />
|
||||
</el-form-item>
|
||||
<el-form-item label="光整机-不投" prop="value6">
|
||||
<el-input v-model="form.value6" placeholder="请输入光整机-不投" />
|
||||
</el-form-item>
|
||||
<el-form-item label="光整机入口" prop="value7">
|
||||
<el-input v-model="form.value7" placeholder="请输入光整机入口" />
|
||||
</el-form-item>
|
||||
<el-form-item label="光整机出口" prop="value8">
|
||||
<el-input v-model="form.value8" placeholder="请输入光整机出口" />
|
||||
</el-form-item>
|
||||
<el-form-item label="拉矫机-不投" prop="value9">
|
||||
<el-input v-model="form.value9" placeholder="请输入拉矫机-不投" />
|
||||
</el-form-item>
|
||||
<el-form-item label="拉矫机出口" prop="value10">
|
||||
<el-input v-model="form.value10" placeholder="请输入拉矫机出口" />
|
||||
</el-form-item>
|
||||
<el-form-item label="后处理" prop="value11">
|
||||
<el-input v-model="form.value11" placeholder="请输入后处理" />
|
||||
</el-form-item>
|
||||
<el-form-item label="出口活套" prop="value12">
|
||||
<el-input v-model="form.value12" placeholder="请输入出口活套" />
|
||||
</el-form-item>
|
||||
<el-form-item label="卷取机" prop="value13">
|
||||
<el-input v-model="form.value13" placeholder="请输入卷取机" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<ProcessParamCardTemplate
|
||||
:apis="tensionApis"
|
||||
:schema="tensionSchema"
|
||||
:processAcceptKeys="processAcceptKeys"
|
||||
:processReturnKeys="processReturnKeys"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProcessParamCardTemplate from './T.vue';
|
||||
import { listTension, getTension, delTension, addTension, updateTension } from "@/api/business/tension";
|
||||
|
||||
export default {
|
||||
name: "Tension",
|
||||
components: { ProcessParamCardTemplate },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 全线张力表格数据
|
||||
tensionList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
// 1. 接口集合
|
||||
tensionApis: {
|
||||
list: listTension,
|
||||
get: getTension,
|
||||
add: addTension,
|
||||
update: updateTension,
|
||||
del: (row) => delTension({ thicks: [row.thick], yieldStrens: [row.yieldStren] }),
|
||||
export: 'business/tension/export'
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
isAdd: false,
|
||||
// 2. 字段配置schema（数组格式）
|
||||
tensionSchema: [
|
||||
// 标识字段（processAcceptKeys）
|
||||
{ prop: 'thick', label: '厚度', required: true },
|
||||
{ prop: 'yieldStren', label: '屈服点', required: true },
|
||||
// 业务参数（processReturnKeys）
|
||||
{ prop: 'value1', label: '开卷机张力', required: true },
|
||||
{ prop: 'value2', label: '入口活套', required: true },
|
||||
{ prop: 'value3', label: '清洗段', required: true },
|
||||
{ prop: 'value4', label: '炉区张力', required: true },
|
||||
{ prop: 'value5', label: '冷却塔', required: true },
|
||||
{ prop: 'value6', label: '光整机-不投', required: true },
|
||||
{ prop: 'value7', label: '光整机入口', required: true },
|
||||
{ prop: 'value8', label: '光整机出口', required: true },
|
||||
{ prop: 'value9', label: '拉矫机-不投', required: true },
|
||||
{ prop: 'value10', label: '拉矫机出口', required: true },
|
||||
{ prop: 'value11', label: '后处理', required: true },
|
||||
{ prop: 'value12', label: '出口活套', required: true },
|
||||
{ prop: 'value13', label: '卷取机', required: true }
|
||||
],
|
||||
// 3. 工艺参数接受值（编辑禁用的字段prop）
|
||||
processAcceptKeys: ['thick', 'yieldStren'],
|
||||
// 4. 工艺参数返回值（可编辑的业务参数字段prop）
|
||||
processReturnKeys: [
|
||||
'value1', 'value2', 'value3', 'value4', 'value5', 'value6',
|
||||
'value7', 'value8', 'value9', 'value10', 'value11', 'value12', 'value13'
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询全线张力列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listTension(this.queryParams).then(response => {
|
||||
this.tensionList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
thick: null,
|
||||
yieldStren: null,
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
value4: null,
|
||||
value5: null,
|
||||
value6: null,
|
||||
value7: null,
|
||||
value8: null,
|
||||
value9: null,
|
||||
value10: null,
|
||||
value11: null,
|
||||
value12: null,
|
||||
value13: null,
|
||||
value14: null,
|
||||
value15: null,
|
||||
createTime: null,
|
||||
updateTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.thick)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 复制新增按钮操作 */
|
||||
handleCopy(row) {
|
||||
this.isAdd = true;
|
||||
// this.reset();
|
||||
this.form = row;
|
||||
this.open = true;
|
||||
this.title = "复制新增全线张力";
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.isAdd = true;
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加全线张力";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.isAdd = false;
|
||||
this.reset();
|
||||
getTension(row).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改全线张力";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (!this.isAdd) {
|
||||
updateTension(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addTension(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm('是否确认删除').then(function() {
|
||||
return delTension({
|
||||
thicks: [row.thick],
|
||||
yieldStrens: [row.yieldStren]
|
||||
});
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('business/tension/export', {
|
||||
...this.queryParams
|
||||
}, `tension_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -1,446 +1,74 @@
|
||||
<template>
|
||||
<div class="panel-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in tlList"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="5"
|
||||
:xl="4"
|
||||
class="card-col"
|
||||
>
|
||||
<el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }">
|
||||
<div slot="header" class="card-header">
|
||||
<span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }} | 硬度: {{ item.yieldStren || '-' }} | 厚度: {{ item.thick || '-' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">延伸率:</span>
|
||||
<span class="param-value">{{ item.value1 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">矫直辊插入量1:</span>
|
||||
<span class="param-value">{{ item.value2 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">矫直辊插入量2:</span>
|
||||
<span class="param-value">{{ item.value3 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">防横弓插入量:</span>
|
||||
<span class="param-value">{{ item.value4 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(item)"
|
||||
>复制</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(item)"
|
||||
>删除</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="tlList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改拉矫机参数对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="钢种" prop="steelGrade">
|
||||
<el-select v-model="form.steelGrade" placeholder="请选择钢种">
|
||||
<el-option v-for="item in steelGradeList" :key="item.gradeid" :disabled="!isAdd" :label="item.name" :value="item.gradeid" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="硬度" prop="yieldStren">
|
||||
<el-input v-model="form.yieldStren" placeholder="请输入硬度" :disabled="!isAdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="厚度" prop="thick">
|
||||
<el-input v-model="form.thick" placeholder="请输入厚度" :disabled="!isAdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="延伸率" prop="value1">
|
||||
<el-input v-model="form.value1" placeholder="请输入延伸率" />
|
||||
</el-form-item>
|
||||
<el-form-item label="矫直辊插入量1" prop="value2">
|
||||
<el-input v-model="form.value2" placeholder="请输入矫直辊插入量1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="矫直辊插入量2" prop="value3">
|
||||
<el-input v-model="form.value3" placeholder="请输入矫直辊插入量2" />
|
||||
</el-form-item>
|
||||
<el-form-item label="防横弓插入量" prop="value4">
|
||||
<el-input v-model="form.value4" placeholder="请输入防横弓插入量" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<ProcessParamCardTemplate
|
||||
:apis="apis"
|
||||
:schema="schema"
|
||||
:processAcceptKeys="processAcceptKeys"
|
||||
:processReturnKeys="processReturnKeys"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProcessParamCardTemplate from './T.vue';
|
||||
import { listTl, getTl, delTl, addTl, updateTl } from "@/api/business/tl";
|
||||
import { getSteelGradeList } from "@/api/l2/steelGrade";
|
||||
|
||||
export default {
|
||||
name: "Tl",
|
||||
components: { ProcessParamCardTemplate },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 拉矫机参数表格数据
|
||||
tlList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
steelGradeList: [],
|
||||
isAdd: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getSteelGradeList();
|
||||
},
|
||||
methods: {
|
||||
getSteelGradeList() {
|
||||
getSteelGradeList().then(response => {
|
||||
this.steelGradeList = response.data;
|
||||
});
|
||||
},
|
||||
/** 查询拉矫机参数列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listTl(this.queryParams).then(response => {
|
||||
this.tlList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
steelGrade: null,
|
||||
yieldStren: null,
|
||||
thick: null,
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
value4: null,
|
||||
value5: null,
|
||||
value6: null,
|
||||
value7: null,
|
||||
value8: null,
|
||||
value9: null,
|
||||
value10: null,
|
||||
updateTime: null,
|
||||
createTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.steelGrade)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 复制新增按钮操作 */
|
||||
handleCopy(row) {
|
||||
this.isAdd = true;
|
||||
// this.reset();
|
||||
this.form = row;
|
||||
this.open = true;
|
||||
this.title = "复制新增拉矫机参数";
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.isAdd = true;
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加拉矫机参数";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.isAdd = false;
|
||||
this.reset();
|
||||
getTl(row).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改拉矫机参数";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (!this.isAdd) {
|
||||
updateTl(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addTl(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm('是否确认删除').then(function() {
|
||||
return delTl({
|
||||
// 接口配置
|
||||
apis: {
|
||||
list: listTl,
|
||||
get: getTl,
|
||||
add: addTl,
|
||||
update: updateTl,
|
||||
del: (row) => delTl({
|
||||
steelGrades: [row.steelGrade],
|
||||
yieldStrens: [row.yieldStren],
|
||||
thicks: [row.thick],
|
||||
});
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('business/tl/export', {
|
||||
...this.queryParams
|
||||
}, `tl_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 获取钢种名称 */
|
||||
getSteelGradeName(gradeId) {
|
||||
const grade = this.steelGradeList.find(item => item.gradeid === gradeId);
|
||||
return grade ? grade.name : gradeId;
|
||||
}),
|
||||
export: 'business/tl/export'
|
||||
},
|
||||
// 字段配置
|
||||
schema: [],
|
||||
// 编辑禁用字段
|
||||
processAcceptKeys: ['steelGrade', 'yieldStren', 'thick'],
|
||||
// 可编辑业务字段
|
||||
processReturnKeys: ['value1', 'value2', 'value3', 'value4']
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initSchema();
|
||||
},
|
||||
methods: {
|
||||
async initSchema() {
|
||||
// 获取钢种列表
|
||||
const steelGradeRes = await getSteelGradeList();
|
||||
const steelGradeList = steelGradeRes.data || [];
|
||||
|
||||
// 定义字段schema
|
||||
this.schema = [
|
||||
{
|
||||
prop: 'steelGrade',
|
||||
label: '钢种',
|
||||
required: true,
|
||||
type: 'el-select',
|
||||
options: steelGradeList.map(item => ({ label: item.name, value: item.gradeid })),
|
||||
dict: (gradeId) => {
|
||||
const grade = steelGradeList.find(item => item.gradeid === gradeId);
|
||||
return grade ? grade.name : gradeId;
|
||||
}
|
||||
},
|
||||
{ prop: 'yieldStren', label: '硬度', required: true },
|
||||
{ prop: 'thick', label: '厚度', required: true },
|
||||
{ prop: 'value1', label: '延伸率', required: true },
|
||||
{ prop: 'value2', label: '矫直辊插入量1', required: true },
|
||||
{ prop: 'value3', label: '矫直辊插入量2', required: true },
|
||||
{ prop: 'value4', label: '防横弓插入量', required: true }
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -1,398 +1,45 @@
|
||||
<template>
|
||||
<div class="panel-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in bendforceList"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="5"
|
||||
:xl="4"
|
||||
class="card-col"
|
||||
>
|
||||
<el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }">
|
||||
<div slot="header" class="card-header">
|
||||
<span class="card-title">宽度: {{ item.width || '-' }} | 轧制力: {{ item.rollForce || '-' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">弯辊力:</span>
|
||||
<span class="param-value">{{ item.value1 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(item)"
|
||||
>复制</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(item)"
|
||||
>删除</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="bendforceList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改光整机弯辊力对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="宽度" prop="width">
|
||||
<el-input v-model="form.width" placeholder="请输入宽度" :disabled="!isAdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="轧制力" prop="rollForce">
|
||||
<el-input v-model="form.rollForce" placeholder="请输入轧制力" :disabled="!isAdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="弯辊力" prop="value1">
|
||||
<el-input v-model="form.value1" placeholder="请输入弯辊力"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<ProcessParamCardTemplate
|
||||
:apis="apis"
|
||||
:schema="schema"
|
||||
:processAcceptKeys="processAcceptKeys"
|
||||
:processReturnKeys="processReturnKeys"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProcessParamCardTemplate from './T.vue';
|
||||
import { listBendforce, getBendforce, delBendforce, addBendforce, updateBendforce } from "@/api/business/bendforce";
|
||||
|
||||
export default {
|
||||
name: "Bendforce",
|
||||
components: { ProcessParamCardTemplate },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 光整机弯辊力表格数据
|
||||
bendforceList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
isAdd: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询光整机弯辊力列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listBendforce(this.queryParams).then(response => {
|
||||
this.bendforceList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
width: null,
|
||||
rollForce: null,
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
value4: null,
|
||||
updateTime: null,
|
||||
createTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.width)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 复制新增按钮操作 */
|
||||
handleCopy(row) {
|
||||
this.isAdd = true;
|
||||
// this.reset();
|
||||
this.form = row;
|
||||
this.open = true;
|
||||
this.title = "复制新增光整机弯辊力";
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.isAdd = true;
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加光整机弯辊力";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.isAdd = false;
|
||||
this.reset();
|
||||
getBendforce(row).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改光整机弯辊力";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (!this.isAdd) {
|
||||
updateBendforce(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addBendforce(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm('是否确认删除').then(function() {
|
||||
return delBendforce({
|
||||
// 接口配置
|
||||
apis: {
|
||||
list: listBendforce,
|
||||
get: getBendforce,
|
||||
add: addBendforce,
|
||||
update: updateBendforce,
|
||||
del: (row) => delBendforce({
|
||||
widths: [row.width],
|
||||
rollForces: [row.rollForce]
|
||||
});
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('business/bendforce/export', {
|
||||
...this.queryParams
|
||||
}, `bendforce_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}),
|
||||
export: 'business/bendforce/export'
|
||||
},
|
||||
// 字段配置
|
||||
schema: [
|
||||
{ prop: 'width', label: '宽度', required: true },
|
||||
{ prop: 'rollForce', label: '轧制力', required: true },
|
||||
{ prop: 'value1', label: '弯辊力', required: true }
|
||||
],
|
||||
// 编辑禁用字段
|
||||
processAcceptKeys: ['width', 'rollForce'],
|
||||
// 可编辑业务字段
|
||||
processReturnKeys: ['value1']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -1,430 +1,72 @@
|
||||
<template>
|
||||
<div class="panel-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in meshList"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="5"
|
||||
:xl="4"
|
||||
class="card-col"
|
||||
>
|
||||
<el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }">
|
||||
<div slot="header" class="card-header">
|
||||
<span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }} | 厚度: {{ item.thick || '-' }} | 屈服点: {{ item.yieldStren || '-' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">防皱辊插入量:</span>
|
||||
<span class="param-value">{{ item.value1 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">防颤辊插入量:</span>
|
||||
<span class="param-value">{{ item.value2 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(item)"
|
||||
>复制</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(item)"
|
||||
>删除</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="meshList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改光整机插入量对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="钢种" prop="steelGrade">
|
||||
<el-select v-model="form.steelGrade" placeholder="请选择钢种">
|
||||
<el-option v-for="item in steelGradeList" :key="item.gradeid" :disabled="!isAdd" :label="item.name" :value="item.gradeid" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="厚度" prop="thick">
|
||||
<el-input v-model="form.thick" placeholder="请输入厚度" :disabled="!isAdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="屈服点" prop="yieldStren">
|
||||
<el-input v-model="form.yieldStren" placeholder="请输入屈服点" :disabled="!isAdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="防皱辊插入量" prop="value1">
|
||||
<el-input v-model="form.value1" placeholder="请输入防皱辊插入量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="防颤辊插入量" prop="value2">
|
||||
<el-input v-model="form.value2" placeholder="请输入防颤辊插入量"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<ProcessParamCardTemplate
|
||||
:apis="apis"
|
||||
:schema="schema"
|
||||
:processAcceptKeys="processAcceptKeys"
|
||||
:processReturnKeys="processReturnKeys"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProcessParamCardTemplate from './T.vue';
|
||||
import { listMesh, getMesh, delMesh, addMesh, updateMesh } from "@/api/business/mesh";
|
||||
import { getSteelGradeList } from "@/api/l2/steelGrade";
|
||||
|
||||
export default {
|
||||
name: "Mesh",
|
||||
components: { ProcessParamCardTemplate },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 光整机插入量表格数据
|
||||
meshList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
steelGradeList: [],
|
||||
isAdd: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getSteelGradeList();
|
||||
},
|
||||
methods: {
|
||||
getSteelGradeList() {
|
||||
getSteelGradeList().then(response => {
|
||||
this.steelGradeList = response.data;
|
||||
});
|
||||
},
|
||||
/** 查询光整机插入量列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listMesh(this.queryParams).then(response => {
|
||||
this.meshList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
steelGrade: null,
|
||||
yieldStren: null,
|
||||
thick: null,
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
value4: null,
|
||||
value5: null,
|
||||
value6: null,
|
||||
value7: null,
|
||||
value8: null,
|
||||
value9: null,
|
||||
value10: null,
|
||||
updateTime: null,
|
||||
createTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.steelGrade)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 复制新增按钮操作 */
|
||||
handleCopy(row) {
|
||||
this.isAdd = true;
|
||||
// this.reset();
|
||||
this.form = row;
|
||||
this.open = true;
|
||||
this.title = "复制新增光整机插入量";
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.isAdd = true;
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加光整机插入量";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.isAdd = false;
|
||||
this.reset();
|
||||
getMesh(row).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改光整机插入量";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (!this.isAdd) {
|
||||
updateMesh(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addMesh(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm('是否确认删除').then(function() {
|
||||
return delMesh({
|
||||
// 接口配置
|
||||
apis: {
|
||||
list: listMesh,
|
||||
get: getMesh,
|
||||
add: addMesh,
|
||||
update: updateMesh,
|
||||
del: (row) => delMesh({
|
||||
steelGrades: [row.steelGrade],
|
||||
yieldStrens: [row.yieldStren],
|
||||
thicks: [row.thick]
|
||||
});
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('business/mesh/export', {
|
||||
...this.queryParams
|
||||
}, `mesh_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 获取钢种名称 */
|
||||
getSteelGradeName(gradeId) {
|
||||
const grade = this.steelGradeList.find(item => item.gradeid === gradeId);
|
||||
return grade ? grade.name : gradeId;
|
||||
}),
|
||||
export: 'business/mesh/export'
|
||||
},
|
||||
// 字段配置
|
||||
schema: [],
|
||||
// 编辑禁用字段
|
||||
processAcceptKeys: ['steelGrade', 'thick', 'yieldStren'],
|
||||
// 可编辑业务字段
|
||||
processReturnKeys: ['value1', 'value2']
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initSchema();
|
||||
},
|
||||
methods: {
|
||||
async initSchema() {
|
||||
// 获取钢种列表
|
||||
const steelGradeRes = await getSteelGradeList();
|
||||
const steelGradeList = steelGradeRes.data || [];
|
||||
|
||||
// 定义字段schema
|
||||
this.schema = [
|
||||
{
|
||||
prop: 'steelGrade',
|
||||
label: '钢种',
|
||||
required: true,
|
||||
type: 'el-select',
|
||||
options: steelGradeList.map(item => ({ label: item.name, value: item.gradeid })),
|
||||
dict: (gradeId) => {
|
||||
const grade = steelGradeList.find(item => item.gradeid == gradeId);
|
||||
return grade ? grade.name : gradeId;
|
||||
}
|
||||
},
|
||||
{ prop: 'thick', label: '厚度', required: true },
|
||||
{ prop: 'yieldStren', label: '屈服点', required: true },
|
||||
{ prop: 'value1', label: '防皱辊插入量', required: true },
|
||||
{ prop: 'value2', label: '防颤辊插入量', required: true }
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -1,432 +1,73 @@
|
||||
<template>
|
||||
<div class="panel-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in rollforceList"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="5"
|
||||
:xl="4"
|
||||
class="card-col"
|
||||
>
|
||||
<el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }">
|
||||
<div slot="header" class="card-header">
|
||||
<span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }} | 厚度: {{ item.thick || '-' }} | 屈服点: {{ item.yieldStren || '-' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">延伸率:</span>
|
||||
<span class="param-value">{{ item.elong || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">轧制力:</span>
|
||||
<span class="param-value">{{ item.value1 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(item)"
|
||||
>复制</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(item)"
|
||||
>删除</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="rollforceList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改光整机轧制力对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="钢种" prop="steelGrade">
|
||||
<el-select v-model="form.steelGrade" placeholder="请选择钢种">
|
||||
<el-option v-for="item in steelGradeList" :key="item.gradeid" :label="item.name" :value="item.gradeid" :disabled="!isAdd" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="厚度" prop="thick">
|
||||
<el-input v-model="form.thick" placeholder="请输入厚度" :disabled="!isAdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="屈服点" prop="yieldStren">
|
||||
<el-input v-model="form.yieldStren" placeholder="请输入屈服点" :disabled="!isAdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="延伸率" prop="elong">
|
||||
<el-input v-model="form.elong" placeholder="请输入延伸率" :disabled="!isAdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="轧制力" prop="value1">
|
||||
<el-input v-model="form.value1" placeholder="请输入轧制力" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<ProcessParamCardTemplate
|
||||
:apis="apis"
|
||||
:schema="schema"
|
||||
:processAcceptKeys="processAcceptKeys"
|
||||
:processReturnKeys="processReturnKeys"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProcessParamCardTemplate from './T.vue';
|
||||
import { listRollforce, getRollforce, delRollforce, addRollforce, updateRollforce } from "@/api/business/rollforce";
|
||||
import { getSteelGradeList } from "@/api/l2/steelGrade";
|
||||
|
||||
export default {
|
||||
name: "Rollforce",
|
||||
components: { ProcessParamCardTemplate },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 光整机轧制力表格数据
|
||||
rollforceList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
steelGradeList: [],
|
||||
isAdd: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getSteelGradeList();
|
||||
},
|
||||
methods: {
|
||||
getSteelGradeList() {
|
||||
getSteelGradeList().then(response => {
|
||||
this.steelGradeList = response.data;
|
||||
});
|
||||
},
|
||||
/** 查询光整机轧制力列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listRollforce(this.queryParams).then(response => {
|
||||
this.rollforceList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
steelGrade: null,
|
||||
thick: null,
|
||||
yieldStren: null,
|
||||
elong: null,
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
value4: null,
|
||||
value5: null,
|
||||
value6: null,
|
||||
value7: null,
|
||||
value8: null,
|
||||
value9: null,
|
||||
value10: null,
|
||||
updateTime: null,
|
||||
createTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.steelGrade)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 复制新增按钮操作 */
|
||||
handleCopy(row) {
|
||||
this.isAdd = true;
|
||||
// this.reset();
|
||||
this.form = row;
|
||||
this.open = true;
|
||||
this.title = "复制新增光整机轧制力";
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.isAdd = true;
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加光整机轧制力";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.isAdd = false;
|
||||
this.reset();
|
||||
getRollforce(row).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改光整机轧制力";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (!this.isAdd) {
|
||||
updateRollforce(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addRollforce(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm('是否确认删除').then(function() {
|
||||
return delRollforce({
|
||||
// 接口配置
|
||||
apis: {
|
||||
list: listRollforce,
|
||||
get: getRollforce,
|
||||
add: addRollforce,
|
||||
update: updateRollforce,
|
||||
del: (row) => delRollforce({
|
||||
steelGrades: [row.steelGrade],
|
||||
yieldStrens: [row.yieldStren],
|
||||
thicks: [row.thick],
|
||||
elong: [row.elong]
|
||||
});
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('business/rollforce/export', {
|
||||
...this.queryParams
|
||||
}, `rollforce_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 获取钢种名称 */
|
||||
getSteelGradeName(gradeId) {
|
||||
const grade = this.steelGradeList.find(item => item.gradeid === gradeId);
|
||||
return grade ? grade.name : gradeId;
|
||||
}),
|
||||
export: 'business/rollforce/export'
|
||||
},
|
||||
// 字段配置
|
||||
schema: [],
|
||||
// 编辑禁用字段
|
||||
processAcceptKeys: ['steelGrade', 'thick', 'yieldStren', 'elong'],
|
||||
// 可编辑业务字段
|
||||
processReturnKeys: ['value1']
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initSchema();
|
||||
},
|
||||
methods: {
|
||||
async initSchema() {
|
||||
// 获取钢种列表
|
||||
const steelGradeRes = await getSteelGradeList();
|
||||
const steelGradeList = steelGradeRes.data || [];
|
||||
|
||||
// 定义字段schema
|
||||
this.schema = [
|
||||
{
|
||||
prop: 'steelGrade',
|
||||
label: '钢种',
|
||||
required: true,
|
||||
type: 'el-select',
|
||||
options: steelGradeList.map(item => ({ label: item.name, value: item.gradeid })),
|
||||
dict: (gradeId) => {
|
||||
const grade = steelGradeList.find(item => item.gradeid == gradeId);
|
||||
return grade ? grade.name : gradeId;
|
||||
}
|
||||
},
|
||||
{ prop: 'thick', label: '厚度', required: true },
|
||||
{ prop: 'yieldStren', label: '屈服点', required: true },
|
||||
{ prop: 'elong', label: '延伸率', required: true },
|
||||
{ prop: 'value1', label: '轧制力', required: true }
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -10,26 +10,6 @@
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
@@ -39,7 +19,6 @@
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 卡片网格布局 -->
|
||||
|
||||
@@ -205,7 +205,7 @@
|
||||
<span class="selected-detail" v-if="currentRow.planid">计划号: {{ currentRow.planid }}</span>
|
||||
</div>
|
||||
<div v-else class="selected-info empty">
|
||||
<i class="el-icon-info"></i>
|
||||
<i class="el-icon-info"></i>
|
||||
<span>请选择上方卡片查看图表</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user