Ver Fonte

pms 瑞都日报 调整 施工设备 附件 显示样式

zhangcl há 3 dias atrás
pai
commit
7238b8881f

+ 11 - 1
src/components/UploadFile/src/FileUpload.vue

@@ -32,7 +32,7 @@
         :directory="isFolderMode"
         @change="handleFileChange"
       />
-      <p class="upload-hint">单个文件夹总大小不能超过500M</p>
+      <p class="upload-hint">{{ uploadHintText }}</p>
     </div>
 
     <!-- 上传列表与进度 - 保持不变 -->
@@ -172,6 +172,16 @@ const showErrorModal = ref(false);
 const errorMessage = ref('');
 const uploadTasks = ref(new Map());
 
+// 判断父组件是否传递了 showFolderButton 属性(而非判断其值)
+const hasShowFolderButton = Object.prototype.hasOwnProperty.call(props, 'showFolderButton');
+
+// 根据是否传递属性决定显示的提示文本
+const uploadHintText = computed(() => {
+  return hasShowFolderButton
+    ? '文件大小不能超过50M'
+    : '单个文件夹总大小不能超过500M';
+});
+
 // 获取进度条状态 - 保持不变
 const getProgressStatus = (status) => {
   switch(status) {

+ 71 - 33
src/views/pms/iotrddailyreport/FillDailyReportForm.vue

@@ -177,13 +177,13 @@
                   :content="getAllDeviceNamesForDisplay"
                   placement="top"
                 >
-          <span style="margin-left: 10px;">
-            {{ formatDevicesForDisplay }}
-          </span>
+                <span class="device-display-container">
+                  {{ formatDevicesForDisplay }}
+                </span>
                 </el-tooltip>
-                <span v-else style="margin-left: 10px; color: #909399;">
-          未选择设备
-        </span>
+                <span v-else class="no-device">
+                  未选择设备
+                </span>
               </template>
 
               <!-- 只读模式:只显示设备信息 -->
@@ -193,9 +193,9 @@
                   :content="getAllDeviceNamesForDisplay"
                   placement="top"
                 >
-          <span class="device-display-readonly">
-            {{ formatDevicesForDisplay }}
-          </span>
+                <span class="device-display-container">
+                  {{ formatDevicesForDisplay }}
+                </span>
                 </el-tooltip>
                 <span v-else class="no-device">-</span>
               </template>
@@ -342,25 +342,27 @@
               />
 
               <!-- 已上传附件列表显示 -->
-              <div v-if="formData.attachments && formData.attachments.length > 0" class="attachment-list">
-                <div
-                  v-for="(attachment, index) in formData.attachments"
-                  :key="attachment.id || index"
-                  class="attachment-item"
-                >
-                  <!-- 为附件名称添加点击事件,传递整个附件对象 -->
-                  <a class="attachment-name" @click="inContent(attachment)" style="cursor: pointer; color: #409eff; text-decoration: underline;">
-                    {{ attachment.filename }}
-                  </a>
-                  <el-button
-                    v-if="!isReadonlyMode"
-                    type="danger"
-                    link
-                    size="small"
-                    @click="removeAttachment(index)"
+              <div v-if="formData.attachments && formData.attachments.length > 0" class="attachment-container">
+                <div class="attachment-list">
+                  <div
+                    v-for="(attachment, index) in formData.attachments"
+                    :key="attachment.id || index"
+                    class="attachment-item"
                   >
-                    删除
-                  </el-button>
+                    <!-- 为附件名称添加点击事件,传递整个附件对象 -->
+                    <a class="attachment-name" @click="inContent(attachment)">
+                      {{ attachment.filename }}
+                    </a>
+                    <el-button
+                      v-if="!isReadonlyMode"
+                      type="danger"
+                      link
+                      size="small"
+                      @click="removeAttachment(index)"
+                    >
+                      删除
+                    </el-button>
+                  </div>
                 </div>
               </div>
 
@@ -733,9 +735,9 @@ const formatDevicesForDisplay = computed(() => {
   if (deviceNames.length === 0) return '无设备'
 
   // 如果设备数量超过2个,显示前两个加省略号
-  if (deviceNames.length > 2) {
+  /* if (deviceNames.length > 2) {
     return `${deviceNames[0]}, ${deviceNames[1]}...`
-  }
+  } */
 
   return deviceNames.join(', ')
 })
@@ -1442,11 +1444,13 @@ const handleApprove = async (action: 'pass' | 'reject') => {
 
 /* 附件列表样式 */
 .attachment-list {
-  margin-top: 10px;
+  width: 100%;
+  margin-top: 5px;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   padding: 10px;
   background-color: #fafafa;
+  box-sizing: border-box;
 }
 
 .attachment-item {
@@ -1464,13 +1468,14 @@ const handleApprove = async (action: 'pass' | 'reject') => {
 .attachment-name {
   flex: 1;
   color: #606266;
-  font-size: 14px;
+  font-size: 11px;
 }
 
 .no-attachment {
   color: #909399;
   font-style: italic;
-  margin-top: 10px;
+  margin-top: 5px;
+  padding: 10px;
 }
 
 /* 附件名称链接样式 */
@@ -1487,7 +1492,7 @@ const handleApprove = async (action: 'pass' | 'reject') => {
 /* 只读模式下的设备显示样式 */
 .device-display-readonly {
   color: #606266;
-  font-size: 14px;
+  font-size: 11px;
   line-height: 1.5;
   background-color: #f5f7fa;
   padding: 8px 12px;
@@ -1498,6 +1503,7 @@ const handleApprove = async (action: 'pass' | 'reject') => {
 }
 
 .no-device {
+  margin-left: 10px;
   color: #909399;
   font-style: italic;
 }
@@ -1537,4 +1543,36 @@ const handleApprove = async (action: 'pass' | 'reject') => {
 :deep(.el-transfer-panel__list) {
   width: 100% !important;
 }
+
+.device-display-container {
+  /* 与其他文本域保持相同的宽度和样式 */
+  display: inline-block;
+  width: 100%; /* 减去按钮宽度 */
+  min-height: 32px;
+  line-height: 32px;
+  padding: 0 12px;
+  margin-left: 0px;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  background-color: #fff;
+  font-size: 11px;
+  /* 文本溢出处理 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 只读模式下的设备显示样式 */
+:deep(.is-disabled) .device-display-container {
+  background-color: #f5f7fa;
+  color: #606266;
+  cursor: not-allowed;
+}
+
+/* 附件容器样式调整 */
+.attachment-container {
+  /* 与其他文本域保持相同的宽度和边距 */
+  width: 100%;
+  margin-top: 10px;
+}
 </style>