增加客服提交表单弹窗

static/html/setting_bottom.html

@@ -38,6 +38,10 @@
                 ],
             },
             kefuList:[],
+            kefuDialog:false,
+            kefuForm:{
+
+            },
         },
         methods: {
             //提交表单
@@ -153,6 +157,10 @@
 
                     }
                 });
+            },
+            //添加客服的dialog
+            addKefu(){
+                this.kefuDialog=true;
             }
         },
         created: function () {

static/html/setting_kefu_list.html

@@ -7,6 +7,7 @@
             </el-aside>
 
             <el-main class="mainMain">
+                <el-button style="margin-bottom: 10px;" @click="addKefu" type="primary" size="small">添加客服</el-button>
                 <el-table
                         :data="kefuList"
                         border
@@ -30,13 +31,35 @@
                             prop="id"
                             label="操作">
                         <template slot-scope="scope">
-                            <el-button @click="deleteMonitor(scope.row.id)" type="text" size="small">删除</el-button>
+                            <el-button @click="deleteMonitor(scope.row.id)" type="primary" size="small" plain>编辑</el-button>
+                            <el-button @click="deleteMonitor(scope.row.id)" type="danger" size="small" plain>删除</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
             </el-main>
 
         </el-container>
+        <el-dialog
+                title="客服"
+                :visible.sync="kefuDialog"
+                width="30%"
+                >
+            <el-form ref="kefuForm" :model="kefuForm" label-width="70px">
+                <el-form-item label="用户名">
+                    <el-input v-model="kefuForm.name"></el-input>
+                </el-form-item>
+                <el-form-item label="密码">
+                    <el-input v-model="kefuForm.name"></el-input>
+                </el-form-item>
+                <el-form-item label="头像">
+                    <el-input v-model="kefuForm.name"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="kefuDialog = false">取 消</el-button>
+                <el-button type="primary" @click="kefuDialog = false">确 定</el-button>
+              </span>
+        </el-dialog>
     </template>
 
 </div>