• 微信小程序实现删除功能

     1. 前端

    项目列表展示是使用的wx：for遍历

    每个项目展示有3个模块

    1. project-title

    2. project-content

    3. project-foot

     全部代码如下

    1. <t-sticky>
    2.   <view class="search">
    3.     <t-search model:value="{{conditions.keyword}}" placeholder="输入 户名 手机号 省份 城市 查询" center bind:change="inputKeyword" bind:clear="clearKeyword" bind:submit="doSearch" />
    4.   view>
    5.   <t-dropdown-menu>
    6.     <t-dropdown-item label="选择状态" optionsColumns="2" options="{{workflows}}" value="{{conditions.selectedWorkflows}}" bindchange="selectWorkflow" bindconfirm="confirmSelectWorkflow" default-value="{{conditions.selectedWorkflows}}" multiple />
    7.     <t-dropdown-item label="选择城市" bindchange="selectCity" bindconfirm="confirmSelectCity" optionsColumns="3" options="{{cities}}" value="{{conditions.selectedCities}}" default-value="{{conditions.selectedCities}}" multiple />
    8.     <t-dropdown-item label="选择用户" bindchange="selectUser" bindconfirm="confirmSelectUser" wx:if="{{user.admin}}" optionsColumns="3" options="{{users}}" value="{{conditions.selectedUsers}}" default-value="{{conditions.selectedUsers}}" multiple />
    9.   t-dropdown-menu>
    10. t-sticky>
    11.  
    12.  
    13. <list-rack length="{{records.length}}" loading="{{loading}}" list-end="{{dataEnd}}">
    14.   <block wx:for="{{records}}" wx:key="id">
    15.     <view class="project-title">
    16.       <view class="left">#{{item.serialNo}}view>
    17.       <view class="right" bind:tap="onAction" data-id="{{item.id}}">
    18.         <t-icon name="ellipsis" size="48rpx" />
    19.       view>
    20.     view>
    21.     <view class="project-content">
    22.       <view class="basic-info" bind:tap="view">
    23.         <view class="left">
    24.           <view>
    25.             <text class="name" data-id="{{item.id}}">{{item.name}}text>
    26.             <text class="phone">{{item.phone}}text>
    27.           view>
    28.           <view class="city">{{item.province}}-{{item.city}}view>
    29.         view>
    30.         <view class="right">
    31.           <t-tag class="margin-16" theme="success" variant="light" size="large">
    32.             {{item.workflow}}
    33.           t-tag>
    34.         view>
    35.       view>
    36.       <view class="address">
    37.         {{item.address}}
    38.       view>
    39.     view>
    40.     <view class="project-foot">
    41.       <view class="left">业务员：{{item.userName}} 工程人员： {{item.builderName}}view>
    42.       <view class="right">{{item.createAt}}view>
    43.     view>
    44.   block>
    45. list-rack>
    46.  
    47. <t-action-sheet id="t-action-sheet" bind:selected="handleAction" />
    48. <t-fab icon="add" bind:click="addProject" text="项目">t-fab>

     点击删除的功能是定义在

    project-title

    中 bind:tap绑定了onAction(e)方法，点击时触发 ，自定义属性data-id绑定了当前项目的id值

    js页面如下：

    全部js代码，找一下onAction(e)方法

    1. import Project from '../../../api/project'
    2. import ActionSheet, { ActionSheetTheme } from '../../../miniprogram_npm/tdesign-miniprogram/action-sheet/index';
    3.  
    4. import I18n from '../../../i18n/index'
    5. import PageList from '../../../behaviors/page-list'
    6.  
    7. Page({
    8.  
    9.   behaviors: [I18n, PageList],
    10.  
    11.   /**
    12.    * 页面的初始数据
    13.    */
    14.   data: {
    15.     workflows: [],
    16.     cities: [],
    17.     users: [],
    18.     conditions: {
    19.       keyword: null,
    20.       selectedWorkflows: [],
    21.       selectedCities: [],
    22.       selectedUsers: [],
    23.       pageSize: 20,
    24.       currentPage: 1
    25.     },
    26.  
    27.     project: [],
    28.     user: {},
    29.     true: true
    30.   },
    31.  
    32.   /**
    33.    * 生命周期函数--监听页面加载
    34.    */
    35.   onLoad(options) {
    36.     console.log("project index onload:。。。。")
    37.     let self = this
    38.     //城市列表数据从Project归属地中查询
    39.     Project.findAllCities().then((res) => {
    40.       console.log("获取到城市有：" + res.data)
    41.       let cs = res.data.map(city => {
    42.         return {
    43.           value: city,
    44.           label: city
    45.         }
    46.       })
    47.       self.setData({
    48.         cities: cs
    49.       })
    50.     })
    51.     //用户列表数据从Project所有userId中查询
    52.     Project.findAllUsers().then((res) => {
    53.       console.log("获取到的user有：" + res.data)
    54.       let rcds = res.data.map((rd) => {
    55.         return {
    56.           value: rd.id,
    57.           label: rd.name
    58.         }
    59.       })
    60.       self.setData({
    61.         users: rcds
    62.       })
    63.     })
    64.     //设置审核状态
    65.     this.setData({
    66.       //新的/审核信息不完整（newly），待审核(apply)，审核通过(approved)/挂起(pending);
    67.       //施工中/整改(building), 施工验收（builded-check）验收通过（check-passed）,项目完成（finish）
    68.       workflows: [{
    69.         value: 'newly',
    70.         label: this.$t('projectWorkflowNewly')
    71.       },
    72.       {
    73.         value: 'apply',
    74.         label: this.$t('projectWorkflowApply')
    75.       },
    76.       {
    77.         value: 'approved',
    78.         label: this.$t('projectWorkflowApproved')
    79.       },
    80.       {
    81.         value: 'building',
    82.         label: this.$t('projectWorkflowBuilding')
    83.       },
    84.       {
    85.         value: 'builded-check',
    86.         label: this.$t('projectWorkflowBuildedCheck')
    87.       },
    88.       {
    89.         value: 'check-passed',
    90.         label: this.$t('projectWorkflowCheckPassed')
    91.       },
    92.       {
    93.         value: 'finish',
    94.         label: this.$t('projectWorkflowFinish')
    95.       },
    96.       {
    97.         value: 'pending',
    98.         label: this.$t('projectWorkflowPending')
    99.       }
    100.       ]
    101.     });
    102.  
    103.     this.setData({
    104.       user: getApp().globalData.user
    105.     })
    106.  
    107.     this.resetData();
    108.     //console.log('====', Permit.canAccess(this.data.user, 'project'))
    109.   },
    110.  
    111.   injectEntity() {
    112.     return Project
    113.   },
    114.  
    115.   onTabsChange(tabVal) {
    116.     console.log(tabVal.detail.value)
    117.   },
    118.  
    119.   addProject() {
    120.     wx.redirectTo({
    121.       url: '/pages/project/new/firstStep/firstStep',
    122.     })
    123.   },
    124.  
    125.   selectWorkflow(e) {
    126.     console.log(e)
    127.     this.setData({
    128.       "conditions.selectedWorkflows": e.detail.value
    129.     })
    130.   },
    131.  
    132.   selectCity(e) {
    133.     console.log(e)
    134.     this.setData({
    135.       "conditions.selectedCities": e.detail.value
    136.     })
    137.   },
    138.  
    139.   selectUser(e) {
    140.     console.log(e)
    141.     this.setData({
    142.       "conditions.selectedUsers": e.detail.value
    143.     })
    144.   },
    145.  
    146.  
    147.   inputKeyword(e) {
    148.     this.setData({
    149.       'conditions.keyword': e.detail.value
    150.     })
    151.   },
    152.  
    153.   clearKeyword(e) {
    154.     this.setData({
    155.       'conditions.keyword': null
    156.     })
    157.   },
    158.  
    159.   onAction(e) {
    160.     this.setData({ selectedRecord: this.pickRecord(e.currentTarget.dataset.id) })
    161.     let menuItems = [
    162.       // {label: '编辑', action: 'edit'},
    163.       { label: '删除', action: 'delete' }
    164.     ];
    165.  
    166.     ActionSheet.show({
    167.       theme: ActionSheetTheme.List,
    168.       selector: '#t-action-sheet',
    169.       context: this,
    170.       items: menuItems,
    171.     });
    172.  
    173.   },
    174.   handleAction(e) {
    175.     switch (e.detail.selected.action) {
    176.       case 'edit':
    177.         this.edit()
    178.         break;
    179.       case 'delete':
    180.         this.delete()
    181.         break;
    182.     }
    183.   },
    184.   delete() {
    185.     console.log(this.data.selectedRecord.id)
    186.  
    187.   },
    188.  
    189.   edit() {
    190.  
    191.   },
    192.  
    193.   confirmSelectWorkflow() {
    194.     this.resetData()
    195.   },
    196.  
    197.   confirmSelectCity() {
    198.     this.resetData()
    199.   },
    200.  
    201.   confirmSelectUser() {
    202.     this.resetData()
    203.   }
    204. })

     其他导入的这些js文件：(都是定义好的，直接拿来用！)

    这个miniprogram_npm文件夹中的所有代码是tdesign模版中自带的，具体看这篇文章

    微信小程序项目开发Day1【项目搭建】_素心如月桠的博客-CSDN博客

    js代码我上传了

    【免费】微信小程序通用的js代码资源-CSDN文库

    百度网盘：

    链接：https://pan.baidu.com/s/1tRtjBBjbb4Z2PIpVZijg9A?pwd=zes8 
    提取码：zes8

    回到onAction(e)方法里面

     调用逻辑如下箭头所示

    最后调用的是  handleAction(e) 

     

     

     这个id是哪来的？一定要自己前端定义好，不是直接就能哪的

    自定义属性就是data-开头后面跟自定义的名字，这里我就写的id：data-id

     取值的时候，

    点击这个view标签，绑定的onAction(e)

    id值就在参数e里面

    this.setData({ selectedRecord: this.pickRecord(e.currentTarget.dataset.id) })

    setData到selectRecord可以打印到控制台如下：

     

     selectRecord定义在page-list.js里面，import导入进来就相对于把代码直接复制到当前页面，所以直接用就行

    接下来实现删除方法

    springboot后端delete的Controller写好

    回顾一下重点就这一块和

     

    1.   onAction(e) {
    2.     this.setData({ selectedRecord: this.pickRecord(e.currentTarget.dataset.id) })
    3.     console.log("当前selectedRecord的id值:" + this.data.selectedRecord.id)
    4.     let menuItems = [
    5.       // {label: '编辑', action: 'edit'},
    6.       { label: '删除', action: 'delete' }
    7.     ];
    8.  
    9.     ActionSheet.show({
    10.       theme: ActionSheetTheme.List,
    11.       selector: '#t-action-sheet',
    12.       context: this,
    13.       items: menuItems,
    14.     });
    15.  
    16.   },
    17.   handleAction(e) {
    18.     switch (e.detail.selected.action) {
    19.       case 'edit':
    20.         this.edit()
    21.         break;
    22.       case 'delete':
    23.         this.delete()
    24.         break;
    25.     }
    26.   },
    27.   delete() {
    28.     console.log(this.data.selectedRecord.id)
    29.     Project.delete(this.data.selectedRecord.id).then((res) => {
    30.       console.log(res)
    31.       if (res.data.code == 200) {
    32.         this.resetData();
    33.       }
    34.     })
    35.   },

    删除代码如下：

    1.   delete() {
    2.     console.log(this.data.selectedRecord.id)
    3.     Project.delete(this.data.selectedRecord.id).then((res) => {
    4.       console.log(res)
    5.       if (res.data.code == 200) {
    6.         this.resetData();
    7.       }
    8.     })
    9.   },

     

    实现成功：

     

  • 相关阅读:
    物理机服务器应该注意的事
    C++异步调用方法
    2022华为机试真题 C++ 实现【最大股票收益】
    C++牛客知识点
    【C++/STL】：list容器的深度剖析及模拟实现
    基于Node.js API开发：Error [ERR_HTTP_HEADERS_SENT]
    docker使用前的配置
    AutoCAD Electrical 2022—源箭头和目标箭头
    释放机器人潜力，INDEMIND深耕底层技术
    算法小讲堂之B树和B+树（浅谈）|考研笔记
  • 原文地址：https://blog.csdn.net/m0_47010003/article/details/133031199