Material 页面 新增添加功能

app/Http/Controllers/MaterialController.php

@@ -12,13 +12,20 @@ class MaterialController extends Controller
     // 耗材
     public function index(Request $request,MaterialFilters  $filter)
     {
-        $materials  = Material::query()->filter($filter)->paginate($request['paginate' ?? 50]);
+        $materials  = Material::query()->orderByDesc('id')->filter($filter)->paginate($request['paginate'] ?? 50);
         return view('maintenance/material/index',compact('materials'));
     }
 
-    public function storeApi(Request $request)
+    public function storeApi(Request $request):array
     {
-
+        $material = Material::query()->where('code',$request['code'])->first();
+        if($material)return ['success' => false,'message'=>'code对应的耗材已存在'];
+        try {
+            $material = Material::query()->create($request->all(['code', 'name']));
+            return ['success'=>true,'data'=>$material];
+        } catch (\Exception $e) {
+            return ['success' => false,'message' => $e->getMessage()];
+        }
     }
 
     public function updateApi(Request $request):array

resources/views/maintenance/material/_create.blade.php

@@ -0,0 +1,28 @@
+<div class="modal fade " id="addModal" tabindex="1" aria-labelledby="title" >
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="add-title">添加耗材类型</h5>
+                <button type="button" class="close"  data-dismiss="modal">
+                    <span>&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <div class="form-group">
+                        <label for="material-code">编号</label>
+                        <input type="text" id="material-code" class="form-control" v-model="addMaterial.code">
+                    </div>
+                    <div class="form-group">
+                        <label for="material-name">名称</label>
+                        <input type="text" id="material-name" class="form-control" v-model="addMaterial.name">
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary"  data-dismiss="modal">关闭</button>
+                <button type="button" class="btn btn-primary" @click="create">提交</button>
+            </div>
+        </div>
+    </div>
+</div>

resources/views/maintenance/material/_edit.blade.php

@@ -3,25 +3,24 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="edit-title" >修改耗材类型</h5>
-                <button type="button" class="close"  data-dismiss="modal" @click="material={}">
+                <button type="button" class="close"  data-dismiss="modal" @click="editMaterial={}">
                     <span>&times;</span>
                 </button>
-
             </div>
             <div class="modal-body">
                 <form>
                     <div class="form-group">
                         <label for="material-code">编号</label>
-                        <input type="text" id="material-code" class="form-control" v-model="material.code">
+                        <input type="text" id="material-code" class="form-control" v-model="editMaterial.code">
                     </div>
                     <div class="form-group">
                         <label for="material-name">名称</label>
-                        <input type="text" id="material-name" class="form-control" v-model="material.name">
+                        <input type="text" id="material-name" class="form-control" v-model="editMaterial.name">
                     </div>
                 </form>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary"  data-dismiss="modal" @click="material={}">关闭</button>
+                <button type="button" class="btn btn-secondary"  data-dismiss="modal" @click="editMaterial={}">关闭</button>
                 <button type="button" class="btn btn-primary" @click="update">提交</button>
             </div>
         </div>

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

@@ -1,12 +1,12 @@
-<table class="table table-striped table-sm" id="list">
+<table class="table table-striped table-hover" id="list">
     <tr class="text-center">
-        <th>Id</th>
+        <th>序号</th>
         <th>编号</th>
         <th>名称</th>
         <th>操作</th>
     </tr>
     <tr class="text-center" v-for="(material,i) in materials">
-        <td>@{{ material.id }}</td>
+        <td>@{{ i+1 }}</td>
         <td>@{{ material.code }}</td>
         <td>@{{ material.name }}</td>
         <td>
@@ -15,3 +15,4 @@
         </td>
     </tr>
 </table>
+{{ $materials->links() }}

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

@@ -6,16 +6,18 @@
         @component('maintenance.menu')@endcomponent
     </span>
     <div class="container-fluid" id="material_div">
+        @include('maintenance.material._edit')
+        @include('maintenance.material._create')
         <div class="card">
-            <div class="card_header">
-            </div>
             <div class="card_body">
-                @component('maintenance.material._table')@endcomponent
+                <div class="row pull-left m-1">
+                    <button class="btn btn-outline-info mb-1 mr-3" @click="store"><span class="fa fa-plus"></span>&nbsp;新&nbsp;&nbsp;增</button>
+                </div>
+                @include('maintenance.material._table')
             </div>
         </div>
-       @component('maintenance.material._edit')@endcomponent
-    </div>
 
+    </div>
 @endsection
 @section('lastScript')
 <script>
@@ -23,8 +25,9 @@
         el:'#material_div',
         data:{
             materials:{!! $materials->toJson() !!}['data'],
-            material:{},
+            editMaterial:{},
             index:'',
+            addMaterial:{},
         },
         methods:{
             destroy(id,index){
@@ -43,10 +46,14 @@
                 });
             },
             edit(material,i){
-                this.material = material;
+                this.editMaterial = material;
                 this.index = i;
                 $('#editModal').modal('show');
             },
+            store(){
+                this.addMaterial = {};
+                $('#addModal').modal('show');
+            },
             update(index){
                 axios.post('{{url('apiLocal/material/update')}}',this.material)
                     .then(res=>{
@@ -64,6 +71,24 @@
                     tempTip.setDuration(3000);
                     tempTip.show(err);
                 });
+            },
+            create(){
+                axios.post('{{url('apiLocal/material/store')}}',this.addMaterial)
+                    .then(res=>{
+                        if(res.data.success){
+                            $('#addModal').modal('hide');
+                            this.addMaterial={};
+                            tempTip.setDuration(3000);
+                            tempTip.showSuccess('添加成功');
+                            this.$set(this.materials,this.materials.length,res.data.data);
+                            return;
+                        }
+                        tempTip.setDuration(3000);
+                        tempTip.show(res.data.message);
+                    }).catch(err=>{
+                        tempTip.setDuration(3000);
+                        tempTip.show(err);
+                });
             }
         }
     });

resources/views/maintenance/menu.blade.php

@@ -103,7 +103,7 @@
                     <a class="nav-link text-muted" href="{{url('maintenance/log')}}" :class="{active:isActive('log',2)}">日志</a>
                 </li> @endcan
                 <li class="nav-item">
-                    <a class="nav-link text-muted" href="{{url('maintenance/material')}}" :class="{active:isActive('log',2)}">耗材类型</a>
+                    <a class="nav-link text-muted" href="{{url('maintenance/material')}}" :class="{active:isActive('material',2)}">耗材类型</a>
                 </li>
         </ul>
     </div>

routes/apiLocal.php

@@ -111,7 +111,7 @@ Route::group(['prefix'=>'control'],function () {
 
 /** 耗材 */
 Route::group(['prefix' => 'material'],function(){
-    Route::get('store','MaterialController@storeApi');
+    Route::post('store','MaterialController@storeApi');
     Route::post('update','MaterialController@updateApi');
     Route::delete('destroy/{id}','MaterialController@destroyApi');
 });