From 37263119a214eedf1d3927f75663b1fa77a12296 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= Date: Wed, 7 Jan 2026 17:35:17 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=B7=A5=E8=89=BA=E5=8F=82=E6=95=B0):=20?= =?UTF-8?q?=E4=B8=BA=E5=8F=82=E6=95=B0=E5=8D=A1=E7=89=87=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E9=87=8F=E7=BA=B2=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 在工艺参数卡片模板中新增unit字段支持，用于显示各参数的物理量纲。修改了模板组件以在筛选条件、卡片头部和主体中显示量纲单位，提升参数可读性。同时优化了卡片布局和字体大小。 --- apps/l2/src/views/l2/setup/panels/T.vue | 465 ++++++++++++++++------- apps/l2/src/views/l2/setup/panels/T1.vue | 93 +++-- 2 files changed, 395 insertions(+), 163 deletions(-) diff --git a/apps/l2/src/views/l2/setup/panels/T.vue b/apps/l2/src/views/l2/setup/panels/T.vue index c3f7bc6..31e2892 100644 --- a/apps/l2/src/views/l2/setup/panels/T.vue +++ b/apps/l2/src/views/l2/setup/panels/T.vue @@ -1,34 +1,78 @@ -
-
-
- {{ getFieldLabel(key) }}: - {{ getFieldDisplayValue(key, item[key]) || '-' }} +
+
+ + {{ getFieldLabel(key) }}({{ getFieldUnit(key) || '-' }}): + + + {{ getFieldDisplayValue(key, item[key]) || '-' }} +
@@ -75,9 +169,30 @@
- 复制 - 编辑 - 删除 + + 复制 + + + 编辑 + + + 删除 +
@@ -90,36 +205,94 @@
- + - - + + - - - - + + + + - + - - - - + + + + - +
@@ -139,58 +312,59 @@ export default { type: Object, required: true, validator: (val) => { - const requiredKeys = ['list', 'get', 'add', 'update', 'del', 'export']; - return requiredKeys.every(key => typeof val[key] === 'function'); - } + const requiredKeys = ["list", "get", "add", "update", "del", "export"]; + return requiredKeys.every((key) => typeof val[key] === "function"); + }, }, - // 2. 字段配置schema（数组格式）：[{ - // prop: 字段名, - // label: 字段标签, - // required?: 是否必填, + // 2. 字段配置schema（数组格式）：[{ + // prop: 字段名, + // label: 字段标签, + // required?: 是否必填, // type?: 'input'|'select'（默认input）, // options?: 下拉选项数组（type=select时生效）, // dict?: 字典转换函数（用于显示值转换，如钢种ID转名称） + // unit?: 量纲（如mm、MPa、KN） // }] schema: { type: Array, required: true, - validator: (val) => val.every(item => !!item.prop && !!item.label) + validator: (val) => val.every((item) => !!item.prop && !!item.label), }, // 3. 工艺参数接受值：字符串数组（编辑禁用的字段prop） processAcceptKeys: { type: Array, required: true, - validator: (val) => val.every(item => typeof item === 'string') + validator: (val) => val.every((item) => typeof item === "string"), }, // 4. 工艺参数返回值：字符串数组（可编辑的业务参数字段prop） processReturnKeys: { type: Array, required: true, - validator: (val) => val.every(item => typeof item === 'string') + validator: (val) => val.every((item) => typeof item === "string"), }, // 7. 额外查询参数（如钢种筛选） extraQueryParams: { type: Object, - default: () => ({}) - } + default: () => ({}), + }, }, data() { // 合并所有需要绑定的字段，初始化空值（解决响应式问题） const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys]; const initForm = {}; - allKeys.forEach(key => { - initForm[key] = ''; // 为每个字段初始化空字符串，保证响应式 + allKeys.forEach((key) => { + initForm[key] = ""; // 为每个字段初始化空字符串，保证响应式 }); // 初始化查询参数：合并分页参数、额外参数、processAcceptKeys空值 const initQueryParams = { pageNum: 1, pageSize: 10, - ...this.extraQueryParams + ...this.extraQueryParams, }; // 为processAcceptKeys每个字段初始化查询参数空值 - this.processAcceptKeys.forEach(key => { - initQueryParams[key] = ''; + this.processAcceptKeys.forEach((key) => { + initQueryParams[key] = ""; }); return { @@ -211,7 +385,7 @@ export default { // 是否为新增状态 isAdd: false, // 表单校验规则 - formRules: {} + formRules: {}, }; }, created() { @@ -232,44 +406,50 @@ export default { // 编辑状态（更直观的计算属性） isEdit() { return !this.isAdd; - } + }, }, methods: { /** 根据字段prop获取标签（从schema数组中匹配） */ 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; }, + /** 新增：根据字段prop获取量纲 */ + getFieldUnit(prop) { + const field = this.schema.find((item) => item.prop === prop); + return field?.unit || ""; + }, + /** 根据字段prop获取控件类型（默认input） */ getFieldComponentType(prop) { - const field = this.schema.find(item => item.prop === prop); - return field?.type || 'el-input'; + 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 === 'el-select' ? '请选择' : '请输入'; + const field = this.schema.find((item) => item.prop === prop); + return field?.type === "el-select" ? "请选择" : "请输入"; }, /** 根据字段prop获取下拉选项 */ getFieldOptions(prop) { - const field = this.schema.find(item => item.prop === 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); + if (value === "" || value === null || value === undefined) return "-"; + 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); } // 下拉选项转换（ID转label） - if (field?.type === 'el-select' && field?.options.length) { - const option = field.options.find(item => item.value == value); + if (field?.type === "el-select" && field?.options.length) { + const option = field.options.find((item) => item.value == value); return option ? option.label : value; } return value; @@ -280,11 +460,16 @@ export default { 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 + 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' } + { + required: true, + message: `${this.getFieldInputHint(key)} ${this.getFieldLabel(key)}`, + trigger: "blur", + }, ]; } }); @@ -303,8 +488,8 @@ export default { /** 重置筛选条件 */ handleResetFilter() { // 重置processAcceptKeys对应的筛选字段为空 - this.processAcceptKeys.forEach(key => { - this.queryParams[key] = ''; + this.processAcceptKeys.forEach((key) => { + this.queryParams[key] = ""; }); // 重置额外查询参数（可选：若需要保留额外参数，可注释此行） // Object.keys(this.extraQueryParams).forEach(key => { @@ -319,13 +504,16 @@ export default { 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; - }); + this.apis + .list(queryParams) + .then((response) => { + this.paramList = response.rows || []; + this.total = response.total || 0; + this.loading = false; + }) + .catch(() => { + this.loading = false; + }); }, /** 取消弹窗 */ @@ -338,8 +526,8 @@ export default { resetForm() { const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys]; const initForm = {}; - allKeys.forEach(key => { - initForm[key] = ''; + allKeys.forEach((key) => { + initForm[key] = ""; }); this.form = initForm; // 重置为初始化状态 if (this.$refs.form) { @@ -361,8 +549,8 @@ export default { this.resetForm(); // 复制行数据到表单 const allKeys = [...this.processAcceptKeys, ...this.processReturnKeys]; - allKeys.forEach(key => { - this.form[key] = row[key] || ''; + allKeys.forEach((key) => { + this.form[key] = row[key] || ""; }); this.open = true; this.title = `复制新增工艺参数`; @@ -371,61 +559,68 @@ export default { /** 修改操作（优化异常处理和数据赋值） */ handleUpdate(row) { this.isAdd = false; // 标记为编辑态 - 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.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 = `编辑工艺参数`; + }) + .catch((error) => { + this.$modal.msgError("获取详情失败，请稍后重试。"); + console.error("获取详情失败：", error); }); - this.open = true; - this.title = `编辑工艺参数`; - }).catch(error => { - this.$modal.msgError('获取详情失败，请稍后重试。'); - console.error('获取详情失败：', error); - }); }, /** 提交表单 */ submitForm() { - this.$refs.form.validate(valid => { + 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); - }); + 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(() => { }); + 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 - }, `工艺参数_${new Date().getTime()}.xlsx`); + this.download(this.apis.export, { ...this.queryParams }, `工艺参数_${new Date().getTime()}.xlsx`); } catch (error) { - this.$modal.msgWarning('导出功能暂未配置，请联系管理员。'); - console.error('导出失败：', error); + this.$modal.msgWarning("导出功能暂未配置，请联系管理员。"); + console.error("导出失败：", error); } - } - } + }, + }, }; @@ -557,7 +752,7 @@ export default { .param-value { color: #333; font-weight: 500; - font-size: 12px; + font-size: 10px; } } } diff --git a/apps/l2/src/views/l2/setup/panels/T1.vue b/apps/l2/src/views/l2/setup/panels/T1.vue index c591f35..c02b71d 100644 --- a/apps/l2/src/views/l2/setup/panels/T1.vue +++ b/apps/l2/src/views/l2/setup/panels/T1.vue @@ -1,11 +1,21 @@ \ No newline at end of file +