普歌-码上鸿鹄团队-Vue项目增删改查功能整理

增加功能

v-model绑定的数据为input.xxx

<!--提示框-->
<el-button class="btnAdd" type="primary" @click="dialogVisible = true">新增自提点</el-button>
<el-dialog title="新增自提点：" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">
 <el-form  label-width="90px" :label-position="labelPosition">
     <el-form-item label="自提点名称">
         <el-input v-model="input.name"></el-input>
     </el-form-item>
     <el-form-item label="自提点地址">
        <el-input v-model="input.address"></el-input>
     </el-form-item>
     <el-form-item label="自提点电话">
        <el-input v-model="input.phone"></el-input>
     </el-form-item>
   </el-form>
   <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="dialogVisible = false;branchAdd()">确 定</el-button>
    </span>
</el-dialog>

 export default {
    data () {
      return {
        input:{
          id:'',
          name:'',
          address:'',
          phone:''
        }
      }
    },
     methods: {
      //新增自提点
      branchAdd(){
        this.$api.branch.add(data => {    //这里为点击按钮调用的接口
          window.location.reload();    //调用成功刷新页面更新数据
        },{
          name:this.input.name,    //传递绑定的参数，注意this指向
          address:this.input.address,
          phone:this.input.phone,
        });
      },
    }
}

删除功能

<el-table :data="trData"  v-loading="loading" stripe style="width: 100%">
  <el-table-column prop="id" label="自提点编号" width="100"></el-table-column>
  <el-table-column prop="name" label="自提点名称" ></el-table-column>
  <el-table-column prop="address" label="自提点地址" ></el-table-column>
  <el-table-column prop="phone" label="自提点电话" ></el-table-column>
  <el-table-column label="创建时间" >
    <template slot-scope="props">
       {{props.row.createTime | moment('YYYY-MM-DD')}}
    </template>
  </el-table-column>
  <el-table-column label="最后修改时间">
     <template slot-scope="props">
       {{props.row.updateTime | moment('YYYY-MM-DD')}}
     </template>
   </el-table-column>
   <el-table-column label="操作">
      <template slot-scope="props">
        <el-button type="primary" @click="changeBranch = true;selectid(props.row.id)" size="mini">修改</el-button>
        <el-button @click="remove(props.row.id)" title="删除" type="danger" size="mini" :disabled="props.row.type == -1">删除</el-button>
       </template>
    </el-table-column>
</el-table>

methods: {
      //删除
      remove(id){    //括号内要接收上面props.row.id传来的id值
        this.$api.branch.remove(data => {
          window.location.reload();
        },{
          id:id,    //传递对应id给后端，
        });
      },
    }
}

更改功能

<el-table-column label="操作">
    <template slot-scope="props">
       <el-button type="primary" @click="changeBranch = true;selectid(props.row.id)" size="mini">修改</el-button>
       <el-button @click="remove(props.row.id)" title="删除" type="danger" size="mini" :disabled="props.row.type == -1">删除</el-button>
    </template>
</el-table-column>
 
<el-dialog title="修改自提点信息：" :visible.sync="changeBranch" width="35%" :before-close="handleClose">
  <el-form  label-width="90px" :label-position="labelPosition">
    <el-form-item label="自提点编号">
      <el-input v-model="form.id" class="inputId" disabled></el-input>
    </el-form-item>
    <el-form-item label="自提点名称">
      <el-input v-model="form.name" class="inputName" ></el-input>
    </el-form-item>
    <el-form-item label="自提点地址" class="inputAddress">
      <el-input v-model="form.address"></el-input>
    </el-form-item>
    <el-form-item label="自提点电话" class="inputPhone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="changeBranch = false">取 消</el-button>
    <el-button type="primary" @click="changeBranch = false;branchchange()">确 定</el-button>
  </span>
</el-dialog>

data () {
      return {
        input:{
          id:'',
          name:'',
          address:'',
          phone:''
        },
        form:{    //修改页面input里的数据，在这里存储一下
          id:'',
          name:'',
          address:'',
          phone:''
        },
      }
    },
methods: {
      //修改
      //获取id
      selectid(id){    //形参接收id
        this.$api.branch.selectid(data => {
          this.form.id = data.id            //因为需求
          this.form.name = data.name        //要根据id获取当前行的数据，并且渲染到提示框的input中
          this.form.address = data.address  //这里同样是通过双向数据绑定，进行传递数据
          this.form.phone = data.phone
          //window.location.reload();
        },{
          id:id       //传递对应行的id
        });
      },
}

查询功能

<el-row  :gutter="20" style="margin: 15px 0 0 15px;">
  <el-col :span="3">
    <el-input v-model="search.orderId" placeholder="订单编号" offset="3"></el-input>
  </el-col>
  <el-col :span="3">
    <el-input v-model="search.userId" placeholder="用户编号"></el-input>
  </el-col>
  <el-col :span="3">
    <el-input v-model="search.userName" placeholder="用户名称"></el-input>
  </el-col>
  <el-col :span="3">
    <div class="block">
      <el-date-picker v-model="search.createTime" type="date" placeholder="创建时间"  format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
    </div>
  </el-col>
  <el-button type="primary" style="margin-left:40px;" @click="_orderList" >搜索</el-button>
</el-row>

methods: {    
      _orderList(){    //此接口与列表接口相同
        this.loading = true;
        this.$api.order.list(data => {
          this.orderList = data;
          this.loading = false;
        },
          {
            orderId:this.search.orderId,                  //传递对应参数给后台
            userId:parseInt(this.search.userId),         //部分参数要注意转类型
            userName:this.search.userName,
            createTime:this.search.createTime,
          }
        );
      },
}