feat(工艺参数): 为参数卡片添加量纲显示功能
在工艺参数卡片模板中新增unit字段支持,用于显示各参数的物理量纲。修改了模板组件以在筛选条件、卡片头部和主体中显示量纲单位,提升参数可读性。同时优化了卡片布局和字体大小。
This commit is contained in:
@@ -1,4 +1,3 @@
|
|||||||
<!-- ProcessParamCardTemplate.vue 改造后(新增processAcceptKeys筛选区) -->
|
|
||||||
<template>
|
<template>
|
||||||
<div class="panel-container">
|
<div class="panel-container">
|
||||||
<el-row>
|
<el-row>
|
||||||
@@ -7,28 +6,73 @@
|
|||||||
<el-row :gutter="8" align="middle" class="filter-row">
|
<el-row :gutter="8" align="middle" class="filter-row">
|
||||||
<!-- 循环processAcceptKeys,生成筛选控件 -->
|
<!-- 循环processAcceptKeys,生成筛选控件 -->
|
||||||
<el-form inline>
|
<el-form inline>
|
||||||
<el-form-item v-for="key in processAcceptKeys" :key="key" :label="getFieldLabel(key)" class="filter-form-item" label-width="100px">
|
<el-form-item
|
||||||
|
v-for="key in processAcceptKeys"
|
||||||
|
:key="key"
|
||||||
|
:label="getFieldUnit(key) ? `${getFieldLabel(key)}(${getFieldUnit(key)})` : getFieldLabel(key)"
|
||||||
|
class="filter-form-item"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
<!-- 输入框 -->
|
<!-- 输入框 -->
|
||||||
<el-input v-if="getFieldComponentType(key) === 'el-input'" v-model="queryParams[key]"
|
<el-input
|
||||||
:placeholder="`请输入${getFieldLabel(key)}`" size="mini" clearable @keyup.enter="handleQuery" />
|
v-if="getFieldComponentType(key) === 'el-input'"
|
||||||
|
v-model="queryParams[key]"
|
||||||
|
:placeholder="`请输入${getFieldLabel(key)}`"
|
||||||
|
size="mini"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
/>
|
||||||
<!-- 下拉选择框 -->
|
<!-- 下拉选择框 -->
|
||||||
<el-select v-else-if="getFieldComponentType(key) === 'el-select'" v-model="queryParams[key]"
|
<el-select
|
||||||
:placeholder="`请选择${getFieldLabel(key)}`" size="mini" clearable @change="handleQuery">
|
v-else-if="getFieldComponentType(key) === 'el-select'"
|
||||||
<el-option v-for="item in getFieldOptions(key)" :key="item.value" :label="item.label"
|
v-model="queryParams[key]"
|
||||||
:value="item.value" />
|
:placeholder="`请选择${getFieldLabel(key)}`"
|
||||||
|
size="mini"
|
||||||
|
clearable
|
||||||
|
@change="handleQuery"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in getFieldOptions(key)"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
<!-- 其他自定义组件(兼容扩展) -->
|
<!-- 其他自定义组件(兼容扩展) -->
|
||||||
<component v-else :is="getFieldComponentType(key)" v-model="queryParams[key]"
|
<component
|
||||||
:placeholder="`Please ${getFieldInputHint(key)}`" size="mini" clearable :options="getFieldOptions(key)"
|
v-else
|
||||||
@change="handleQuery" />
|
:is="getFieldComponentType(key)"
|
||||||
|
v-model="queryParams[key]"
|
||||||
|
:placeholder="`Please ${getFieldInputHint(key)}`"
|
||||||
|
size="mini"
|
||||||
|
clearable
|
||||||
|
:options="getFieldOptions(key)"
|
||||||
|
@change="handleQuery"
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<!-- 筛选操作按钮:查询 + 重置 -->
|
<!-- 筛选操作按钮:查询 + 重置 -->
|
||||||
<el-col :xs="24" :sm="12" :md="6" class="filter-btn-group">
|
<el-col :xs="24" :sm="12" :md="6" class="filter-btn-group">
|
||||||
<el-button type="primary" plain icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
<el-button
|
||||||
<el-button type="default" plain icon="el-icon-refresh-left" size="mini" @click="handleResetFilter"
|
type="primary"
|
||||||
style="margin-left: 8px;">重置</el-button>
|
plain
|
||||||
|
icon="el-icon-search"
|
||||||
|
size="mini"
|
||||||
|
@click="handleQuery"
|
||||||
|
>
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="default"
|
||||||
|
plain
|
||||||
|
icon="el-icon-refresh-left"
|
||||||
|
size="mini"
|
||||||
|
@click="handleResetFilter"
|
||||||
|
style="margin-left: 8px;"
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-col>
|
</el-col>
|
||||||
@@ -36,37 +80,87 @@
|
|||||||
<!-- 顶部操作栏 -->
|
<!-- 顶部操作栏 -->
|
||||||
<el-row :gutter="10" class="mb8">
|
<el-row :gutter="10" class="mb8">
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
@click="handleAdd"
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
icon="el-icon-download"
|
||||||
|
size="mini"
|
||||||
|
@click="handleExport"
|
||||||
|
>
|
||||||
|
导出
|
||||||
|
</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="success" plain icon="el-icon-refresh" size="mini" @click="handleRefresh">刷新</el-button>
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
size="mini"
|
||||||
|
@click="handleRefresh"
|
||||||
|
>
|
||||||
|
刷新
|
||||||
|
</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<!-- 卡片网格布局 -->
|
<!-- 卡片网格布局 -->
|
||||||
<div v-loading="loading" class="card-grid-container">
|
<div v-loading="loading" class="card-grid-container">
|
||||||
<el-row :gutter="12">
|
<el-row :gutter="12">
|
||||||
<el-col v-for="(item, index) in paramList" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="4"
|
<el-col
|
||||||
class="card-col">
|
v-for="(item, index) in paramList"
|
||||||
<el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }">
|
:key="index"
|
||||||
|
:xs="24"
|
||||||
|
:sm="12"
|
||||||
|
:md="8"
|
||||||
|
:lg="6"
|
||||||
|
:xl="4"
|
||||||
|
class="card-col"
|
||||||
|
>
|
||||||
|
<el-card
|
||||||
|
class="parameter-card"
|
||||||
|
shadow="never"
|
||||||
|
:body-style="{ padding: '10px' }"
|
||||||
|
>
|
||||||
<!-- 卡片头部:processAcceptKeys 字段(编辑禁用的标识字段) -->
|
<!-- 卡片头部:processAcceptKeys 字段(编辑禁用的标识字段) -->
|
||||||
<div slot="header" class="card-header">
|
<div slot="header" class="card-header">
|
||||||
<span class="card-title">
|
<span class="card-title">
|
||||||
<template v-for="(key, idx) in processAcceptKeys">
|
<template v-for="(key, idx) in processAcceptKeys">
|
||||||
{{ getFieldLabel(key) }}: {{ getFieldDisplayValue(key, item[key]) || '-' }}
|
{{ getFieldLabel(key) }}: {{ getFieldDisplayValue(key, item[key]) || '-' }}
|
||||||
{{ idx < processAcceptKeys.length - 1 ? ' | ' : '' }} </template>
|
{{ getFieldUnit(key) ? ` ${getFieldUnit(key)}` : '' }}
|
||||||
|
{{ idx < processAcceptKeys.length - 1 ? ' | ' : '' }}
|
||||||
|
</template>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 卡片主体:processReturnKeys 字段(业务参数) -->
|
<!-- 卡片主体:processReturnKeys 字段(业务参数) -->
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="param-row" v-for="(row, rowIdx) in getGroupedReturnKeys" :key="rowIdx">
|
<div
|
||||||
<div class="param-item" v-for="(key, colIdx) in row" :key="colIdx">
|
class="param-row"
|
||||||
<span class="param-label">{{ getFieldLabel(key) }}:</span>
|
v-for="(row, rowIdx) in getGroupedReturnKeys"
|
||||||
<span class="param-value">{{ getFieldDisplayValue(key, item[key]) || '-' }}</span>
|
:key="rowIdx"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="param-item"
|
||||||
|
v-for="(key, colIdx) in row"
|
||||||
|
:key="colIdx"
|
||||||
|
>
|
||||||
|
<span class="param-label">
|
||||||
|
{{ getFieldLabel(key) }}({{ getFieldUnit(key) || '-' }}):
|
||||||
|
</span>
|
||||||
|
<span class="param-value">
|
||||||
|
{{ getFieldDisplayValue(key, item[key]) || '-' }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- 补全空项(保证每行两个布局) -->
|
<!-- 补全空项(保证每行两个布局) -->
|
||||||
<div class="param-item" v-if="row.length === 1"></div>
|
<div class="param-item" v-if="row.length === 1"></div>
|
||||||
@@ -75,9 +169,30 @@
|
|||||||
|
|
||||||
<!-- 卡片底部:操作按钮 -->
|
<!-- 卡片底部:操作按钮 -->
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<el-button size="mini" type="text" icon="el-icon-copy-document" @click="handleCopy(item)">复制</el-button>
|
<el-button
|
||||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item)">编辑</el-button>
|
size="mini"
|
||||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)">删除</el-button>
|
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>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
@@ -90,36 +205,94 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 分页组件 -->
|
<!-- 分页组件 -->
|
||||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
<pagination
|
||||||
@pagination="getList" />
|
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-dialog
|
||||||
<el-form ref="form" :model="form" :rules="formRules" label-width="100px">
|
:title="title"
|
||||||
|
:visible.sync="open"
|
||||||
|
width="600px"
|
||||||
|
append-to-body
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="form"
|
||||||
|
:model="form"
|
||||||
|
:rules="formRules"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
<!-- 第一部分:processAcceptKeys(编辑禁用,新增可编辑) -->
|
<!-- 第一部分:processAcceptKeys(编辑禁用,新增可编辑) -->
|
||||||
<el-form-item v-for="(key, idx) in processAcceptKeys" :key="`accept-${idx}-${key}`" :label="getFieldLabel(key)"
|
<el-form-item
|
||||||
:prop="key">
|
v-for="(key, idx) in processAcceptKeys"
|
||||||
<el-input v-if="getFieldComponentType(key) == 'el-input'" v-model="form[key]" placeholder="Please enter"
|
:key="`accept-${idx}-${key}`"
|
||||||
:disabled="isEdit" />
|
:label="getFieldUnit(key) ? `${getFieldLabel(key)}(${getFieldUnit(key)})` : getFieldLabel(key)"
|
||||||
<el-select v-else-if="getFieldComponentType(key) == 'el-select'" v-model="form[key]"
|
:prop="key"
|
||||||
placeholder="请选择" :disabled="isEdit">
|
>
|
||||||
<el-option v-for="item in getFieldOptions(key)" :key="item.value" :label="item.label" :value="item.value" />
|
<el-input
|
||||||
|
v-if="getFieldComponentType(key) == 'el-input'"
|
||||||
|
v-model="form[key]"
|
||||||
|
placeholder="Please enter"
|
||||||
|
: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>
|
</el-select>
|
||||||
<component v-else :is="getFieldComponentType(key)" v-model="form[key]"
|
<component
|
||||||
:placeholder="`请${getFieldInputHint(key)}${getFieldLabel(key)}`" :disabled="isEdit"
|
v-else
|
||||||
:options="getFieldOptions(key)" />
|
:is="getFieldComponentType(key)"
|
||||||
|
v-model="form[key]"
|
||||||
|
:placeholder="`请${getFieldInputHint(key)}${getFieldLabel(key)}`"
|
||||||
|
:disabled="isEdit"
|
||||||
|
:options="getFieldOptions(key)"
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<!-- 第二部分:processReturnKeys(始终可编辑) -->
|
<!-- 第二部分:processReturnKeys(始终可编辑) -->
|
||||||
<el-form-item v-for="(key, idx) in processReturnKeys" :key="`return-${idx}-${key}`" :label="getFieldLabel(key)"
|
<el-form-item
|
||||||
:prop="key">
|
v-for="(key, idx) in processReturnKeys"
|
||||||
<el-input v-if="getFieldComponentType(key) == 'el-input'" v-model="form[key]" placeholder="Please enter" />
|
:key="`return-${idx}-${key}`"
|
||||||
<el-select v-else-if="getFieldComponentType(key) == 'el-select'" v-model="form[key]"
|
:label="getFieldUnit(key) ? `${getFieldLabel(key)}(${getFieldUnit(key)})` : getFieldLabel(key)"
|
||||||
placeholder="请选择">
|
:prop="key"
|
||||||
<el-option v-for="item in getFieldOptions(key)" :key="item.value" :label="item.label" :value="item.value" />
|
>
|
||||||
|
<el-input
|
||||||
|
v-if="getFieldComponentType(key) == 'el-input'"
|
||||||
|
v-model="form[key]"
|
||||||
|
placeholder="Please enter"
|
||||||
|
/>
|
||||||
|
<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>
|
</el-select>
|
||||||
<component v-else :is="getFieldComponentType(key)" v-model="form[key]"
|
<component
|
||||||
:placeholder="`请${getFieldInputHint(key)}${getFieldLabel(key)}`" :options="getFieldOptions(key)" />
|
v-else
|
||||||
|
:is="getFieldComponentType(key)"
|
||||||
|
v-model="form[key]"
|
||||||
|
:placeholder="`请${getFieldInputHint(key)}${getFieldLabel(key)}`"
|
||||||
|
:options="getFieldOptions(key)"
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
@@ -139,9 +312,9 @@ export default {
|
|||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
validator: (val) => {
|
validator: (val) => {
|
||||||
const requiredKeys = ['list', 'get', 'add', 'update', 'del', 'export'];
|
const requiredKeys = ["list", "get", "add", "update", "del", "export"];
|
||||||
return requiredKeys.every(key => typeof val[key] === 'function');
|
return requiredKeys.every((key) => typeof val[key] === "function");
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
// 2. 字段配置schema(数组格式):[{
|
// 2. 字段配置schema(数组格式):[{
|
||||||
// prop: 字段名,
|
// prop: 字段名,
|
||||||
@@ -150,47 +323,48 @@ export default {
|
|||||||
// type?: 'input'|'select'(默认input),
|
// type?: 'input'|'select'(默认input),
|
||||||
// options?: 下拉选项数组(type=select时生效),
|
// options?: 下拉选项数组(type=select时生效),
|
||||||
// dict?: 字典转换函数(用于显示值转换,如钢种ID转名称)
|
// dict?: 字典转换函数(用于显示值转换,如钢种ID转名称)
|
||||||
|
// unit?: 量纲(如mm、MPa、KN)
|
||||||
// }]
|
// }]
|
||||||
schema: {
|
schema: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true,
|
required: true,
|
||||||
validator: (val) => val.every(item => !!item.prop && !!item.label)
|
validator: (val) => val.every((item) => !!item.prop && !!item.label),
|
||||||
},
|
},
|
||||||
// 3. 工艺参数接受值:字符串数组(编辑禁用的字段prop)
|
// 3. 工艺参数接受值:字符串数组(编辑禁用的字段prop)
|
||||||
processAcceptKeys: {
|
processAcceptKeys: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true,
|
required: true,
|
||||||
validator: (val) => val.every(item => typeof item === 'string')
|
validator: (val) => val.every((item) => typeof item === "string"),
|
||||||
},
|
},
|
||||||
// 4. 工艺参数返回值:字符串数组(可编辑的业务参数字段prop)
|
// 4. 工艺参数返回值:字符串数组(可编辑的业务参数字段prop)
|
||||||
processReturnKeys: {
|
processReturnKeys: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true,
|
required: true,
|
||||||
validator: (val) => val.every(item => typeof item === 'string')
|
validator: (val) => val.every((item) => typeof item === "string"),
|
||||||
},
|
},
|
||||||
// 7. 额外查询参数(如钢种筛选)
|
// 7. 额外查询参数(如钢种筛选)
|
||||||
extraQueryParams: {
|
extraQueryParams: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({}),
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
// 合并所有需要绑定的字段,初始化空值(解决响应式问题)
|
// 合并所有需要绑定的字段,初始化空值(解决响应式问题)
|
||||||
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
||||||
const initForm = {};
|
const initForm = {};
|
||||||
allKeys.forEach(key => {
|
allKeys.forEach((key) => {
|
||||||
initForm[key] = ''; // 为每个字段初始化空字符串,保证响应式
|
initForm[key] = ""; // 为每个字段初始化空字符串,保证响应式
|
||||||
});
|
});
|
||||||
|
|
||||||
// 初始化查询参数:合并分页参数、额外参数、processAcceptKeys空值
|
// 初始化查询参数:合并分页参数、额外参数、processAcceptKeys空值
|
||||||
const initQueryParams = {
|
const initQueryParams = {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
...this.extraQueryParams
|
...this.extraQueryParams,
|
||||||
};
|
};
|
||||||
// 为processAcceptKeys每个字段初始化查询参数空值
|
// 为processAcceptKeys每个字段初始化查询参数空值
|
||||||
this.processAcceptKeys.forEach(key => {
|
this.processAcceptKeys.forEach((key) => {
|
||||||
initQueryParams[key] = '';
|
initQueryParams[key] = "";
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@@ -211,7 +385,7 @@ export default {
|
|||||||
// 是否为新增状态
|
// 是否为新增状态
|
||||||
isAdd: false,
|
isAdd: false,
|
||||||
// 表单校验规则
|
// 表单校验规则
|
||||||
formRules: {}
|
formRules: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@@ -232,44 +406,50 @@ export default {
|
|||||||
// 编辑状态(更直观的计算属性)
|
// 编辑状态(更直观的计算属性)
|
||||||
isEdit() {
|
isEdit() {
|
||||||
return !this.isAdd;
|
return !this.isAdd;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/** 根据字段prop获取标签(从schema数组中匹配) */
|
/** 根据字段prop获取标签(从schema数组中匹配) */
|
||||||
getFieldLabel(prop) {
|
getFieldLabel(prop) {
|
||||||
const field = this.schema.find(item => item.prop === prop);
|
const field = this.schema.find((item) => item.prop === prop);
|
||||||
return field ? field.label : prop;
|
return field ? field.label : prop;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/** 新增:根据字段prop获取量纲 */
|
||||||
|
getFieldUnit(prop) {
|
||||||
|
const field = this.schema.find((item) => item.prop === prop);
|
||||||
|
return field?.unit || "";
|
||||||
|
},
|
||||||
|
|
||||||
/** 根据字段prop获取控件类型(默认input) */
|
/** 根据字段prop获取控件类型(默认input) */
|
||||||
getFieldComponentType(prop) {
|
getFieldComponentType(prop) {
|
||||||
const field = this.schema.find(item => item.prop === prop);
|
const field = this.schema.find((item) => item.prop === prop);
|
||||||
return field?.type || 'el-input';
|
return field?.type || "el-input";
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 根据字段prop获取输入提示(输入/选择) */
|
/** 根据字段prop获取输入提示(输入/选择) */
|
||||||
getFieldInputHint(prop) {
|
getFieldInputHint(prop) {
|
||||||
const field = this.schema.find(item => item.prop === prop);
|
const field = this.schema.find((item) => item.prop === prop);
|
||||||
return field?.type === 'el-select' ? '请选择' : '请输入';
|
return field?.type === "el-select" ? "请选择" : "请输入";
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 根据字段prop获取下拉选项 */
|
/** 根据字段prop获取下拉选项 */
|
||||||
getFieldOptions(prop) {
|
getFieldOptions(prop) {
|
||||||
const field = this.schema.find(item => item.prop === prop);
|
const field = this.schema.find((item) => item.prop === prop);
|
||||||
return field?.options || [];
|
return field?.options || [];
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 根据字段prop和值获取显示值(支持字典转换) */
|
/** 根据字段prop和值获取显示值(支持字典转换) */
|
||||||
getFieldDisplayValue(prop, value) {
|
getFieldDisplayValue(prop, value) {
|
||||||
if (value === '' || value === null || value === undefined) return '-';
|
if (value === "" || value === null || value === undefined) return "-";
|
||||||
const field = this.schema.find(item => item.prop === prop);
|
const field = this.schema.find((item) => item.prop === prop);
|
||||||
// 有字典转换函数则执行转换
|
// 有字典转换函数则执行转换
|
||||||
if (field?.dict && typeof field.dict === 'function') {
|
if (field?.dict && typeof field.dict === "function") {
|
||||||
return field.dict(value);
|
return field.dict(value);
|
||||||
}
|
}
|
||||||
// 下拉选项转换(ID转label)
|
// 下拉选项转换(ID转label)
|
||||||
if (field?.type === 'el-select' && field?.options.length) {
|
if (field?.type === "el-select" && field?.options.length) {
|
||||||
const option = field.options.find(item => item.value == value);
|
const option = field.options.find((item) => item.value == value);
|
||||||
return option ? option.label : value;
|
return option ? option.label : value;
|
||||||
}
|
}
|
||||||
return value;
|
return value;
|
||||||
@@ -280,11 +460,16 @@ export default {
|
|||||||
this.formRules = {};
|
this.formRules = {};
|
||||||
// 遍历所有字段(接受值+返回值)生成校验规则
|
// 遍历所有字段(接受值+返回值)生成校验规则
|
||||||
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
||||||
allKeys.forEach(key => {
|
allKeys.forEach((key) => {
|
||||||
const field = this.schema.find(item => item.prop === key);
|
const field = this.schema.find((item) => item.prop === key);
|
||||||
if (field?.required !== false) { // 默认必填,除非显式设置required: false
|
if (field?.required !== false) {
|
||||||
|
// 默认必填,除非显式设置required: false
|
||||||
this.formRules[key] = [
|
this.formRules[key] = [
|
||||||
{ required: true, message: `${this.getFieldInputHint(key)} ${this.getFieldLabel(key)}`, trigger: 'blur' }
|
{
|
||||||
|
required: true,
|
||||||
|
message: `${this.getFieldInputHint(key)} ${this.getFieldLabel(key)}`,
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -303,8 +488,8 @@ export default {
|
|||||||
/** 重置筛选条件 */
|
/** 重置筛选条件 */
|
||||||
handleResetFilter() {
|
handleResetFilter() {
|
||||||
// 重置processAcceptKeys对应的筛选字段为空
|
// 重置processAcceptKeys对应的筛选字段为空
|
||||||
this.processAcceptKeys.forEach(key => {
|
this.processAcceptKeys.forEach((key) => {
|
||||||
this.queryParams[key] = '';
|
this.queryParams[key] = "";
|
||||||
});
|
});
|
||||||
// 重置额外查询参数(可选:若需要保留额外参数,可注释此行)
|
// 重置额外查询参数(可选:若需要保留额外参数,可注释此行)
|
||||||
// Object.keys(this.extraQueryParams).forEach(key => {
|
// Object.keys(this.extraQueryParams).forEach(key => {
|
||||||
@@ -319,11 +504,14 @@ export default {
|
|||||||
this.loading = true;
|
this.loading = true;
|
||||||
// 合并额外查询参数(最终查询参数:分页+筛选+额外参数)
|
// 合并额外查询参数(最终查询参数:分页+筛选+额外参数)
|
||||||
const queryParams = { ...this.queryParams, ...this.extraQueryParams };
|
const queryParams = { ...this.queryParams, ...this.extraQueryParams };
|
||||||
this.apis.list(queryParams).then(response => {
|
this.apis
|
||||||
|
.list(queryParams)
|
||||||
|
.then((response) => {
|
||||||
this.paramList = response.rows || [];
|
this.paramList = response.rows || [];
|
||||||
this.total = response.total || 0;
|
this.total = response.total || 0;
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
}).catch(() => {
|
})
|
||||||
|
.catch(() => {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@@ -338,8 +526,8 @@ export default {
|
|||||||
resetForm() {
|
resetForm() {
|
||||||
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
||||||
const initForm = {};
|
const initForm = {};
|
||||||
allKeys.forEach(key => {
|
allKeys.forEach((key) => {
|
||||||
initForm[key] = '';
|
initForm[key] = "";
|
||||||
});
|
});
|
||||||
this.form = initForm; // 重置为初始化状态
|
this.form = initForm; // 重置为初始化状态
|
||||||
if (this.$refs.form) {
|
if (this.$refs.form) {
|
||||||
@@ -361,8 +549,8 @@ export default {
|
|||||||
this.resetForm();
|
this.resetForm();
|
||||||
// 复制行数据到表单
|
// 复制行数据到表单
|
||||||
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
||||||
allKeys.forEach(key => {
|
allKeys.forEach((key) => {
|
||||||
this.form[key] = row[key] || '';
|
this.form[key] = row[key] || "";
|
||||||
});
|
});
|
||||||
this.open = true;
|
this.open = true;
|
||||||
this.title = `复制新增工艺参数`;
|
this.title = `复制新增工艺参数`;
|
||||||
@@ -372,33 +560,38 @@ export default {
|
|||||||
handleUpdate(row) {
|
handleUpdate(row) {
|
||||||
this.isAdd = false; // 标记为编辑态
|
this.isAdd = false; // 标记为编辑态
|
||||||
this.resetForm(); // 重置表单
|
this.resetForm(); // 重置表单
|
||||||
this.apis.get(row).then(response => {
|
this.apis
|
||||||
|
.get(row)
|
||||||
|
.then((response) => {
|
||||||
const data = response.data || {};
|
const data = response.data || {};
|
||||||
// 赋值到表单(处理undefined情况,保证字段有值)
|
// 赋值到表单(处理undefined情况,保证字段有值)
|
||||||
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys];
|
||||||
allKeys.forEach(key => {
|
allKeys.forEach((key) => {
|
||||||
this.form[key] = data[key] !== undefined ? data[key] : '';
|
this.form[key] = data[key] !== undefined ? data[key] : "";
|
||||||
});
|
});
|
||||||
this.open = true;
|
this.open = true;
|
||||||
this.title = `编辑工艺参数`;
|
this.title = `编辑工艺参数`;
|
||||||
}).catch(error => {
|
})
|
||||||
this.$modal.msgError('获取详情失败,请稍后重试。');
|
.catch((error) => {
|
||||||
console.error('获取详情失败:', error);
|
this.$modal.msgError("获取详情失败,请稍后重试。");
|
||||||
|
console.error("获取详情失败:", error);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 提交表单 */
|
/** 提交表单 */
|
||||||
submitForm() {
|
submitForm() {
|
||||||
this.$refs.form.validate(valid => {
|
this.$refs.form.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
const api = this.isAdd ? this.apis.add : this.apis.update;
|
const api = this.isAdd ? this.apis.add : this.apis.update;
|
||||||
api(this.form).then(() => {
|
api(this.form)
|
||||||
|
.then(() => {
|
||||||
this.$modal.msgSuccess(this.isAdd ? "新增成功" : "更新成功");
|
this.$modal.msgSuccess(this.isAdd ? "新增成功" : "更新成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
}).catch(error => {
|
})
|
||||||
|
.catch((error) => {
|
||||||
this.$modal.msgError(this.isAdd ? "新增失败" : "更新失败");
|
this.$modal.msgError(this.isAdd ? "新增失败" : "更新失败");
|
||||||
console.error('提交失败:', error);
|
console.error("提交失败:", error);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -406,26 +599,28 @@ export default {
|
|||||||
|
|
||||||
/** 删除操作 */
|
/** 删除操作 */
|
||||||
handleDelete(row) {
|
handleDelete(row) {
|
||||||
this.$modal.confirm('确定删除该工艺参数吗?').then(() => {
|
this.$modal
|
||||||
|
.confirm("确定删除该工艺参数吗?")
|
||||||
|
.then(() => {
|
||||||
return this.apis.del(row);
|
return this.apis.del(row);
|
||||||
}).then(() => {
|
})
|
||||||
|
.then(() => {
|
||||||
this.getList();
|
this.getList();
|
||||||
this.$modal.msgSuccess("删除成功");
|
this.$modal.msgSuccess("删除成功");
|
||||||
}).catch(() => { });
|
})
|
||||||
|
.catch(() => {});
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 导出操作 */
|
/** 导出操作 */
|
||||||
handleExport() {
|
handleExport() {
|
||||||
try {
|
try {
|
||||||
this.download(this.apis.export, {
|
this.download(this.apis.export, { ...this.queryParams }, `工艺参数_${new Date().getTime()}.xlsx`);
|
||||||
...this.queryParams
|
|
||||||
}, `工艺参数_${new Date().getTime()}.xlsx`);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.$modal.msgWarning('导出功能暂未配置,请联系管理员。');
|
this.$modal.msgWarning("导出功能暂未配置,请联系管理员。");
|
||||||
console.error('导出失败:', error);
|
console.error("导出失败:", error);
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -557,7 +752,7 @@ export default {
|
|||||||
.param-value {
|
.param-value {
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 12px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<ProcessParamCardTemplate :apis="tensionApis" :schema="tensionSchema" :processAcceptKeys="processAcceptKeys"
|
<ProcessParamCardTemplate
|
||||||
:processReturnKeys="processReturnKeys" />
|
:apis="tensionApis"
|
||||||
|
:schema="tensionSchema"
|
||||||
|
:processAcceptKeys="processAcceptKeys"
|
||||||
|
:processReturnKeys="processReturnKeys"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ProcessParamCardTemplate from './T.vue';
|
import ProcessParamCardTemplate from "./T.vue";
|
||||||
import { listTension, getTension, delTension, addTension, updateTension } from "@/api/business/tension";
|
import {
|
||||||
|
listTension,
|
||||||
|
getTension,
|
||||||
|
delTension,
|
||||||
|
addTension,
|
||||||
|
updateTension,
|
||||||
|
} from "@/api/business/tension";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Tension",
|
name: "Tension",
|
||||||
@@ -18,37 +28,64 @@ export default {
|
|||||||
get: getTension,
|
get: getTension,
|
||||||
add: addTension,
|
add: addTension,
|
||||||
update: updateTension,
|
update: updateTension,
|
||||||
del: (row) => delTension({ thicks: [row.thick], yieldStrens: [row.yieldStren] }),
|
del: (row) =>
|
||||||
export: 'business/tension/export'
|
delTension({ thicks: [row.thick], yieldStrens: [row.yieldStren] }),
|
||||||
|
export: "business/tension/export",
|
||||||
},
|
},
|
||||||
// 2. 字段配置schema(数组格式)
|
// 2. 字段配置schema(数组格式)- 新增unit字段表示量纲
|
||||||
tensionSchema: [
|
tensionSchema: [
|
||||||
// 标识字段(processAcceptKeys)
|
// 标识字段(processAcceptKeys)
|
||||||
{ prop: 'thick', label: '厚度', required: true },
|
{ prop: "thick", label: "厚度", required: true, unit: "mm" }, // 厚度:毫米
|
||||||
{ prop: 'yieldStren', label: '屈服强度', required: true },
|
{ prop: "yieldStren", label: "屈服强度", required: true, unit: "MPa" }, // 屈服强度:兆帕
|
||||||
// 业务参数(processReturnKeys)
|
// 业务参数(processReturnKeys)
|
||||||
{ prop: 'value1', label: '开卷机张力', required: true },
|
{ prop: "value1", label: "开卷机张力", required: true, unit: "KN" }, // 张力:千牛
|
||||||
{ prop: 'value2', label: '入口活套', required: true },
|
{ prop: "value2", label: "入口活套张力", required: true, unit: "KN" }, // 张力:千牛
|
||||||
{ prop: 'value3', label: '清洗段', required: true },
|
{ prop: "value3", label: "清洗段张力", required: true, unit: "KN" }, // 张力:千牛
|
||||||
{ prop: 'value4', label: '炉区张力', required: true },
|
{ prop: "value4", label: "炉区张力", required: true, unit: "KN" }, // 张力:千牛
|
||||||
{ prop: 'value5', label: '冷却塔', required: true },
|
{ prop: "value5", label: "冷却塔", required: true, unit: "℃" }, // 冷却塔:摄氏度
|
||||||
{ prop: 'value6', label: '平整机(停机状态)', required: true },
|
{
|
||||||
{ prop: 'value7', label: '平整机入口', required: true },
|
prop: "value6",
|
||||||
{ prop: 'value8', label: '平整机出口', required: true },
|
label: "平整机张力",
|
||||||
{ prop: 'value9', label: '张力矫直机(停机状态)', required: true },
|
required: true,
|
||||||
{ prop: 'value10', label: '张力矫直机出口', required: true },
|
unit: "KN",
|
||||||
{ prop: 'value11', label: '后处理段', required: true },
|
}, // 张力:千牛
|
||||||
{ prop: 'value12', label: '出口活套', required: true },
|
{ prop: "value7", label: "平整机入口张力", required: true, unit: "KN" }, // 张力:千牛
|
||||||
{ prop: 'value13', label: '卷取机', required: true }
|
{ prop: "value8", label: "平整机出口张力", required: true, unit: "KN" }, // 张力:千牛
|
||||||
|
{
|
||||||
|
prop: "value9",
|
||||||
|
label: "矫直机张力",
|
||||||
|
required: true,
|
||||||
|
unit: "KN",
|
||||||
|
}, // 张力:千牛
|
||||||
|
{
|
||||||
|
prop: "value10",
|
||||||
|
label: "矫直机出口张力",
|
||||||
|
required: true,
|
||||||
|
unit: "KN",
|
||||||
|
}, // 张力:千牛
|
||||||
|
{ prop: "value11", label: "后处理段张力", required: true, unit: "KN" }, // 张力:千牛
|
||||||
|
{ prop: "value12", label: "出口活套张力", required: true, unit: "KN" }, // 张力:千牛
|
||||||
|
{ prop: "value13", label: "卷取机张力", required: true, unit: "KN" }, // 张力:千牛
|
||||||
],
|
],
|
||||||
// 3. 工艺参数接受值(编辑禁用的字段prop)
|
// 3. 工艺参数接受值(编辑禁用的字段prop)
|
||||||
processAcceptKeys: ['thick', 'yieldStren'],
|
processAcceptKeys: ["thick", "yieldStren"],
|
||||||
// 4. 工艺参数返回值(可编辑的业务参数字段prop)
|
// 4. 工艺参数返回值(可编辑的业务参数字段prop)
|
||||||
processReturnKeys: [
|
processReturnKeys: [
|
||||||
'value1', 'value2', 'value3', 'value4', 'value5', 'value6',
|
"value1",
|
||||||
'value7', 'value8', 'value9', 'value10', 'value11', 'value12', 'value13'
|
"value2",
|
||||||
]
|
"value3",
|
||||||
|
"value4",
|
||||||
|
"value5",
|
||||||
|
"value6",
|
||||||
|
"value7",
|
||||||
|
"value8",
|
||||||
|
"value9",
|
||||||
|
"value10",
|
||||||
|
"value11",
|
||||||
|
"value12",
|
||||||
|
"value13",
|
||||||
|
],
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
Reference in New Issue
Block a user