src/views/debugCenter/debugPanel/index.vue

@@ -169,42 +169,50 @@
     </el-dialog>
 
     <!-- 单个个设备编辑层 -->
-    <el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="500px">
+    <el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="50%">
       <div class="SingEditContent">
         <div class="Boot item">
           <div class="title">开机画面</div>
-          <div class="img">
+          <div class="imgs">
             <div class="Preview">
-              <img class="img" :src="cEdit.fileBoot.src" @click.stop="showCheckFile('fileBoot')" />
+              <img class="img" v-show="cEdit.fileBoot.src" :src="cEdit.fileBoot.src" @click.stop="showCheckFile('fileBoot')" />
             </div>
           </div>
           <div class="option center" @click.stop="showCheckFile('fileBoot')">修改</div>
           <div class="clear">
-            <input type="file" id="fileBoot" class="displayNone" />
+            <input type="file" accept="image/*" id="fileBoot" class="displayNone" />
           </div>
         </div>
         <div class="Param item">
           <div class="title">产品参数</div>
-          <div class="img">
+          <div class="imgs">
             <div class="Preview">
-              <img v-for="(item, index) in cEdit.fileParam" class="img" :src="item.src" />
+              <div class="imgContent" v-for="(item, index) in cEdit.fileParam">
+                <img class="img" :src="item.src" />
+                <div class="opt" @click.stop="DelImg(item,index,'fileParam')">
+                  <el-icon>
+                    <Delete />
+                  </el-icon>
+                </div>
+              </div>
+              <div class="clear"></div>
             </div>
           </div>
-          <div class="option center" @click.stop="showCheckFile('fileParam')">修改</div>
+          <div class="option center" @click.stop="showCheckFile('fileParam')">添加</div>
           <div class="clear">
-            <input type="file" id="fileParam" class="displayNone" />
+            <input type="file" accept="image/*" id="fileParam" class="displayNone" />
           </div>
         </div>
         <div class="Oprat item">
           <div class="title">操作说明</div>
-          <div class="img">
+          <div class="imgs">
             <div class="Preview">
               <img onerror="this.style.display='none'" v-for="(item, index) in cEdit.fileOprat" class="img" :src="item.src" />
             </div>
           </div>
-          <div class="option center" @click.stop="showCheckFile('fileOprat')">修改</div>
+          <div class="option center" @click.stop="showCheckFile('fileOprat')">添加</div>
           <div class="clear">
-            <input type="file" id="fileOprat" class="displayNone" />
+            <input type="file" accept="image/*" id="fileOprat" class="displayNone" />
           </div>
         </div>
         <div class="Video item">
