1. Front-end
The project list is displayed using wx:for traversal
Each project display has 3 modules
1. project-title
2. project-content
3. project-foot
All codes are as follows
<t-sticky>
<view class="search">
<t-search model:value="{
{conditions.keyword}}" placeholder="输入 户名 手机号 省份 城市 查询" center bind:change="inputKeyword" bind:clear="clearKeyword" bind:submit="doSearch" />
</view>
<t-dropdown-menu>
<t-dropdown-item label="选择状态" optionsColumns="2" options="{
{workflows}}" value="{
{conditions.selectedWorkflows}}" bindchange="selectWorkflow" bindconfirm="confirmSelectWorkflow" default-value="{
{conditions.selectedWorkflows}}" multiple />
<t-dropdown-item label="选择城市" bindchange="selectCity" bindconfirm="confirmSelectCity" optionsColumns="3" options="{
{cities}}" value="{
{conditions.selectedCities}}" default-value="{
{conditions.selectedCities}}" multiple />
<t-dropdown-item label="选择用户" bindchange="selectUser" bindconfirm="confirmSelectUser" wx:if="{
{user.admin}}" optionsColumns="3" options="{
{users}}" value="{
{conditions.selectedUsers}}" default-value="{
{conditions.selectedUsers}}" multiple />
</t-dropdown-menu>
</t-sticky>
<list-rack length="{
{records.length}}" loading="{
{loading}}" list-end="{
{dataEnd}}">
<block wx:for="{
{records}}" wx:key="id">
<view class="project-title">
<view class="left">#{
{item.serialNo}}</view>
<view class="right" bind:tap="onAction" data-id="{
{item.id}}">
<t-icon name="ellipsis" size="48rpx" />
</view>
</view>
<view class="project-content">
<view class="basic-info" bind:tap="view">
<view class="left">
<view>
<text class="name" data-id="{
{item.id}}">{
{item.name}}</text>
<text class="phone">{
{item.phone}}</text>
</view>
<view class="city">{
{item.province}}-{
{item.city}}</view>
</view>
<view class="right">
<t-tag class="margin-16" theme="success" variant="light" size="large">
{
{item.workflow}}
</t-tag>
</view>
</view>
<view class="address">
{
{item.address}}
</view>
</view>
<view class="project-foot">
<view class="left">业务员：{
{item.userName}} 工程人员： {
{item.builderName}}</view>
<view class="right">{
{item.createAt}}</view>
</view>
</block>
</list-rack>
<t-action-sheet id="t-action-sheet" bind:selected="handleAction" />
<t-fab icon="add" bind:click="addProject" text="项目"></t-fab>
The click-to-delete function is defined in
project-title
In bind:tap is bound to the onAction(e) method, which is triggered when clicked . The custom attribute data-id is bound to the id value of the current project.
The js page is as follows:
For all the js code, look for the onAction(e) method
import Project from '../../../api/project'
import ActionSheet, { ActionSheetTheme } from '../../../miniprogram_npm/tdesign-miniprogram/action-sheet/index';
import I18n from '../../../i18n/index'
import PageList from '../../../behaviors/page-list'
Page({
behaviors: [I18n, PageList],
/**
* 页面的初始数据
*/
data: {
workflows: [],
cities: [],
users: [],
conditions: {
keyword: null,
selectedWorkflows: [],
selectedCities: [],
selectedUsers: [],
pageSize: 20,
currentPage: 1
},
project: [],
user: {},
true: true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log("project index onload:。。。。")
let self = this
//城市列表数据从Project归属地中查询
Project.findAllCities().then((res) => {
console.log("获取到城市有：" + res.data)
let cs = res.data.map(city => {
return {
value: city,
label: city
}
})
self.setData({
cities: cs
})
})
//用户列表数据从Project所有userId中查询
Project.findAllUsers().then((res) => {
console.log("获取到的user有：" + res.data)
let rcds = res.data.map((rd) => {
return {
value: rd.id,
label: rd.name
}
})
self.setData({
users: rcds
})
})
//设置审核状态
this.setData({
//新的/审核信息不完整（newly），待审核(apply)，审核通过(approved)/挂起(pending);
//施工中/整改(building), 施工验收（builded-check）验收通过（check-passed）,项目完成（finish）
workflows: [{
value: 'newly',
label: this.$t('projectWorkflowNewly')
},
{
value: 'apply',
label: this.$t('projectWorkflowApply')
},
{
value: 'approved',
label: this.$t('projectWorkflowApproved')
},
{
value: 'building',
label: this.$t('projectWorkflowBuilding')
},
{
value: 'builded-check',
label: this.$t('projectWorkflowBuildedCheck')
},
{
value: 'check-passed',
label: this.$t('projectWorkflowCheckPassed')
},
{
value: 'finish',
label: this.$t('projectWorkflowFinish')
},
{
value: 'pending',
label: this.$t('projectWorkflowPending')
}
]
});
this.setData({
user: getApp().globalData.user
})
this.resetData();
//console.log('====', Permit.canAccess(this.data.user, 'project'))
},
injectEntity() {
return Project
},
onTabsChange(tabVal) {
console.log(tabVal.detail.value)
},
addProject() {
wx.redirectTo({
url: '/pages/project/new/firstStep/firstStep',
})
},
selectWorkflow(e) {
console.log(e)
this.setData({
"conditions.selectedWorkflows": e.detail.value
})
},
selectCity(e) {
console.log(e)
this.setData({
"conditions.selectedCities": e.detail.value
})
},
selectUser(e) {
console.log(e)
this.setData({
"conditions.selectedUsers": e.detail.value
})
},
inputKeyword(e) {
this.setData({
'conditions.keyword': e.detail.value
})
},
clearKeyword(e) {
this.setData({
'conditions.keyword': null
})
},
onAction(e) {
this.setData({ selectedRecord: this.pickRecord(e.currentTarget.dataset.id) })
let menuItems = [
// {label: '编辑', action: 'edit'},
{ label: '删除', action: 'delete' }
];
ActionSheet.show({
theme: ActionSheetTheme.List,
selector: '#t-action-sheet',
context: this,
items: menuItems,
});
},
handleAction(e) {
switch (e.detail.selected.action) {
case 'edit':
this.edit()
break;
case 'delete':
this.delete()
break;
}
},
delete() {
console.log(this.data.selectedRecord.id)
},
edit() {
},
confirmSelectWorkflow() {
this.resetData()
},
confirmSelectCity() {
this.resetData()
},
confirmSelectUser() {
this.resetData()
}
})These other imported js files: (They are all defined and can be used directly!)
All the codes in this miniprogram_npm folder are included in the tdesign template. See this article for details.
WeChat Mini Program Project Development Day1 [Project Construction]_Suxin Ruyueya's Blog-CSDN Blog
I uploaded the js code
[Free] Common js code resources for WeChat mini programs-CSDN Library
Baidu Netdisk:
Link: https://pan.baidu.com/s/1nN2ZlQsYqqL7Ibk2KzshIg?pwd=fhv4
Extraction code: fhv4
Go back to the onAction(e) method
The calling logic is as shown by the arrow below
The last call is handleAction(e)
Where did this id come from? You must define it on the front end yourself, it cannot be done directly.
A custom attribute starts with data- and is followed by a custom name. Here I write the id: data-id
When taking the value,
Click this view label and bind onAction(e)
The id value is in the parameter e
this.setData({ selectedRecord: this.pickRecord(e.currentTarget.dataset.id) })setData to selectRecord can be printed to the console as follows:
selectRecord is defined in page-list.js. Importing it is equivalent to copying the code directly to the current page, so you can use it directly.
Next implement the delete method
Springboot backend delete Controller is written
Let’s review the key points here and
onAction(e) { this.setData({ selectedRecord: this.pickRecord(e.currentTarget.dataset.id) }) console.log("当前selectedRecord的id值:" + this.data.selectedRecord.id) let menuItems = [ // {label: '编辑', action: 'edit'}, { label: '删除', action: 'delete' } ]; ActionSheet.show({ theme: ActionSheetTheme.List, selector: '#t-action-sheet', context: this, items: menuItems, }); }, handleAction(e) { switch (e.detail.selected.action) { case 'edit': this.edit() break; case 'delete': this.delete() break; } }, delete() { console.log(this.data.selectedRecord.id) Project.delete(this.data.selectedRecord.id).then((res) => { console.log(res) if (res.data.code == 200) { this.resetData(); } }) },
The deletion code is as follows:
delete() { console.log(this.data.selectedRecord.id) Project.delete(this.data.selectedRecord.id).then((res) => { console.log(res) if (res.data.code == 200) { this.resetData(); } }) },
To achieve success:
