代码上传

src/HManagement/clueManage/clue_import/detailPage/index.vue

@@ -11,7 +11,7 @@
         turnPageId="20221101094702"
         delApiId="20221101100702"
         idname="sat_orderclueuploadbillid"
-        tags=""
+        :status="['待审核']"
         :tabs="['详细信息','线索表体']"
         @pageChange="pageChange"
         @onEditSuccess="queryMainData($route.query.id)"

src/components/normal-basic-layout/details/index.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="flex-align-center">
           <cpEdit v-if="tool.checkAuth($route.name,'update')" :formPath="formPath" :oldFormPath="oldFormPath" :data="editData" btnType="default" @onAddSuccess="onSuccess"></cpEdit>
-          <el-button v-if="tool.checkAuth($route.name,'delete')" class="inline-16" size="mini" @click="deleteData">删 除</el-button>
+          <el-button v-if="tool.checkAuth($route.name,'delete')" class="inline-16" size="mini" :disabled="checkDisabled()" @click="deleteData">删 除</el-button>
           <div>
             <slot name="customOperation"></slot>
           </div>
@@ -54,7 +54,7 @@ import tabTemp from './modules/tabs/tab.vue'
 import group from './modules/group/group.vue'
 import {mapGetters} from 'vuex'
 export default {
-  props:['titleText','mainAreaData','turnPageId','delApiId','idname','ownertable','formPath','oldFormPath','editData','tags','tabs'],
+  props:['titleText','mainAreaData','turnPageId','delApiId','idname','ownertable','formPath','oldFormPath','editData','tags','tabs','status'],
   data () {
     return {
       routerName:'',
@@ -107,7 +107,7 @@ export default {
     onSuccess () {
       this.$emit('onEditSuccess')
     },
-     deleteData () {
+    deleteData () {
       this.$confirm('确定删除当前数据吗?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -141,6 +141,17 @@ export default {
         });          
       });
     },
+
+    // 验证删除按钮状态
+    checkDisabled () {
+      if (this.status) {
+        let let_isSame = this.status.some(item=>item === this.editData.status)
+        return let_isSame
+      } else {
+        return true
+      }
+      
+    }
   },
   mounted () {
   },

src/components/upload/test_upload.vue

@@ -1,14 +1,21 @@
 <template>
   <div>
-    <el-upload
-      action="#"
-      list-type="picture-card"
-      :on-change="onChange"
-      :on-remove="handleRemove"
-      :before-upload="beforeUpload"
-      :file-list="fileLinkList">
-      <i class="el-icon-plus"></i>
-    </el-upload>
+    <div class="flex-align-stretch">
+      <div v-for="(img,index) in fileLinkList" :key="index" class="upload_image__panel">
+        <img :src="img.url" alt="">
+        <div class="upload_image__panel_mod flex-align-center flex-around">
+          <i class="el-icon-delete" style="font-size:16px" @click="handleRemove(index)"></i>
+        </div>
+      </div>
+      <el-upload
+        action="#"
+        list-type="picture-card"
+        :on-change="onChange"
+        :before-upload="beforeUpload"
+        :show-file-list="false">
+        <i class="el-icon-plus"></i>
+      </el-upload>
+    </div>
   </div>
 </template>
 
@@ -33,11 +40,10 @@ export default {
   },
   methods: {
     onChange (file,fileList) {
-      this.fileList = [...this.fileList,...[file]]
-      console.log(fileList,'change')
+      console.log(file,this.fileList,fileList)
+      this.fileList.push(file)
     },
     beforeUpload (file) {
-      console.log(file,'bupload')
       var that = this
 
       var fileReader = new FileReader();
@@ -48,29 +54,21 @@ export default {
 
         var result = e.target.result;
         that.fileLinkList.push({url:result})
-        console.log(that.fileLinkList)
       }
     },
-    handleRemove (file, fileList) {
-      this.fileList = this.fileList.filter(e=>{
-        if (e.uid === file.uid) {
-          console.log(e)
-        }
-        return e.uid !== file.uid
-      })
-      this.fileLinkList = this.fileLinkList.filter(e=>{
-        return e.uid !== file.uid
-      })
+    handleRemove (index) {
+      this.fileList = this.fileList.splice(1,index)
+      this.fileLinkList = this.fileLinkList.splice(1,index)
     },
     toUpload () {
       console.log(this.fileList)
-      // this.fileList.forEach(file=>{
-      //   let index = file.raw.name.lastIndexOf(".");
-      //   let ext = file.name.substr(index + 1);
-      //   this.params.content.filename = file.raw.name
-      //   this.params.content.filetype = ext
-      //   this.getUploadUrl(file, ext)
-      // })
+      this.fileList.forEach(file=>{
+        let index = file.raw.name.lastIndexOf(".");
+        let ext = file.name.substr(index + 1);
+        this.params.content.filename = file.raw.name
+        this.params.content.filetype = ext
+        this.getUploadUrl(file, ext)
+      })
      
     },
 
@@ -117,4 +115,35 @@ export default {
 
 </script>
 <style>
+</style>
+<style scoped>
+.upload_image__panel{
+  position: relative;
+  height:148px;
+  width: 148px;
+  border-radius: 6px;
+  margin-right: 10px;
+  margin-bottom:10px;
+  border: 1px solid #c0ccda;
+  overflow: hidden;
+}
+.upload_image__panel img{
+  width: 100%;
+  height: 100%;
+}
+.upload_image__panel_mod{
+  position: absolute;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color:#fff;
+  background: rgba(0,0,0,.8);
+  opacity: 0;
+  transition: .3s linear;
+  cursor: pointer;
+}
+.upload_image__panel:hover .upload_image__panel_mod{
+  opacity: 1;
+}
 </style>