文件弹框样式fix

.env.local

@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径  http://192.168.188.200:48080  https://iot.deepoil.cc:5443  http://172.26.0.56:48080  http://192.168.188.198:48080
-VITE_BASE_URL='http://192.168.188.198:48080'
+VITE_BASE_URL='https://iot.deepoil.cc:5443'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

src/views/pms/qhse/certificate.vue

@@ -382,25 +382,25 @@
     </template>
   </Dialog>
 
-  <Dialog v-model="dialogFileView" title="证书附件">
+  <Dialog v-model="dialogFileView" title="附件">
     <div
       v-for="(file, index) in fileList"
       :key="index"
-      class="flex items-center justify-between mt-5">
-      <span class="file-name-text text-ellipsis!">{{ extractFileName(file) }}</span>
-      <div>
+      class="mt-5 flex min-w-0 items-center justify-between gap-5">
+      <span class="file-name-text flex-1 min-w-0">{{ extractFileName(file) }}</span>
+      <div class="flex shrink-0 items-center gap-5 flex-nowrap">
         <el-button link type="primary" @click="viewFileInfo(file)">
-          <Icon icon="ep:view" class="mr-2px" />查看</el-button
-        >
+          <Icon icon="ep:view" class="mr-2px" />查看
+        </el-button>
         <el-button link type="primary" @click="handleDownload(file)">
-          <Icon icon="ep:download" class="mr-2px" />下载</el-button
-        >
+          <Icon icon="ep:download" class="mr-2px" />下载
+        </el-button>
       </div>
     </div>
 
     <template #footer>
       <div class="dialog-footer mt-10">
-        <el-button type="primary" @click="dialogFileView = false"> 确认 </el-button>
+        <el-button type="primary" @click="dialogFileView = false">确认</el-button>
       </div>
     </template>
   </Dialog>
