vue前端调取数据接口方法：接口为地址时(二)

最新推荐文章于 2024-05-28 16:04:04 发布

~张小八~

最新推荐文章于 2024-05-28 16:04:04 发布

阅读量850

点赞数

分类专栏： vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_24441205/article/details/126141047

版权

vue 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

1.获取数据列表，在mounted()中调用此方法： this.getIndustrialUserList()

  getIndustrialUserList(callback){
          //分页
          this.queryParams.pageNum=this.pagination.current
          this.queryParams.pageSize=this.pagination.size
          request({
            url: '/system/industrialUser/list',
            method: 'get',
            params: this.queryParams
          }).then(res=>{
           /* debugger*/
            this.rTableData= res.rows;
            this.pagination.total=res.total
            console.log(res)
            if(callback)
              callback();
          });
         },

2.增、删、改、查

<el-table-column slot="action" label="操作" width="150">
     <template slot-scope="scope">
            <el-button  type="text" size="small" @click="checkInUser(scope.row)"  class="qgreen">查看</el-button>
            <el-button  type="text" size="small" @click="editInUser(scope.row)"  class="qgreen">编辑</el-button>
            <el-button type="text" size="small" @click="delInUser(scope.row.industrialUserId)"  class="orange">删除</el-button>
     </template>
 </el-table-column>

 //新增
        addIndustrialUser(){
          this.oprateType='add'
          this.editDialogVisible = true
          this.isShow = true
          this.isDisable = false
        },
        //查看
        checkInUser(data){
          this.oprateType='check'
          this.editDialogVisible = true
          this.formData = data
          this.isShow = false
          this.isDisable = true
        //编辑、修改
        editInUser(data){
          this.oprateType='edit'
          this.editDialogVisible = true
          this.isShow = true
          this.isDisable = false
          this.formData = data
        },
        //保存
        saveUpdate(data){
          this.$refs.formDataRef.validate( (valid) =>{
            if(valid){
              //新增
              if(this.oprateType =='add'){
                request({
                  url:'/system/industrialUser/saveUpdateCngGisIndustrialUser',
                  method:'post',
                  data:this.formData
                }).then(res=>{
                  this.editDialogVisible = false
                  this.getIndustrialUserList()
                  this.$message.success("新增成功！")
                })
                this.resetForm()
              }else {
                //编辑、修改
                request({
                  url:'/system/industrialUser/saveUpdateCngGisIndustrialUser',
                  method:'post',
                  data:this.formData
                }).then(res =>{
                  this.getIndustrialUserList()
                  this.editDialogVisible = false
                  this.$message.success("编辑成功！")
                  console.log(res)
                })
                this.resetForm()
              }
            }
          })

        },
        //删除
        delInUser(data){
          const self = this;
           this.$confirm('此操作将永久删除该信息, 是否删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            self.delClick(data);
          });
        },
        delClick(data){
          const self = this;
           request({
            url: '/system/industrialUser/removeCngGisIndustrialUser/' + data,
            method: 'post',
            data: data
          }).then(res=>{
            self.getIndustrialUserList();
             this.$message.success("删除成功！")
          }).catch((e)=>{})
        },
        //清空表单
        resetForm(){
          this.formData={
            projectId:'用户档案',
            lat:'',
            lng:'',
            elevationGround:'',
            addr:''
          }