前段接口对接

前端接口添加新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入添加1.后端给的路由路径粘到自己的路由文件里，并且写

正在努力的二哈

742人浏览 · 2020-11-04 18:03:01

正在努力的二哈 · 2020-11-04 18:03:01 发布

前端接口

添加
修改
详情
删除
搜索。重置。导出。分页
根据审核状态判断修改审核按钮是否显示

添加

1.后端给的路由路径粘到自己的路由文件里，并且写上对应的方法

// 用户交易权限设置添加
export function saveJurisdiction(data) {
  console.log(data)
  return request({
    url: '/service-goodtop-management-system/special/save_trading_jurisdiction',
    method: 'post',
    headers: { token: getToken() },
    data
  })
}

2.把自己写的路由路径对应的函数名称应用到相应的index.vue文件中

import {saveJurisdiction} from '@/api/chainReform' // 用户交易权限设置添加

3.写前端对应的按钮（添加），并且在

<el-select>
  <el-button class="filter-item" type="primary" icon="el-icon-add" @click="addmarketClick">
          添加
  </el-button>
</el-select>

4.写添加的弹出框，给取消和确定按钮写对应的事件

   <!-- 添加 -->
    <el-dialog :visible.sync="addmarket">
      <el-form :data="addmarketData" label-position="left" label-width="160px" style="width: 400px; margin-left:50px;">
        <el-form-item label="交易对">
          <el-select v-model="addmarketData.commodityId" placeholder="ETH/GOOD">
            <el-option v-for="(item,index) in currencyOptions " :key="index" :label="item.commodityPair" :value="item.commodityId" />
          </el-select>
        </el-form-item>
        
          <el-form-item label="用户代码">
            <el-input v-model="addmarketData.userNo" />
          </el-form-item>
        
        
          <el-form-item label="买方权限">
              <el-select v-model="addmarketData.buyAuth" placeholder="有">
                <el-option v-for="(item,index) in buyData" :key="index" :label="item.label" :value="item.key" />
              </el-select>
            </el-form-item>
            <el-form-item label="卖方权限">
              <el-select v-model="addmarketData.sellAuth" placeholder="有">
                <el-option v-for="(item,index) in sellData" :key="index" :label="item.label" :value="item.key" />
              </el-select>
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addmarket = false">
          取消
        </el-button>
        <el-button type="primary" @click="addmarketTrue">
          确认
        </el-button>
      </div>
    </el-dialog>

4.单击事件里面写后端在数据里面显示的字段addmarketClick

      // 添加
      addmarketClick(){
        this.addmarket = true;
        this.CommodityPair();
      },
      add(){
       this.addmarketData.buyAuth = '';
       this.addmarketData.sellAuth = '';
       this.addmarketData.commodityId = '';
       this.addmarketData.userNo = '';
      },
      addmarketTrue(){
        
    saveJurisdiction(this.addmarketData).then(res => {
          console.log(res)
          this.getList()
          this.$message({
            message: '添加成功',
            type: 'success'
          })
           this.add();
        }).catch(err => {
          console.log(err)
          this.add();
        })
        this.addmarket = false;
      },

5.在return里面定义一个空对象里定义自己展示字段的初始值

   // 添加
          addmarketData:{
           buyAuth:'',
            sellAuth:'',
            commodityId:'',
             userNo:''
          },

6.在create methods方法里写在添加按钮上对应的函数

 // 添加
      addmarketClick(){
        this.addmarket = true;
        this.CommodityPair();
      },
      add(){
       this.addmarketData.buyAuth = '';
       this.addmarketData.sellAuth = '';
       this.addmarketData.commodityId = '';
       this.addmarketData.userNo = '';
      },
      addmarketTrue(){
        
    saveJurisdiction(this.addmarketData).then(res => {
          console.log(res)
          this.getList()
          this.$message({
            message: '添加成功',
            type: 'success'
          })
           this.add();
        }).catch(err => {
          console.log(err)
          this.add();
        })
        this.addmarket = false;
      },

修改

//按钮
<el-table-column label="操作" align="center" min-width="500" class-name="small-padding fixed-width">
<template slot-scope="row">
<el-button type="primary" size="mini" @click="userUpdate(row)">
 修改
</el-button>
</template>
</el-table-column>

//弹出框
 <!-- 修改弹出框 -->
 :visible.sync="dialogFormVisible"  默认的取消关闭按钮的属性
<el-dialog :visible.sync="dialogFormVisible" width="800px" :close-on-click-modal="false">
<el-form :data="dataForm" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
<el-form-item label="修改用户名称">
<el-input v-model="dataForm.nickName" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">
  取消
</el-button>
 <el-button type="primary" @click="modify">
  确认
</el-button>
</div>
</el-dialog>

data里的
dialogFormVisible = false;
// 用户修改(定义初始值和传的参数)
dataForm:{
nickName:'',
userId:''
 },
