【无标题】

<template>
    <div>
        <h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
        
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="formInline.lkmName" placeholder="名称 " clearable=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getlist()" icon="el-icon-search" >查询</el-button>
             <el-button type="primary" @click="handleAdd()" icon="el-icon-circle-plus-outline" >新增</el-button>
          </el-form-item>
        </el-form>
         <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
            prop="id"
              label="编号"
              width="180">
            </el-table-column>
            <el-table-column
            prop="lkmName"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
            prop="lkmSex"
              label="性别"
              width="180">
            </el-table-column>
            <el-table-column
            prop="lkmTel"
              label="电话"
              width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        <el-dialog :title="title" :visible.sync="dialogFormVisible":close-on-click-modal="false">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="lkmName">
              <el-input v-model="form.lkmName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="lkmSex">
              <el-select v-model="form.lkmSex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth" prop="lkmTel">
              <el-input v-model="form.lkmTel" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary"  @click="submitForm('form')">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data:function(){
            return {
                ts:new Date().getTime(),
                formInline: {
                    lkmName: '',
                },
    
                tableData: [],
                    dialogFormVisible: false,
                    form: {
                      lkmName: '',
                      lkmSex:'',
                      lkmTel:''
                    },
                    formLabelWidth: '120px',
                    title:'',
                    rules: {
                      lkmName: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                      ],
                      lkmSex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                      ],
                      lkmTel: [
                        { required: true, message: '请填写电话', trigger: 'blur' }
                      ]
                    }
              }
        },
        methods: {
              onSubmit() {
                console.log('submit!');
              },
               handleEdit(index, row) {
              console.log(index, row);
                },
                handleDelete(id) {
              console.log('xos'+id);
             
                if(confirm("你确定要删除吗")){
                    
                    this.axios.post("http://localhost:8080/spboot/lkm/del?id="+id).then(i=>{
                        if(i.data>0){
                            alert("删除成功");
                            this.getlist();
                        }
                        else{
                             alert("删除失败");
                             this.getlist();
                        }
                    });
                    
                }
                  
            },
            getlist(){
                let url=this.axios.urls.lkm_list;
                let data=this.formInline;
                this.axios.post(url,data).then(resp=>{
                    this.tableData=resp.data;
                });
            },
            handleAdd(){
                this.title="添加";
                this.dialogFormVisible=true;
            },
             submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                      if (valid) {
                          if(this.title=="添加"){
                              // alert('添加成功');
                              let url = this.axios.urls.lkm_add;
                              let data = this.form;
                              console.log(data);
                              this.axios.post(url,data).then(i=>{
                                    if(i.data>0){
                                        alert("添加成功");
                                        this.getlist();
                                    }
                                    else{
                                         alert("添加失败");
                                    }
                              });
                          }
                          else{
                            
                          }
                       this.dialogFormVisible=false;
                      } else {
                        console.log('error submit!!');
                        return false;
                      }
                    });
                }
        },
            
        created() {
            this.getlist();
        }
  }
</script>

<style>
</style>