1. Frontend
Die Projektliste wird mit wx:for traversal angezeigt
Jede Projektanzeige besteht aus 3 Modulen
1. Projekttitel
2. Projektinhalt
3. Projektfuß
Alle Codes lauten wie folgt
<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>
Die Click-to-Delete-Funktion ist in definiert
Projekttitel
In bind:tap ist es an die Methode onAction(e) gebunden, die beim Klicken ausgelöst wird . Das benutzerdefinierte Attribut data-id ist an den ID-Wert des aktuellen Projekts gebunden.
Die js-Seite lautet wie folgt:
Suchen Sie für den gesamten JS-Code nach der Methode onAction(e).
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()
}
})Diese anderen importierten js-Dateien: (Sie sind alle definiert und können direkt verwendet werden!)
Alle Codes in diesem Ordner „miniprogram_npm“ sind in der Tdesign-Vorlage enthalten. Weitere Informationen finden Sie in diesem Artikel.
WeChat Mini-Programm, Projektentwicklung, Tag 1 [Projektaufbau]_Suxin Ruyueyas Blog-CSDN-Blog
Ich habe den js-Code hochgeladen
[Kostenlos] Gemeinsame JS-Coderessourcen für WeChat-Miniprogramme – CSDN-Bibliothek
Baidu Netdisk:
Link: https://pan.baidu.com/s/1nN2ZlQsYqqL7Ibk2KzshIg?pwd=fhv4
Extraktionscode: fhv4
Gehen Sie zurück zur onAction(e) -Methode
Die Aufruflogik ist durch den Pfeil unten dargestellt
Der letzte Aufruf ist handleAction(e)
Woher kommt diese ID? Sie müssen es selbst im Frontend definieren, es ist nicht direkt möglich.
Ein benutzerdefiniertes Attribut beginnt mit data- und wird von einem benutzerdefinierten Namen gefolgt. Hier schreibe ich die ID: data-id
Wenn man den Wert nimmt,
Klicken Sie auf diese Ansichtsbezeichnung und binden Sie onAction(e)
Der ID-Wert befindet sich im Parameter e
this.setData({ selectedRecord: this.pickRecord(e.currentTarget.dataset.id) })setData to selectRecord kann wie folgt auf der Konsole ausgegeben werden:
selectRecord ist in page-list.js definiert. Das Importieren entspricht dem direkten Kopieren des Codes auf die aktuelle Seite, sodass Sie ihn direkt verwenden können.
Als nächstes implementieren Sie die Löschmethode
Der Springboot-Backend-Delete-Controller ist geschrieben
Sehen wir uns hier und hier die wichtigsten Punkte an
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(); } }) },
Der Löschcode lautet wie folgt:
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(); } }) },
Erfolg erzielen:
