前端文件上传

处理过程添加伤处
问题操作
需求描述修改

resources/views/maintenance/demand/_table.blade.php

@@ -20,8 +20,6 @@
                 <td>时间</td>
             </table>
         </td>
-{{--        <th>经手人</th>--}}
-{{--        <th>时间</th>--}}
     </tr>
     </thead>
     <tbody>
@@ -33,29 +31,29 @@
             <td class="">
                 <textarea class="form-control" rows="2" cols="15" :value="demand.description" @change="updateDemand(demand,'description',$event)"></textarea>
             </td>
-            <td class="text-left" @mouseenter="alert(demand.showAddDiv) " @mouseleave="demand.showAddDiv = false">
-                <button class="btn btn-primary position-absolute" v-if="demand['showAddDiv']" style="margin-top: -40px;" @click="toggleAddDiv('addDiv_'+i)">新</button>
+            <td class="text-left p-0" @mouseenter="showAddBtn(demand)" @mouseleave="showAddBtn(demand)" >
+                <button class="btn btn-primary position-absolute d-none" :id="'addBtn_'+demand['id']"  style="margin-top: -40px;" @click="toggleAddDiv(demand,demand['id'])">新</button>
                 <div>
-                    <div :id="'addDiv_'+i" class="form-inline float-right">
-                        <label for="">
-                            <input type="text" class="form-control col-10" @keydown.enter="addProcees(demand,$event)">
-                            <button class="btn btn-sm btn-primary ml-1">添加</button>
-                        </label>
+                    <div :id="'addDiv_'+demand['id']" class="form-inline float-right d-none">
+                        <input type="text" class="form-control" :id="'addProcess'+demand['id']"  style="width: 300px">
+                        <button class="btn btn-sm btn-primary ml-1" @click="addProcess(demand)">添加</button>
                     </div>
+                    <div>
                     <template v-if="demand['processes'].length > 0 ">
-                        <table>
+                        <table class="table p-0 m-0 table-striped">
                             <template v-for="(process,process_i) in demand['processes']">
-                                <tr  class="text-center" @mouseenter="process['status'] = true" @mouseleave="process['status'] = false">
+                                <tr  class="text-center" @mouseenter="toggleDelBtn(demand['id'],process)" @mouseleave="toggleDelBtn(demand['id'],process)" >
                                     <td>@{{ process.explain }}</td>
-                                    <td>@{{ process.processor ? process.processor.name : '' }}</td>
+                                    <td>@{{ process.user ? process.user.name : '' }}</td>
                                     <td>@{{ process.created_at }}</td>
-                                    <td>
-                                        <button type="button" v-show="process['status']" @click="deleteProccess(demand,process_i)" class="btn btn-sm btn-outline-danger">删</button>
+                                    <td class="p-0 m-0" style="width: 35px;max-width: 35px">
+                                        <button :id="'demand-'+demand['id']+'process-'+process['id']" type="button" @click="deleteProcess(demand,process,process_i,i)" class="btn btn-sm btn-outline-danger d-none m-0" >删</button>
                                     </td>
                                 </tr>
                             </template>
                         </table>
                     </template>
+                    </div>
                 </div>
             </td>
             <td>

resources/views/maintenance/demand/index.blade.php

@@ -34,7 +34,7 @@
                 uploadError: null,
                 selectDemand: null,
                 selectIndex: null,
-                imgs: '',
+                imgs: [],
             },
             created() {
                 let that = this;
@@ -66,13 +66,13 @@
                 initDemand(demand) {
                     demand['status'] = this.status[demand['status']]['value'] ?? '';
                     demand['type'] = this.types[demand['type']]['value'] ?? '';
-                    demand.showAddDiv= false;
+                    demand['showAddDiv']= false;
+                    demand['showAddBtn']= false;
                     if (demand['upload_file']) this.setImgUrl(demand['upload_file']);
-                    if(demand['processes']){
+                    if (demand['processes']){
                         demand['processes'].forEach(function(item,index,self){
                             self[index]['status'] = false;
                         });
-
                     }
                 },
                 setImgUrl(uploadFile) {
@@ -81,7 +81,7 @@
                     let type = uploadFile.type;
                     uploadFile['url'] = url + urlPath + '-thumbnail.' + type;
                     uploadFile['bulkyUrl'] = url + urlPath + '-bulky.' + type;
-                    uploadFile['commonUrl'] = url + urlPath + '-thumbnail.' + type;
+                    uploadFile['commonUrl'] = url + urlPath + '-common.' + type;
                 },
                 /** 完结需求 */
                 finishDemand(demand) {
@@ -119,23 +119,31 @@
                     });
                 },
                 /** 添加处理过程 */
