前端

<template>
  <div>
    <h1 align="center">SSM阶段机试</h1>
    <!-- 搜索框-->
    <el-form :inline="true">
      <el-form-item label="审批人">
        <el-input v-model="hname"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="primary" @click="open">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="hid" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="hname" label="名称" width="180">
      </el-table-column>
      <el-table-column prop="hprice" label="收入">
      </el-table-column>
      <el-table-column prop="haddress" label="地址">
      </el-table-column>
    </el-table>
    <!-- 弹出框-->
    <el-dialog title="家庭新增" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item prop="hname" label="家庭名字" :label-width="formLabelWidth">
          <el-input v-model="form.hname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="hprice" label="家庭收入" :label-width="formLabelWidth">
          <el-input v-model="form.hprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="haddress" label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="form.haddress" 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="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        hname: '',
        tableData: [],
        dialogFormVisible: false,
        form: {
          hname: '',
          hprice: '',
          haddress: ''
        },
        rules: {
          hname: [{
            required: true,
            message: '请输入家庭名称',
            trigger: 'blur'
          }, ],
          hprice: [{
            required: true,
            message: '请输入家庭收入',
            trigger: 'blur'
          }, ],
          haddress: [{
            required: true,
            message: '请输入家庭住址',
            trigger: 'blur'
          }, ],
        }

      };
    },
    methods: {
      //新增家庭
      add: function() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            //请求路径
            let url = this.axios.urls.ADD;
            //发起请求
            this.axios.post(url, this.form).then(resp => {
              let data = resp.data;
              if(data.success){
                this.dialogFormVisible=false;
                this.query();
              }
            }).catch(err => {
              console.log(err);
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //打开弹出框
      open: function() {
        this.form = {
          hname: '',
          hprice: '',
          haddress: ''
        }
        this.dialogFormVisible = true;
      },
      //查询
      query: function() {
        //请求参数
        let params = {
          hname: this.hname
        };
        //请求路径
        let url = this.axios.urls.QUERY;
        //发起请求
        this.axios.post(url, params).then(resp => {
          let data = resp.data;
          this.tableData = data.data;
        }).catch(err => {
          console.log(err);
        })

      }

    }
  }
</script>