@@ -862,6 +862,12 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+.file-name-text {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 ::deep(.el-tree--highlight-current) {
   height: 200px !important;
 }

src/views/pms/qhse/credential/index.vue

@@ -328,25 +328,25 @@
     </template>
   </Dialog>
 
-  <Dialog v-model="dialogFileView" title="证书附件">
+  <Dialog v-model="dialogFileView" title="附件">
     <div
       v-for="(file, index) in fileList"
       :key="index"
-      class="flex items-center justify-between mt-5">
-      <span class="file-name-text text-ellipsis!">{{ extractFileName(file) }}</span>
-      <div>
+      class="mt-5 flex min-w-0 items-center justify-between gap-5">
+      <span class="file-name-text flex-1 min-w-0">{{ extractFileName(file) }}</span>
+      <div class="flex shrink-0 items-center gap-5 flex-nowrap">
         <el-button link type="primary" @click="viewFileInfo(file)">
-          <Icon icon="ep:view" class="mr-2px" />查看</el-button
-        >
+          <Icon icon="ep:view" class="mr-2px" />查看
+        </el-button>
         <el-button link type="primary" @click="handleDownload(file)">
-          <Icon icon="ep:download" class="mr-2px" />下载</el-button
-        >
+          <Icon icon="ep:download" class="mr-2px" />下载
+        </el-button>
       </div>
     </div>
 
     <template #footer>
       <div class="dialog-footer mt-10">
-        <el-button type="primary" @click="dialogFileView = false"> 确认 </el-button>
+        <el-button type="primary" @click="dialogFileView = false">确认</el-button>
       </div>
     </template>
   </Dialog>
@@ -782,7 +782,12 @@ onMounted(async () => {
 ::deep(.el-transfer-panel__body) {
   height: 700px !important;
 }
-
+.file-name-text {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .stats-cards {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));

src/views/pms/qhse/deviceCert/index.vue

@@ -248,21 +248,21 @@
     <div
       v-for="(file, index) in fileList"
       :key="index"
-      class="flex items-center justify-between mt-5">
-      <span class="file-name-text">{{ extractFileName(file) }}</span>
-      <div>
+      class="mt-5 flex min-w-0 items-center justify-between gap-5">
+      <span class="file-name-text flex-1 min-w-0">{{ extractFileName(file) }}</span>
+      <div class="flex shrink-0 items-center gap-5 flex-nowrap">
         <el-button link type="primary" @click="viewFileInfo(file)">
-          <Icon icon="ep:view" class="mr-2px" />查看</el-button
-        >
+          <Icon icon="ep:view" class="mr-2px" />查看
+        </el-button>
         <el-button link type="primary" @click="handleDownload(file)">
-          <Icon icon="ep:download" class="mr-2px" />下载</el-button
-        >
+          <Icon icon="ep:download" class="mr-2px" />下载
+        </el-button>
       </div>
     </div>
 
     <template #footer>
       <div class="dialog-footer mt-10">
-        <el-button type="primary" @click="dialogFileView = false"> 确认 </el-button>
+        <el-button type="primary" @click="dialogFileView = false">确认</el-button>
       </div>
     </template>
   </Dialog>
@@ -521,12 +521,10 @@ onMounted(() => {
 
 <style scoped>
 .file-name-text {
-  flex: 1;
+  display: block;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 12px;
-  color: var(--el-text-color-primary);
 }
 
 .stats-cards {

src/views/pms/qhse/emergencyDrill/bookCheck/index.vue

@@ -136,9 +136,9 @@
     <div
       v-for="(file, index) in fileList"
       :key="index"
-      class="flex items-center justify-between w-full mt-5 gap-5">
-      <span class="file-name-text">{{ extractFileName(file) }}</span>
-      <div calss="flex gap-5 no-wrap">
+      class="mt-5 flex min-w-0 items-center justify-between gap-5">
+      <span class="file-name-text flex-1 min-w-0">{{ extractFileName(file) }}</span>
+      <div class="flex shrink-0 items-center gap-5 flex-nowrap">
         <el-button link type="primary" @click="viewFileInfo(file)">
           <Icon icon="ep:view" class="mr-2px" />查看
         </el-button>
@@ -316,6 +316,7 @@ onMounted(async () => {
 
 <style scoped>
 .file-name-text {
+  display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/views/pms/qhse/emergencyDrill/index.vue

@@ -157,13 +157,13 @@
     </div>
   </div>
 
-  <Dialog v-model="dialogFileView" title="附件" width="500">
+  <Dialog v-model="dialogFileView" title="附件">
     <div
       v-for="(file, index) in fileList"
       :key="index"
-      class="flex items-center justify-between mt-5">
-      <span class="file-name-text">{{ extractFileName(file) }}</span>
-      <div>
+      class="mt-5 flex min-w-0 items-center justify-between gap-5">
+      <span class="file-name-text flex-1 min-w-0">{{ extractFileName(file) }}</span>
+      <div class="flex shrink-0 items-center gap-5 flex-nowrap">
         <el-button link type="primary" @click="viewFileInfo(file)">
           <Icon icon="ep:view" class="mr-2px" />查看
         </el-button>
@@ -321,11 +321,9 @@ onMounted(async () => {
 
 <style scoped>
 .file-name-text {
-  flex: 1;
+  display: block;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 12px;
-  color: var(--el-text-color-primary);
 }
 </style>

src/views/pms/qhse/index.vue

@@ -436,21 +436,21 @@
     <div
       v-for="(file, index) in fileList"
       :key="index"
-      class="flex items-center justify-between mt-5">
-      <span class="file-name-text">{{ extractFileName(file) }}</span>
-      <div>
+      class="mt-5 flex min-w-0 items-center justify-between gap-5">
+      <span class="file-name-text flex-1 min-w-0">{{ extractFileName(file) }}</span>
+      <div class="flex shrink-0 items-center gap-5 flex-nowrap">
         <el-button link type="primary" @click="viewFileInfo(file)">
-          <Icon icon="ep:view" class="mr-2px" />查看</el-button
-        >
+          <Icon icon="ep:view" class="mr-2px" />查看
+        </el-button>
         <el-button link type="primary" @click="handleDownload(file)">
-          <Icon icon="ep:download" class="mr-2px" />下载</el-button
-        >
+          <Icon icon="ep:download" class="mr-2px" />下载
+        </el-button>
       </div>
     </div>
 
     <template #footer>
       <div class="dialog-footer mt-10">
-        <el-button type="primary" @click="dialogFileView = false"> 确认 </el-button>
+        <el-button type="primary" @click="dialogFileView = false">确认</el-button>
       </div>
     </template>
   </Dialog>
@@ -1030,6 +1030,12 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+.file-name-text {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 ::deep(.el-tree--highlight-current) {
   height: 200px !important;
 }

src/views/pms/qhse/jsa/index.vue

@@ -138,21 +138,21 @@
         <div
           v-for="(file, index) in fileList"
           :key="index"
-          class="flex items-center justify-between mt-5">
-          <span class="file-name-text">{{ extractFileName(file) }}</span>
-          <div>
+          class="mt-5 flex min-w-0 items-center justify-between gap-5">
+          <span class="file-name-text flex-1 min-w-0">{{ extractFileName(file) }}</span>
+          <div class="flex shrink-0 items-center gap-5 flex-nowrap">
             <el-button link type="primary" @click="viewFileInfo(file)">
-              <Icon icon="ep:view" class="mr-2px" />查看</el-button
-            >
+              <Icon icon="ep:view" class="mr-2px" />查看
+            </el-button>
             <el-button link type="primary" @click="handleDownload(file)">
-              <Icon icon="ep:download" class="mr-2px" />下载</el-button
-            >
+              <Icon icon="ep:download" class="mr-2px" />下载
+            </el-button>
           </div>
         </div>
 
         <template #footer>
           <div class="dialog-footer mt-10">
-            <el-button type="primary" @click="dialogFileView = false"> 确认 </el-button>
+            <el-button type="primary" @click="dialogFileView = false">确认</el-button>
           </div>
         </template>
       </Dialog>
@@ -304,3 +304,12 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style scoped>
+.file-name-text {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

src/views/pms/qhse/kanban/index.vue

@@ -1607,25 +1607,25 @@ onUnmounted(() => {
     </div>
   </div>
 
-  <Dialog v-model="dialogFileView" title="附件" width="500">
+  <Dialog v-model="dialogFileView" title="附件">
     <div
       v-for="(file, index) in fileList"
       :key="index"
-      class="flex items-center justify-between mt-5">
-      <span class="file-name-text">{{ extractFileName(file) }}</span>
-      <div>
+      class="mt-5 flex min-w-0 items-center justify-between gap-5">
+      <span class="file-name-text flex-1 min-w-0">{{ extractFileName(file) }}</span>
+      <div class="flex shrink-0 items-center gap-5 flex-nowrap">
         <el-button link type="primary" @click="viewFileInfo(file)">
-          <Icon icon="ep:view" class="mr-2px" />查看</el-button
-        >
+          <Icon icon="ep:view" class="mr-2px" />查看
+        </el-button>
         <el-button link type="primary" @click="handleDownload(file)">
-          <Icon icon="ep:download" class="mr-2px" />下载</el-button
-        >
+          <Icon icon="ep:download" class="mr-2px" />下载
+        </el-button>
       </div>
     </div>
 
     <template #footer>
       <div class="dialog-footer mt-10">
-        <el-button type="primary" @click="dialogFileView = false"> 确认 </el-button>
+        <el-button type="primary" @click="dialogFileView = false">确认</el-button>
       </div>
     </template>
   </Dialog>
@@ -2411,6 +2411,13 @@ onUnmounted(() => {
   flex: 1;
 }
 
+.file-name-text {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 // :deep(.el-input__inner) {
 //   font-size: 14px !important;
 //   border: none !important;

src/views/pms/qhse/ptw/index.vue

@@ -308,21 +308,21 @@
     <div
       v-for="(file, index) in fileList"
       :key="index"
-      class="flex items-center justify-between mt-5">
-      <span class="file-name-text">{{ extractFileName(file) }}</span>
-      <div>
+      class="mt-5 flex min-w-0 items-center justify-between gap-5">
+      <span class="file-name-text flex-1 min-w-0">{{ extractFileName(file) }}</span>
+      <div class="flex shrink-0 items-center gap-5 flex-nowrap">
         <el-button link type="primary" @click="viewFileInfo(file)">
-          <Icon icon="ep:view" class="mr-2px" />查看</el-button
-        >
+          <Icon icon="ep:view" class="mr-2px" />查看
+        </el-button>
         <el-button link type="primary" @click="handleDownload(file)">
-          <Icon icon="ep:download" class="mr-2px" />下载</el-button
-        >
+          <Icon icon="ep:download" class="mr-2px" />下载
+        </el-button>
       </div>
     </div>
 
     <template #footer>
       <div class="dialog-footer mt-10">
-        <el-button type="primary" @click="dialogFileView = false"> 确认 </el-button>
+        <el-button type="primary" @click="dialogFileView = false">确认</el-button>
       </div>
     </template>
   </Dialog>
@@ -1027,6 +1027,12 @@ const handleRadioChange2 = (row: any) => {
 </script>
 
 <style scoped>
+.file-name-text {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 ::deep(.el-tree--highlight-current) {
   height: 200px !important;
 }