-                addProcess(demand, $e) {
-                    let url = '{{url('apiLocal/demand/process/store')}}';
-                    let data = {'demand_id': demand['id'], 'explain': $($e.target).val()};
-
+                addProcess(demand) {
                     window.tempTip.setDuration(3000);
+                    let url = '{{url('apiLocal/demand/process/store')}}';
+                    let process = $('#addProcess'+demand['id']).val();
+                    let data = {'demand_id': demand['id'], 'explain': process};
+                    if(process === null || process.length === 0){
+                        window.tempTip.show('输入内容');
+                        $('#addProcess'+demand['id']).focus();
+                        return;
+                    }
                     window.axios.post(url, data).then(res => {
                         if (res.data.success) {
-                            demand['processes'].unshfit(res.data.data);
+                            if(!demand['processes'])demand['processes']= [res.data.data];
+                            else demand['processes'].unshift(res.data.data);
                             this.$forceUpdate();
-
-                            window.tempTip.showSuccess('添加处理过程成功')
+                            window.tempTip.showSuccess('添加处理过程成功');
+                            $('#addProcess'+demand['id']).val();
                             return;
                         }
+                        $('#addProcess'+demand['id']).focus();
                         window.tempTip.show('添加处理过程失败')
                     }).catch(err => {
+                        $('#addProcess'+demand['id']).focus();
                         window.tempTip.show('添加处理过程异常:' + err);
-                    })
+                    });
 
                 },
                 /** 文件上传 */
@@ -148,16 +156,25 @@
                     let file = fileInput.files[0];
                     formData.append('file', file);
 
-                    window.tempTip.setDuration(3000);
-                    window.tempTip.setIndex(1999);
+                    tempTip.setDuration(9999)
+                    tempTip.setIndex(1051)
+                    tempTip.waitingTip('上传中......')
+                    let that = this;
                     window.axios.post(url, formData, {
                         'Content-Type': 'multipart/form-data'
                     }).then(res => {
+                        tempTip.cancelWaitingTip()
+                        tempTip.setDuration(2000)
                         if (res.data.success) {
                             this.initDemand(res.data.data);
                             this.$set(this.demands, this.selectIndex, res.data.data);
                             $('#uploadFile').modal('hide');
+                            setTimeout(function(){
+                                 that.imgs.push(document.getElementById('img_'+res.data.data['id']));
+                                that.lazy();
+                            },1);
                             window.tempTip.showSuccess('文件上传成功');
+                            this.$forceUpdate();
                             return;
                         }
                         window.tempTip.show('文件上传失败');
@@ -208,7 +225,6 @@
                     this.selectIndex = index;
                     $('#uploadFile').modal('show');
                 },
-
                 lazy() {
                     //可视区域高度
                     let height = window.innerHeight;
@@ -266,8 +282,51 @@
                         window.tempTip.show(err);
                     });
                 },
-                toggleAddDiv(id){
+                toggleAddDiv(demand,id){
+                    let div = $('#addDiv_'+id);
+                    if(demand['showAddDiv']){
+                        div.addClass('d-none');
+                    }else{
+                        div.removeClass('d-none');
+                    }
+                    demand['showAddDiv'] = !demand['showAddDiv'];
+                },
+                toggleDelBtn(demandId,process){
+                    let btn = $('#demand-'+demandId+'process-'+process['id']);
+                    if(process['status']){
+                        btn.addClass('d-none');
+                    }else{
+                        btn.removeClass('d-none');
+                    }
+                    process['status'] = !process['status'];
+                },
+                showAddBtn(demand){
+                    if(demand['showAddBtn']){
+                        $("#addBtn_"+demand.id).addClass('d-none');
+                    }else{
+                        $("#addBtn_"+demand.id).removeClass('d-none');
+                    }
+                    demand['showAddBtn'] = !demand['showAddBtn'];
+                },
+                deleteProcess(demand,process,process_i,index){
+                    if (!confirm('确定要删除当前描述吗？')) {
+                        return;
+                    }
 
+                    let url = '{{url('apiLocal/demand/process/destroy/?id=')}}'+ process['id'];
+                    window.tempTip.setDuration(3000);
+                    window.axios.delete(url).then(res=>{
+                        if(res.data.success){
+                            this.$delete(this.demands[index]['processes'],process_i);
+                            demand.processes.slice(process_i,0);
+                            window.tempTip.showSuccess('描述删除成功！');
+                            this.$forceUpdate();
+                            return;
+                        }
+                        window.tempTip.show('描述删除失败！'+res.data.data ? res.data.data : '' );
+                    }).catch(err=>{
+                        window.tempTip.show(err);
+                    });
                 }
             }
         });