method里的
userUpdate(row) {
this.dialogFormVisible = true;
this.dataForm.userId = row.row.userId;
this.dataForm.nickName = row.row.nickName;}
 modify(){
if(this.dataForm.nickName == ''){
 this.$message({
message: '用户名称不能为空',
type: 'error'
})
}else{
this.dialogFormVisible = false;
updateNickName(this.dataForm).then(res => {
console.log(res)
this.$message({
message: '修改成功',
type: 'success'
})
this.getList()
this.dataForm.userId = '';
this.dataForm.nickName = '';
}).catch(err => {
console.log(err)
})
}

详情

//前端页面
 <el-table-column label="操作" align="center" min-width="500" class-name="small-padding fixed-width">
<template slot-scope="row">
<el-button size="mini" @click="UserDelete(row)">
详情
</el-button>
</template>
</el-table-column>
//弹出框
 <!-- 用户详情弹出框 -->
 :close-on-click-modal="false"点击空白页面不会关闭
 
    <el-dialog :visible.sync="UserDetails" width="800px" :close-on-click-modal="false">
      <el-form :data="userInfo" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="认证等级">
          <el-input v-model="userInfo.authName" disabled />
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="userInfo.userId" disabled />
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="userInfo.nickName" disabled />
        </el-form-item>
        <el-form-item label="用户代码">
          <el-input v-model="userInfo.userNo" disabled />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userInfo.cellPhone" disabled />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userInfo.email" disabled />
        </el-form-item>
        <el-form-item label="用户类型">
          <el-input v-model="userInfo.userTypeName" disabled />
        </el-form-item>
        <el-form-item label="所属项目方">
          <el-input v-model="userInfo.partyUserNo" disabled />
        </el-form-item>
        <el-form-item label="所属城市">
          <el-input v-model="userInfo.centreUserNo" disabled />
        </el-form-item>
        <el-form-item label="所属超级">
          <el-input v-model="userInfo.memberUserNo" disabled />
        </el-form-item>
        <el-form-item label="推荐人">
          <el-input v-model="userInfo.referrerUserNo" disabled />
        </el-form-item>
        <el-form-item label="节点类型">
          <el-input v-model="userInfo.firmTypeName" disabled />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="userInfo.firmStatusName" disabled />
        </el-form-item>
        <el-form-item label="开户时间">
          <el-input v-model="userInfo.openTime" disabled />
        </el-form-item>
      </el-form> 

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="UserDetails = false">
          关闭
        </el-button>
      </div>
    </el-dialog>

data里的
 // 用户详情
 userInfo:{
            authName:'',
            userId:'',
            nickName:'',
            userNo:'',
            cellPhone:'',
            email:'',
            userTypeName:'',
            partyUserNo:'',
            centreUserNo:'',
            memberUserNo:'',
            referrerUserNo:'',
            firmTypeName:'',
            firmStatusName:'',
            createTime:'',
            openTime:'',
            frozenTime:'',
            unFrozenTime:'',
            desimeTime:''
          },
       UserDetails:false,
methods里的
 // 用户详情
      UserDelete(row){
        this.UserDetails = true
        console.log(row)
       //传的参数 userId
        let userId = row.row.userId;
        let User = {}
        User.userId = userId
        // console.log(userId)
        detail(User).then(res => {
          console.log(res)
          //返回的数据
          this.userInfo = res.data
        }).catch(err => {
          console.log(err)
        })
      },

删除

页面
<el-table-column label="操作" align="center" min-width="230" class-name="small-padding fixed-width">
<template slot-scope="row">
<el-button size="mini" type="danger" @click="handleDelete(row)">
 删除
 </el-button>
</template>
</el-table-column>


弹出框
<el-dialog :visible.sync="delData" width="800px" :close-on-click-modal="false">
 <el-form label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
 <h3>是否确认删除管理员角色?</h3>
</el-form>
<div slot="footer" class="dialog-footer">
 <el-button @click="delData = false">
 取消
</el-button>
<el-button type="primary" @click="delClick">
 确认
 </el-button>
</div>
 </el-dialog>

 // 删除
 delData:false,
 userDel:{
  roleId:''
       }
// 删除
handleDelete(row) {
console.log(row)
this.delData = true;
this.userDel.roleId = row.row.roleId;
},
delClick(){
this.delData = false;
 roleRm(this.userDel).then(res => {
console.log(res)
this.$message({
message: '操作成功',
 type: 'success'
})
this.getList();
}).catch(err => {
console.log(err)
})
    },

搜索。重置。导出。分页

1.html页面
trim 取消空格

<template>
<div class="" style="padding:30px;">
      <div style="padding-bottom:30px">用户列表</div>
      <div class="filter-container">

<span class="demonstration" style="margin: 0px 10px 0px 10px;">用户代码</span>
<el-input placeholder="用户代码" v-model.trim="listQuery.userNo" style="width:140px" class="filter-item"/>
<span class="demonstration" style="margin: 0px 10px 0px 10px;">用户名称</span>
	<el-input placeholder="用户名称" v-model.trim="listQuery.nickName" style="width:140px" class="filter-item"/>
    <span class="demonstration" style="margin: 0px 10px 0px 10px;">手机号</span>
<el-input placeholder="手机号" v-model.trim="listQuery.cellPhone" style="width:140px" class="filter-item"/>
<span class="demonstration" style="margin: 0px 10px 0px 10px;">邮箱</span>
	<el-input placeholder="邮箱" v-model.trim="listQuery.email" style="width:140px" class="filter-item"/> 
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="Reset">
        重置
</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload"> 导出</el-button>

<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
 </div>
 </template>

data里面定义listQuery，和初始值
所有的点击事件都要在data里面定义false，然后在对应的方法里面写true
  listQuery:{
            page:1,
            pageSize:10,
            userNo:null,
            nickName:null,
            cellPhone:null,
            email:null
          },
  total：0
  downloadLoading：false
 
 method方法里传参数 
   usersList(this.listQuery).then(response => {
          console.log(response)
          this.list = response.data.data;
          console.log(this.list)
          this.total = response.data.total
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
  //重置
      Reset() {
      this.listQuery.page = 1;
      this.listQuery.pageSize = 10;
      this.listQuery.userNo = null;
      this.listQuery.nickName=null;
      this.listQuery.cellPhone=null,
      this.listQuery.email=null
      this.getList();
    },
  //导出
  // excel表格
      handleDownload() {
  this.downloadLoading = true
  import('@/vendor/Export2Excel').then(excel => {
  const tHeader = ['用户代码', '用户名称', '手机号', '邮箱','用户类型','个人邀请码','节点类型','状态','冻结状态','所属项目方','所属城市','所属超级','推荐人','开始日期','结束日期']
  const filterVal = ['userNo', 'nickName', 'cellPhone', 'email','userTypeName','invitationCode','firmTypeName','firmStatusName','frozenStatus','partyUserNo','centreUserNo','memberUserNo','referrerUserNo','createTime','desimeTime']
 const data = this.formatJson(filterVal)
   console.log(excel)
   excel.export_json_to_excel({
    header: tHeader,data,filename: '用户列表'})
    this.downloadLoading = false
        })
      },
//分页
  getList() {
        this.listLoading = true
        usersList(this.listQuery).then(response => {
          console.log(response)
          this.list = response.data.data;
          console.log(this.list)
          this.total = response.data.total
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },

根据审核状态判断修改审核按钮是否显示

<el-table-column label="操作" align="center" min-width="230" class-name="small-padding fixed-width">
<template slot-scope="row">
<el-button v-if="row.row.authApprovalStatus=='审核通过'?false:row.row.authApprovalStatus=='审核拒绝'?false:true" size="mini" type="danger" @click="userAudit(row)">
     用户审核
</el-button>
 </template>
</el-table-column>

  // 用户状态审核
    userAudit(row){
      console.log(row)
      this.describesData.authId = row.row.authId;
      this.userAudited = true;
      
      // 获得客户一级认证详情信息
      this.oneDetails.firmId = row.row.firmId;
      oneLevel(this.oneDetails).then(res => {
        console.log(res)
        this.oneDetails = res.data
      }).catch(err => {
        console.log(err)
      }),
      
      // 获得客户二级认证详情信息
      this.twoDetails.firmId = row.row.firmId;
      twoLevel(this.twoDetails).then(res => {
        console.log(res.data)
        this.twoDetails = res.data
      }).catch(err => {
        console.log(err)
      })
    },

快递鸟一站式物流API解决方案

电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。

更多推荐

苹方字体跨平台解决方案：告别Windows与Mac的字体显示鸿沟

在Web开发中，我们经常面临一个令人头疼的问题：精心设计的页面在Mac上优雅精致，到了Windows设备上却因字体差异而显得平庸。今天，我们为您介绍一个专业的解决方案——PingFangSC字体包，它让苹方字体的优雅设计能够在所有平台上完美呈现。这个开源项目提供了完整的6种字重，支持ttf和woff2双格式，真正实现了跨平台字体统一。## 为什么跨平台字体一致性如此重要？🔍现代Web应用

快递鸟社区

Ascend-SACT/Mineru-Optimization后端引擎对比：Pipeline、Hybrid与VLM模式如何选择？

Ascend-SACT/Mineru-Optimization提供三种强大的后端引擎模式——Pipeline、Hybrid和VLM，帮助用户高效处理各类文档。本文将深入对比这三种模式的核心特性、性能表现和适用场景，助你快速找到最适合的解决方案。## 三大引擎模式核心特性解析 🚀### Pipeline模式：传统OCR流程的极致优化**核心架构**：采用模块化设计，包含版面分析、OCR、

快递鸟社区

如何永久保存微信聊天记录？WeChatMsg免费开源工具终极指南

你是否曾担心更换手机后，那些珍贵的微信对话会永远消失？与家人的温馨聊天、重要的工作沟通、朋友间的难忘回忆，这些数字记忆都值得被永久珍藏。**WeChatMsg**是一款完全免费的开源工具，专门用于**微信聊天记录永久保存和深度分析**，让你的每一段对话都能成为永恒的数字资产。## 🔍 你的聊天记录正在面临什么风险？微信已经成为我们日常生活中不可或缺的沟通工具，但官方并未提供完整的聊天记录