1. フロントエンド
プロジェクトリストはwx:for traversalを使用して表示されます
各プロジェクト表示には 3 つのモジュールがあります
1. プロジェクトのタイトル
2. プロジェクトの内容
3.プロジェクトフット
すべてのコードは次のとおりです
<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>
クリックして削除する機能は次のように定義されています。
プロジェクト名
bind:tap では、クリックされたときにトリガーされるonAction(e)メソッドにバインドされており 、カスタム属性 data-id は現在のプロジェクトの ID 値にバインドされています。
jsページは次のとおりです。
すべての JS コードについて、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()
}
})これらの他のインポートされた js ファイル: (これらはすべて定義されており、直接使用できます!)
この miniprogram_npm フォルダー内のすべてのコードは、tdesign テンプレートに含まれています。詳細については、この記事を参照してください。
WeChat ミニ プログラム プロジェクト開発 Day1 [プロジェクト構築]_Suxin Ruyueya のブログ - CSDN ブログ
jsコードをアップロードしました
[無料] WeChat ミニ プログラム用の共通 JS コード リソース - CSDN ライブラリ
百度ネットディスク:
リンク: https://pan.baidu.com/s/1nN2ZlQsYqqL7Ibk2KzshIg?pwd=fhv4
抽出コード: fhv4
onAction(e)メソッドに戻ります
呼び出しロジックは以下の矢印に示すとおりです。
最後の呼び出しは handleAction(e) です
このIDはどこから来たのでしょうか? フロントエンドで自分で定義する必要があり、直接行うことはできません。
カスタム属性はdata-で始まり、その後にカスタム名が続きます。ここでは、id を書きます: data-id
値を取得するときは、
このビュー ラベルをクリックしてonAction(e)をバインドします
ID 値はパラメータ e にあります
this.setData({ selectedRecord: this.pickRecord(e.currentTarget.dataset.id) })setData から selectRecord は、次のようにコンソールに出力できます。
selectRecord は page-list.js で定義されており、これをインポートすることはコードを現在のページに直接コピーすることと同じであるため、直接使用できます。
次にdeleteメソッドを実装します。
Springboot バックエンド削除コントローラーが書き込まれています
ここで重要なポイントを確認して、
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(); } }) },
削除コードは次のとおりです。
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(); } }) },
成功するには:
