From ba72e3d15c5e5336201ab2e48c040fcfde423fc7 Mon Sep 17 00:00:00 2001
From: schangxiang@126.com <schangxiang@126.com>
Date: 周六, 17 5月 2025 16:03:02 +0800
Subject: [PATCH] 垂直滚动条效果
---
PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.module.scss | 162 +++++++++++++++++++++-----
PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.tsx | 171 +++++++++++++++++-----------
2 files changed, 234 insertions(+), 99 deletions(-)
diff --git a/PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.module.scss b/PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.module.scss
index 3bbdcc0..a63ef3a 100644
--- a/PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.module.scss
+++ b/PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.module.scss
@@ -1,6 +1,9 @@
.pipeAccessoryAssemblyContent {
width: 100%;
height: 100%;
+ // height: 100% !important;
+ // overflow-y: auto !important; /* 鍐呭瓒呭嚭鏃舵樉绀烘粴鍔ㄦ潯 */
+ // padding-bottom: 20px; /* 閬垮厤鍐呭琚簳閮ㄩ伄鎸� */
.pipeAccessoryAssemblyList {
width: 100%;
@@ -18,6 +21,24 @@
justify-content: flex-end;
align-items: center;
}
+
+ .h5Form {
+ display: flex;
+ flex-direction: column;
+ gap: 20px; // 琛ㄥ崟椤逛箣闂寸殑闂磋窛
+
+ .el-form-item {
+ margin-bottom: 0; // 绉婚櫎榛樿鐨勫簳閮ㄨ竟璺�
+ width: 100%; // 鍗犳弧鐖跺鍣ㄥ搴�
+ }
+
+ .el-form-item__label {
+ display: block;
+ text-align: left;
+ margin-bottom: 8px;
+ font-weight: 500;
+ }
+ }
}
.tagBox {
@@ -112,46 +133,121 @@
}
}
-.pipeAccessoryAssemblyContent {
- padding: 16px;
- background: #fff;
- border-radius: 4px;
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
- max-width: 500px; // 闄愬埗鏈�澶у搴�
- margin: 0 auto; // 姘村钩灞呬腑
- width: 90%; // 鍝嶅簲寮忓搴�
- .h5Form {
- display: flex;
- flex-direction: column;
- gap: 20px; // 琛ㄥ崟椤逛箣闂寸殑闂磋窛
- .el-form-item {
- margin-bottom: 0; // 绉婚櫎榛樿鐨勫簳閮ㄨ竟璺�
- width: 100%; // 鍗犳弧鐖跺鍣ㄥ搴�
+.newPageContent {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ padding: 20px;
+ background-color: white;
+
+ .info-block {
+ background-color: #f9f9f9;
+ border: 1px solid #eaeaea;
+ border-radius: 5px;
+ padding: 20px;
+ width: calc(33.33% - 20px);
+
+ .block-title {
+ font-size: 20px;
+ font-weight: bold;
+ margin-bottom: 15px;
}
- .el-form-item__label {
- display: block;
- text-align: left;
- margin-bottom: 8px;
- font-weight: 500;
+ .info-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+
+ .info-tag {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+
+ .tag-label {
+ font-weight: bold;
+ }
+ }
+ }
+
+ .action-buttons {
+ display: flex;
+ gap: 10px;
+ margin-top: 20px;
+ }
+
+ .equipment-image {
+ width: 100%;
+ height: auto;
+ margin-top: 20px;
+ }
+
+ .status-normal {
+ color: green;
}
}
- .formInput {
- width: 100%; // 杈撳叆妗嗗崰婊＄埗瀹瑰櫒瀹藉害
- }
+ .process-table {
+ width: 100%;
+ margin-top: 20px;
- .buttonGroup {
- display: flex;
- justify-content: center;
- gap: 16px; // 鎸夐挳闂磋窛
- margin-top: 16px;
-
- .actionButton {
- flex: 1; // 鎸夐挳骞冲潎鍒嗛厤绌洪棿
- max-width: 200px; // 闄愬埗鎸夐挳鏈�澶у搴�
+ .el-table {
+ border: 1px solid #eaeaea;
+ border-radius: 5px;
}
}
-}
\ No newline at end of file
+}
+
+
+.modelRrow {
+ display: flex; /* 寮规�у竷灞� */
+ gap: 20px; /* 鎺т欢闂磋窛 */
+ align-items: center; /* 鍨傜洿灞呬腑 */
+ margin-bottom: 12px; /* 搴曢儴闂磋窛 */
+ width: 100%;
+
+ .el-form-item {
+ flex: 1 !important; /* 鍧囧垎绌洪棿 */
+ margin-bottom: 0;
+ max-width: none; // 绉婚櫎鏈�澶у搴﹂檺鍒�
+ }
+
+ .el-select {
+ width: 100%; // 纭繚Select鍗犳弧鐖跺鍣ㄥ搴�
+
+ // 绉婚櫎鍙兘褰卞搷瀹藉害鐨勫唴閮ㄦ牱寮�
+ .el-input__wrapper {
+ width: 100%;
+ }
+ }
+
+ // 鍝嶅簲寮忚璁�
+ @media (max-width: 1200px) {
+ .model-row {
+ flex-wrap: wrap;
+
+ .el-form-item {
+ flex: 1 0 calc(50% - 10px); // 鍦ㄤ腑绛夊睆骞曚笂姣忚鏄剧ず2涓�
+ margin-bottom: 10px;
+ }
+ }
+ }
+
+ @media (max-width: 768px) {
+ .model-row {
+ flex-direction: column;
+
+ .el-form-item {
+ width: 100%; // 鍦ㄥ皬灞忓箷涓婃瘡琛屾樉绀�1涓�
+ }
+ }
+ }
+}
+
+.action-buttons {
+ display: flex;
+ gap: 10px;
+ margin-top: 20px;
+}
+
diff --git a/PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.tsx b/PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.tsx
index 200869b..32c31fb 100644
--- a/PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.tsx
+++ b/PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.tsx
@@ -1,6 +1,7 @@
import { defineComponent, onMounted, ref } from 'vue'
import type { Ref } from 'vue'
import styles from './PipeAccessoryAssembly.module.scss'
+import pipeImage from '@/images/pipe-assembly-drawing-example.png';
import {
ElInput,
ElForm,
@@ -9,6 +10,7 @@
ElSelect,
ElOption,
ElMessage,
+ ElCol,
} from 'element-plus'
import {
getPlaceNoForStockList,
@@ -81,73 +83,110 @@
return () => {
return (
- <div class={styles.PipeAccessoryAssemblyContent}>
- <ElForm label-position="top" class={styles.h5Form}>
- <ElFormItem label="鍨嬪彿">
- <ElSelect
- v-model={queryForm.value.materialModel}
- placeholder="璇烽�夋嫨鍨嬪彿"
- clearable
- class={styles.formInput}
- >
- {modelOptions.value.map((item) => (
- <ElOption
- key={item.value}
- label={item.label}
- value={item.value}
- />
- ))}
- </ElSelect>
- </ElFormItem>
- <ElFormItem label="搴撲綅鍙�">
- <ElSelect
- v-model={queryForm.value.placeNo}
- placeholder="璇烽�夋嫨搴撲綅鍙�"
- clearable
- class={styles.formInput}
- >
- {placeNoOptions.value.map((item) => (
- <ElOption
- key={item.value}
- label={item.label}
- value={item.value}
- />
- ))}
- </ElSelect>
- </ElFormItem>
- <ElFormItem label="鎵规鍙�">
- <ElInput
- v-model={queryForm.value.materialBatch}
- placeholder="璇疯緭鍏ユ壒娆″彿"
- clearable
- class={styles.formInput}
- />
- </ElFormItem>
- <ElFormItem label="鏁伴噺">
- <ElInput
- v-model={queryForm.value.stockNumber}
- placeholder="璇疯緭鍏ユ暟閲�"
- clearable
- class={styles.formInput}
- />
- </ElFormItem>
- <div class={styles.buttonGroup}>
- {/* <ElButton
- type="primary"
- onClick={handlePalletize}
- class={styles.actionButton}
- >
- 缁勭洏
- </ElButton> */}
- <ElButton
- type="success"
- onClick={handlePalletizeStorage}
- class={styles.actionButton}
- >
- 缁勭洏鍏ュ簱
- </ElButton>
+ <div class={styles.PipeAccessoryAssemblyContent} style="overflow-y: auto !important; height: 100%;">
+ <div class={styles.actionButtons}>
+ <ElButton type="warning">寮�宸�</ElButton>
+ <ElButton type="warning">瀹屽伐</ElButton>
+ <ElButton type="warning">鏆傚仠</ElButton>
+ <ElButton type="warning">鑷姩</ElButton>
+ <ElButton type="warning">璐ㄦ</ElButton>
+ </div>
+
+ <h2 class={styles.blockTitle}>褰撳墠宸ヤ綅/璁惧淇℃伅</h2>
+
+ {/* <div class={styles.modelRrow}> */}
+ {/* <div> */}
+ <div class={styles.headerContent}>
+ <div class={styles.header}>
+ <ElForm label-position="right" class={styles.h5Form}>
+ <ElFormItem label="鍨嬪彿1">
+ <ElSelect
+ v-model={queryForm.value.materialModel}
+ placeholder="璇烽�夋嫨鍨嬪彿"
+ clearable
+ disabled
+ class={styles.formInput}
+ >
+ {modelOptions.value.map((item) => (
+ <ElOption
+ key={item.value}
+ label={item.label}
+ value={item.value}
+ />
+ ))}
+ </ElSelect>
+ </ElFormItem>
+ <ElFormItem label="鍨嬪彿2">
+ <ElSelect
+ v-model={queryForm.value.materialModel}
+ placeholder="璇烽�夋嫨鍨嬪彿"
+ clearable
+ disabled
+ class={styles.formInput}
+ >
+ {modelOptions.value.map((item) => (
+ <ElOption
+ key={item.value}
+ label={item.label}
+ value={item.value}
+ />
+ ))}
+ </ElSelect>
+ </ElFormItem>
+ <ElFormItem label="鍨嬪彿3">
+ <ElSelect
+ v-model={queryForm.value.materialModel}
+ placeholder="璇烽�夋嫨鍨嬪彿"
+ clearable
+ disabled
+ class={styles.formInput}
+ >
+ {modelOptions.value.map((item) => (
+ <ElOption
+ key={item.value}
+ label={item.label}
+ value={item.value}
+ />
+ ))}
+ </ElSelect>
+ </ElFormItem>
+ <ElFormItem label="鍨嬪彿4">
+ <ElSelect
+ v-model={queryForm.value.materialModel}
+ placeholder="璇烽�夋嫨鍨嬪彿"
+ clearable
+ disabled
+ class={styles.formInput}
+ >
+ {modelOptions.value.map((item) => (
+ <ElOption
+ key={item.value}
+ label={item.label}
+ value={item.value}
+ />
+ ))}
+ </ElSelect>
+ </ElFormItem>
+ </ElForm>
</div>
- </ElForm>
+ </div>
+
+ <div class="info-block">
+ <h2 class="block-title">宸ヨ壓淇℃伅</h2>
+ <el-table stripe>
+ <el-table-column prop="sequence" label="搴�"></el-table-column>
+ <el-table-column prop="flangeA" label="娉曞叞A"></el-table-column>
+ <el-table-column prop="flangeB" label="娉曞叞B"></el-table-column>
+ </el-table>
+ </div>
+ <h2 class="block-title">鍥剧焊</h2>
+ <img
+ src={pipeImage}
+ alt="璁惧鍥剧墖"
+ style="height:1250px;"
+ class="equipment-image"
+ ></img>
+
</div>
)
}
--
Gitblit v1.9.3