@@ -283,7 +291,8 @@ var cEdit = reactive({
   fileBoot: { name: '', type: '', size: '', src: '', file: null },
   fileParam: [],
   fileOprat: [],
-  Video: ''
+  Video: '',
+  fileIds:[]
 });
 //页码控件数据
 var pagin = reactive({
@@ -412,6 +421,7 @@ function ShowMultiEdit(type: MideaType) {
 function ShowSingleEdit(item) {
   Status.ShowEditPop = true;
   //期待接口返回以下4个字段
+  
   cEdit.deviceId = item.id;
   cEdit.deviceImei = item.deviceImei;
   cEdit.Video = item.Video;
@@ -437,7 +447,7 @@ function ShowSingleEdit(item) {
           return v.fileType == 1;
         })
         .map((v) => {
-          return { name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
+          return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
         });
 
       cEdit.fileParam = arr
@@ -445,8 +455,10 @@ function ShowSingleEdit(item) {
           return v.fileType == 2;
         })
         .map((v) => {
-          return { name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
+          return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
         });
+
+      cEdit.fileBoot.src = '';
     }
   });
 
@@ -459,6 +471,7 @@ function CloseSingleEdit() {
   cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
   cEdit.fileOprat = [];
   cEdit.fileParam = [];
+  cEdit.fileIds=[];
 }
 
 //关闭上传框
@@ -481,7 +494,6 @@ function SaveMultiData() {
   }
   Status.fullLoading = true;
   setTimeout(() => {
-    
     let promise = null;
 
     let formData = new FormData();
@@ -507,7 +519,7 @@ function SaveMultiData() {
     });
 
     if (Status.currMideaType == MideaType.Boot) {
-      promise=updaeLogo(arr,checkFile.file);
+      promise = updaeLogo(arr, checkFile.file);
     } else if (Status.currMideaType == MideaType.Video) {
       promise = api.addVideo(json); //操作视频
     } else {
@@ -529,7 +541,7 @@ function SaveMultiData() {
 }
 //上传开机画面
 function updaeLogo(ids, file) {
-  debugger;
+  
   if (!file || !ids) {
     return Promise.resolve({ code: 200, msg: '成功' });
   }
@@ -555,8 +567,7 @@ function SaveItemData() {
   var formData = new FormData();
   formData.append('deviceId', cEdit.deviceId);
   formData.append('deviceImei', cEdit.deviceImei);
-
+  formData.append("fileIds",cEdit.fileIds);
-  //  formData.append("logoFile",cEdit.fileBoot.file);//开机画面
 
   cEdit.fileParam.forEach((v) => {
     if (v.file) {
@@ -580,7 +591,7 @@ function SaveItemData() {
       if (res[0].status == 'fulfilled' && res[1].status == 'fulfilled') {
         if (res[0].value.code == 200 && res[1].value.code == 200) {
           CloseSingleEdit();
-          alert("操作成功");
+          alert('操作成功');
           return;
         }
       }
@@ -649,7 +660,6 @@ function dragImgAddEvt() {
     });
   }
   function handleDrop(e) {
-    
     const dt = e.dataTransfer;
     const files = dt.files;
 
@@ -662,7 +672,6 @@ function dragImgAddEvt() {
 }
 
 function addFileEvt() {
-  
   var checkImgOver = function (res, type) {
     if (type == 'fileBoot') {
       let keys = Object.keys(res);
@@ -677,16 +686,16 @@ function addFileEvt() {
     fileInputs.fileBoot = document.getElementById('fileBoot');
     fileInputs.fileOprat = document.getElementById('fileOprat');
     fileInputs.fileParam = document.getElementById('fileParam');
-  }
 
-  let keys = Object.keys(fileInputs);
+    let keys = Object.keys(fileInputs);
-  keys.forEach((k) => {
+    keys.forEach((k) => {
-    fileInputs[k].addEventListener('change', () => {
+      fileInputs[k].addEventListener('change', () => {
-      handleFiles(fileInputs[k].files).then((res) => {
+        handleFiles(fileInputs[k].files).then((res) => {
-        checkImgOver(res, k);
+          checkImgOver(res, k);
+        });
       });
     });
-  });
+  }
 }
 
 // 处理选择的文件
@@ -788,6 +797,20 @@ var hideConfirm = function () {
   Status.confirm = Cfg;
 };
 
+//删除某个图片
+function DelImg(item,index,type){
+  
+if(item.id){
+confirm('您确认删除吗?',()=>{
+  cEdit.fileIds.push(item.id);
+   cEdit[type].splice(index,1);
+
+});
+}else{
+  cEdit[type].splice(index,1);
+}
+}
+
 onMounted(() => {
   getDeviceType();
   getList();
@@ -914,7 +937,8 @@ onMounted(() => {
 
 .SingEditContent .item {
   width: 100%;
-  height: 90px;
+  min-height: 90px;
+  height: auto;
   border-bottom: 1px dashed #e7e7e7;
 
   padding: 12px 0px;
@@ -947,10 +971,11 @@ onMounted(() => {
   text-align: left;
 }
 
-.SingEditContent .item .img {
+.SingEditContent .item .imgs {
   width: calc(100% - 110px);
   float: left;
-  height: 100%;
+  min-height: 90px;
+  height: auto;
 }
 
 .SingEditContent .item .option {
@@ -1003,10 +1028,37 @@ onMounted(() => {
 }
 
 .SingEditContent .Preview .img {
-  height: 100%;
+  height: 90px;
   width: 160px;
   object-fit: contain;
   border-radius: 4px;
   border: 1px solid #d3d5d7;
 }
+
+.SingEditContent .item .imgContent {
+  height: 90px;
+  width: 160px;
+  float: left;
+  margin-right: 8px;
+  position: relative;
+}
+
+.SingEditContent .item .imgContent .opt {
+  position: absolute;
+  z-index: 1;
+  background-color: #00000091;
+  display: none;
+  top: 0px;
+  left: 0px;
+  height: 90px;
+  width: 160px;
+  cursor: pointer;
+  color: #bd2b2b;
+  font-size: 30px;
+ text-align: center;
+ line-height: 90px;
+}
+.SingEditContent .item .imgContent:hover .opt {
+  display: block !important;
+}
 </style>