'增加表格编辑和删除操作'

lin-xin · lin-xin · commit 05c0ab1db24f · 2018-04-18T08:58:54.000+08:00
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>vue-manage-system | 基于Vue 的后台管理系统</title>
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
-    <meta name="keywords" content="vue.js, wms, vue2, 后台模板, 管理系统, element" />
+    <meta name="keywords" content="vue, vue-manage-system, manage-system, 后台, 管理系统, element" />
     <meta name="description" content="基于Vue2 + Element UI 的后台管理系统解决方案" />
 </head>
 <body>
diff --git a/src/components/page/BaseTable.vue b/src/components/page/BaseTable.vue
@@ -26,21 +26,45 @@
                 </el-table-column>
                 <el-table-column label="操作" width="180">
                     <template slot-scope="scope">
-                        <el-button size="small"
-                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-                        <el-button size="small" type="danger"
-                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
             <div class="pagination">
-                <el-pagination
-                        @current-change ="handleCurrentChange"
-                        layout="prev, pager, next"
-                        :total="1000">
+                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
                 </el-pagination>
             </div>
         </div>
+
+        <!-- 编辑弹出框 -->
+        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
+            <el-form ref="form" :model="form" label-width="50px">
+                <el-form-item label="日期">
+                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
+                </el-form-item>
+                <el-form-item label="姓名">
+                    <el-input v-model="form.name"></el-input>
+                </el-form-item>
+                <el-form-item label="地址">
+                    <el-input v-model="form.address"></el-input>
+                </el-form-item>
+
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="editVisible = false">取 消</el-button>
+                <el-button type="primary" @click="saveEdit">确 定</el-button>
+            </span>
+        </el-dialog>
+
+        <!-- 删除提示框 -->
+        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
+            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="delVisible = false">取 消</el-button>
+                <el-button type="primary" @click="deleteRow">确 定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 
@@ -55,27 +79,35 @@
                 select_cate: '',
                 select_word: '',
                 del_list: [],
-                is_search: false
+                is_search: false,
+                editVisible: false,
+                delVisible: false,
+                form: {
+                    name: '',
+                    date: '',
+                    address: ''
+                },
+                idx: -1
             }
         },
-        created(){
+        created() {
             this.getData();
         },
         computed: {
-            data(){
+            data() {
                 return this.tableData.filter((d) => {
                     let is_del = false;
                     for (let i = 0; i < this.del_list.length; i++) {
-                        if(d.name === this.del_list[i].name){
+                        if (d.name === this.del_list[i].name) {
                             is_del = true;
                             break;
                         }
                     }
-                    if(!is_del){
-                        if(d.address.indexOf(this.select_cate) > -1 && 
+                    if (!is_del) {
+                        if (d.address.indexOf(this.select_cate) > -1 &&
                             (d.name.indexOf(this.select_word) > -1 ||
-                            d.address.indexOf(this.select_word) > -1)
-                        ){
+                                d.address.indexOf(this.select_word) > -1)
+                        ) {
                             return d;
                         }
                     }
@@ -84,21 +116,23 @@
         },
         methods: {
             // 分页导航
-            handleCurrentChange(val){
+            handleCurrentChange(val) {
                 this.cur_page = val;
                 this.getData();
             },
             // 获取 easy-mock 的模拟数据
-            getData(){
+            getData() {
                 // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
-                if(process.env.NODE_ENV === 'development'){
+                if (process.env.NODE_ENV === 'development') {
                     this.url = '/ms/table/list';
                 };
-                this.$axios.post(this.url, {page:this.cur_page}).then((res) => {
+                this.$axios.post(this.url, {
+                    page: this.cur_page
+                }).then((res) => {
                     this.tableData = res.data.list;
                 })
             },
-            search(){
+            search() {
                 this.is_search = true;
             },
             formatter(row, column) {
@@ -108,37 +142,64 @@
                 return row.tag === value;
             },
             handleEdit(index, row) {
-                this.$message('编辑第'+(index+1)+'行');
+                this.idx = index;
+                const item = this.tableData[index];
+                this.form = {
+                    name: item.name,
+                    date: item.date,
+                    address: item.address
+                }
+                this.editVisible = true;
             },
             handleDelete(index, row) {
-                this.$message.error('删除第'+(index+1)+'行');
+                this.idx = index;
+                this.delVisible = true;
             },
-            delAll(){
+            delAll() {
                 const length = this.multipleSelection.length;
                 let str = '';
                 this.del_list = this.del_list.concat(this.multipleSelection);
                 for (let i = 0; i < length; i++) {
                     str += this.multipleSelection[i].name + ' ';
                 }
-                this.$message.error('删除了'+str);
+                this.$message.error('删除了' + str);
                 this.multipleSelection = [];
             },
             handleSelectionChange(val) {
                 this.multipleSelection = val;
+            },
+            // 保存编辑
+            saveEdit() {
+                this.$set(this.tableData, this.idx, this.form);
+                this.editVisible = false;
+                this.$message.success(`修改第 ${this.idx+1} 行成功`);
+            },
+            // 确定删除
+            deleteRow(){
+                this.tableData.splice(this.idx, 1);
+                this.$message.success('删除成功');
+                this.delVisible = false;
             }
         }
     }
+
 </script>
 
 <style scoped>
-.handle-box{
-    margin-bottom: 20px;
-}
-.handle-select{
-    width: 120px;
-}
-.handle-input{
-    width: 300px;
-    display: inline-block;
-}
-</style>
+    .handle-box {
+        margin-bottom: 20px;
+    }
+
+    .handle-select {
+        width: 120px;
+    }
+
+    .handle-input {
+        width: 300px;
+        display: inline-block;
+    }
+    .del-dialog-cnt{
+        font-size: 16px;
+        text-align: center
+    }
+</style>
