员工信息UI

src/StaffManagement/Views/Person/Index.cshtml

@@ -1,10 +1,9 @@
 <div id="vuefrom">
     <fieldset>
         <legend>员工查询</legend>
-        <form fajax="#list">
         <label>姓名<input type="text" id="name" v-model="filter.Name" /></label>
         <button type="button" v-on:click="search">查询</button>
-        </form>
+        <button v-on:click="showNew">新增</button>
     </fieldset>
     <div id="list" v-if="list.length > 0">
         <table class="table">
@@ -19,10 +18,11 @@
                     <td>电话</td>
                     <td>婚史</td>
                     <td>教育</td>
+                    <td>操作</td>
                 </tr>
             </thead>
             <tbody>
-                <tr v-for="i in list">
+                <tr v-for="(i,t) in list">
                     <td>{{i.Id}}</td>
                     <td>{{i.Name}}</td>
                     <td>{{i.CardNo}}</td>
@@ -32,10 +32,38 @@
                     <td>{{i.PhoneNo}}</td>
                     <td>{{i.Marriage | cgMarriage}}</td>
                     <td>{{i.Education | cgEducation}}</td>
+                    <td>
+                        <button v-on:click="edit(t)">修改</button>
+                        <button v-on:click="del(t)">删除</button>
+                    </td>
                 </tr>
             </tbody>
         </table>
     </div>
+    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">
+                        员工信息
+                    </h4>
+                </div>
+                <div class="modal-body">
+                    <label>姓名<input v-model="newP.Name" /></label>
+                    <label>身份证<input v-model="newP.CardNo" /></label>
+                    <label>性别<input v-model="newP.Gender" /></label>
+                    <label>生日<input v-model="newP.Birthday" /></label>
+                    <label>电话<input v-model="newP.PhoneNo" /></label>
+                    <label>婚姻<input v-model="newP.Marriage" /></label>
+                    <label>教育<input v-model="newP.Education" /></label>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="submit" class="btn btn-primary" v-on:click="addNew">提交更改</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script type="text/javascript">
@@ -45,9 +73,10 @@
             filter: {
                 Name: "",
             },
-            list: {
-
-            }
+            list: [],
+            newP: {
+            },
+            dlgId: -1
         },
         created() {
         },
@@ -56,6 +85,28 @@
                 $.getJSON("/api/Person/GetPeople", vm.filter, function (d) {
                     vm.list = d;
                 });
+            },
+            addNew() {
+                if (vm.dlgId >= 0) {
+                    vm.list.splice(vm.dlgId, 1, vm.newP);
+                } else {
+                    vm.list.push(vm.newP);
+                }
+                vm.newP = {};
+                $('#myModal').modal('hide');
+            },
+            showNew() {
+                vm.newP = {};
+                vm.dlgId = -1;
+                $('#myModal').modal({ backdrop: 'static', show: true });
+            },
+            edit(i) {
+                vm.newP = JSON.parse(JSON.stringify(vm.list[i]));
+                vm.dlgId = i;
+                $('#myModal').modal({ backdrop: 'static', show: true });
+            },
+            del(i) {
+                vm.list.splice(i, 1);
             }
         },
         computed: {