项目管理优化

components/page/filesView.vue

 <template>
   <div class="files-view">
-    <Tag v-for="(item, index) in nameList" :key="index" :name="item.id">
-      <a @click="downFile(item)" target="_blank">{{ item.fileName }}</a>
-    </Tag>
+    <Card v-for="(item, index) in nameList" :key="index" :name="item.id">
+      <Row :gutter="16">
+        <Col span="4">
+          <Icon
+            type="md-images"
+            v-if="
+              item.fileType == 'jpg' ||
+              item.fileType == 'gif' ||
+              item.fileType == 'png'
+            "
+          />
+          <Icon type="ios-paper" v-else />
+        </Col>
+        <Col span="20">
+          <div>
+            <div
+              v-if="
+                item.fileType == 'jpg' ||
+                item.fileType == 'gif' ||
+                item.fileType == 'png'
+              "
+            >
+              图片名称
+            </div>
+            <div v-else>文件名称</div>
+            <Tooltip :content="item.fileName" placement="top">
+              <a @click="downFile(item)" target="_blank">
+                {{ item.fileName | ellipsis }}</a
+              >
+            </Tooltip>
+          </div>
+        </Col>
+      </Row>
+    </Card>
     <Modal
       v-model="modal"
       title="查看"
@@ -33,6 +64,16 @@ export default {
       default: "",
     },
   },
+  filters: {
+    ellipsis(value) {
+      let len = value.length;
+      if (!value) return "";
+      if (value.length > 28) {
+        return value.substring(0, 28) + "...";
+      }
+      return value;
+    },
+  },
 
   mounted() {
     if (this.parms.eid) {
@@ -82,5 +123,24 @@ export default {
 </script>
 <style lang="less">
 .files-view {
+  min-height: 300px;
+  display: -webkit-flex;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+
+  .ivu-card {
+    height: 80px;
+    width: 235px;
+    margin: 10px;
+    .ivu-icon {
+      font-size: 30px;
+      margin-top: 8px;
+      color: #515a6e;
+    }
+  }
+}
+.files-view .ivu-card > .ivu-card-body {
+  padding: 16px 0 0 5px;
 }
 </style>

components/page/pictrue.vue

@@ -12,13 +12,13 @@ export default {
   },
   mounted() {
     if (this.src) {
-      this.path = downUrl + v;
+      // this.path = downUrl + this.src;
     }
   },
   watch: {
     src(v) {
       if (v) {
-        this.path = downUrl + v;
+        // this.path = downUrl + v;
       }
     },
   },

pages/project/project/add.vue

@@ -240,7 +240,7 @@ export default {
       }
     },
     imgName(newName, oldName) {
-      console.log(newName);
+      // console.log(newName);
       const imgPathsArr = JSON.parse(newName);
       this.entity.picture = imgPathsArr[0].filePath;
       this.avatorPath = fileUrlDown + imgPathsArr[0].filePath;

pages/project/project/details.vue

@@ -16,12 +16,13 @@
             </Filed>
             <Filed :span="24" :name="l('note') + '：'">{{ entity.note }}</Filed>
             <Filed :span="24" :name="l('attachment') + '：'">
-              <files
+              <FilesView ref="refFile" :parms="parms" />
+              <!-- <files
                 ref="refFile"
                 :parms="parms"
                 fileFormat
                 :showList="false"
-              />
+              /> -->
             </Filed>
           </Row>
         </div>

pages/project/project/edit.vue

@@ -171,9 +171,13 @@ export default {
         this.load(v);
       }
     },
+    imgName(newName, oldName) {
+      const imgPathsArr = JSON.parse(newName);
+      this.entity.picture = imgPathsArr[0].filePath;
+      this.avatorPath = fileUrlDown + imgPathsArr[0].filePath;
+    },
   },
 };
 </script>
 <style lang="less">
-
 </style>
\ No newline at end of file

pages/project/project/index.vue

@@ -130,7 +130,7 @@
       footer-hide
       :mask-closable="false"
     >
-      <FilesView ref="refFile" :parms="parms" class="files-detail" />
+      <FilesView ref="refFile" :parms="parms" />
     </Modal>
   </div>
 </template>
@@ -403,8 +403,25 @@ export default {
       }
     },
     viewImg(row) {
-      console.log(row);
-      window.open(fileUrlDown + row.picture, "_blank");
+      // console.log(row);
+      // window.open(fileUrlDown + row.picture, "_blank");
+      if (row.picture) {
+        this.$Modal.confirm({
+          render: (h) => {
+            return h("Pictrue", {
+              props: {
+                src: row.picture,
+              },
+              style: {
+                width: "100%",
+                height: "100%",
+              },
+            });
+          },
+        });
+      } else {
+        this.$Message.error("暂没上传图片");
+      }
     },
     viewFiles(row) {
       console.log(row);
@@ -562,7 +579,4 @@ export default {
     }
   }
 }
-.files-detail {
-  min-height: 300px;
-}
 </style>
\ No newline at end of file