Browse Source

增加择岗界面

sandm 2 years ago
parent
commit
9ac72a2f84
1 changed files with 62 additions and 0 deletions
  1. 62 0
      public/themes/default/views/app/recruit/post_select.blade.php

+ 62 - 0
public/themes/default/views/app/recruit/post_select.blade.php

@@ -0,0 +1,62 @@
+@extends('module.layouts.content')
+
+@push('meta')
+
+@endpush
+
+@push('css')
+    <style >
+        .container {
+            width: 1000px;
+            margin: 20px auto;
+        }
+    </style>
+@endpush
+
+@push('js')
+    <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
+    <link href="{{theme_asset('app/css/recruit/recruit.css')}}" rel="stylesheet" type="text/css"/>
+
+
+@endpush
+
+@section('content')
+    <div id="app">
+        <div class="container">
+            <h2>晋江市公开招聘第十三批村务(社区)专职工作者</h2>
+            <draggable  :list="list" :disabled="!enabled" class="list-group" ghost-class="ghost"
+                        :move="checkMove" @start="dragging = true" @end="dragging = false">
+                <div class="list-group-item" v-for="element in list" :key="element.name" v-text="element.name">
+
+                </div>
+            </draggable>
+        </div>
+    </div>
+
+@endsection
+
+@section('script')
+    <script src="{{theme_asset('app/js/vue.min.js')}}"></script>
+    <script src="{{theme_asset('app/js/axios.js')}}"></script>
+    <script src="{{theme_asset('app/js/Sortable.min.js')}}"></script>
+    <script src="{{theme_asset('app/js/vuedraggable.umd.min.js')}}"></script>
+    <script>
+        const app = new Vue({
+            el: '#app',
+            data: {
+                enabled: true,
+                list: [
+                    { name: "1 - John", id: 0 },
+                    { name: "2 - Joao", id: 1 },
+                    { name: "3 - Jean", id: 2 }
+                ],
+                dragging: false
+            },
+            methods: {
+                checkMove: function(e) {
+                    window.console.log("Future index: " + e.draggedContext.futureIndex);
+                }
+            }
+        })
+    </script>
+@endsection