机床总图上传

src/views/TechnologyCenter/QueryParts/index.vue

@@ -30,6 +30,22 @@
 
       <el-button icon="el-icon-search" type="success" size="small" @click="pageCurrentWB = 1;pageSizeWB = 10;pageCurrent = 1;pageSize = 10;getTableData()">查询</el-button>
     </el-card>
+    <el-card>
+      <div v-for="(file, key) in hadFile" :key="key">
+        <div class="wrapper">
+          <div class="content">
+            <div class="action"/>
+            <div v-if="file.suffix==='pdf'" class="icon"><svg-icon icon-class="pdf" /></div>
+            <div v-else-if="file.suffix==='docx'||file.suffix === 'doc'" class="icon"><svg-icon icon-class="doc" /></div>
+            <div v-else-if="file.suffix==='xlsx' || file.suffix === 'xls'" class="icon"><svg-icon icon-class="excel" /></div>
+            <div v-else-if="file.suffix==='pptx' || file.suffix === 'ppt'" class="icon"><svg-icon icon-class="ppt" /></div>
+            <div v-else-if="file.suffix==='jpg' || file.suffix === 'jpeg'|| file.suffix === 'png'" class="icon"><svg-icon icon-class="pic" /></div>
+            <div v-else class="icon"><svg-icon icon-class="file" /></div>
+            <a :href="file.url" target="view_window"><div class="info">{{ file.name }}</div></a>
+          </div>
+        </div>
+      </div>
+    </el-card>
     <el-card>
       <el-table
         v-loading="loading"
@@ -225,8 +241,9 @@
 </template>
 
 <script>
-import { projectSelect, machineSelect, groupSelect, basicPartsData, deleteBasicParts, purchasePartsData, deletePurchaseData } from '@/api/TechnologyCenter/QueryParts'
+import { projectSelect, machineSelect, groupSelect, basicPartsData, deleteBasicParts, purchasePartsData, deletePurchaseData, getFileData } from '@/api/TechnologyCenter/QueryParts'
 import { mapGetters } from 'vuex'
+import { ServerIP } from '@/utils/request'
 export default {
   name: 'Index',
   data() {
@@ -246,7 +263,8 @@ export default {
       pageSize: 10,
       pageCurrentWB: 1,
       pageSizeWB: 10,
-      totalWB: 0
+      totalWB: 0,
+      hadFile: []
     }
   },
   computed: {
@@ -309,6 +327,22 @@ export default {
     this.fetchData()
   },
   methods: {
+    // 在什么情况下需要查询上传的附件，调用this.getFileData()即可根据
+    getFileData(machineValue) {
+      this.hadFile = []
+      getFileData(machineValue).then(res => {
+        if (res.data.length > 0) {
+          res.data.map(item => {
+            this.hadFile.push({
+              url: `${ServerIP}${item.文件标识}.${item.文件后缀}`,
+              name: `${item.文件名称}.${item.文件后缀}`,
+              suffix: item.文件后缀,
+              id: item.文件标识
+            })
+          })
+        }
+      })
+    },
     fetchData() {
       this.getSelect(projectSelect, ['项目名称', '项目流水号'], 'project')
     },
@@ -319,6 +353,8 @@ export default {
       this.getSelect(groupSelect, ['组号', '组件流水号'], 'group', val)
     },
     getTableData() {
+      this.getFileData(this.machineValue)
+      console.log(this.hadFile, 88899)
       const project_check = this.projectValue ? 1 : 0
       const machine_check = this.machineValue ? 1 : 0
       const group_check = this.groupValue ? 1 : 0
@@ -388,4 +424,49 @@ export default {
 span{
   margin: 20px;
 }
+.wrapper{
+  width: 225px;
+  height: 50px;
+  overflow: hidden;
+  border: 1px solid #b8c7d9;
+  float: left;
+  margin: 10px;
+}
+.content{
+  position: relative;
+  padding: 8px 8px 0 8px;
+}
+.action{
+  position: absolute;
+  top: 4px;
+  right: 8px;
+}
+.delete{
+  padding: 0 5px;
+  border-radius: 3px;
+  color: #0f84b0;
+  font-size: 12px;
+}
+.delete:hover{
+  background: -webkit-linear-gradient(top,#0ba9e3,#0099d3);
+  color: #fff;
+}
+a{
+  text-decoration: none;
+}
+.icon{
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  margin-right: 7px;
+  margin-top: 2px;
+  font-size: 26px;
+}
+.info{
+  position: absolute;
+  left: 44px;
+  line-height: 30px;
+  display: inline-block;
+  color: #999;
+}
 </style>