crm-app-vue3/pages/orderDetail/tabs/commissionFormList/commissionFormList.vue

<template>
	<view class="commission-form-list">
		

		<!-- 分成信息卡片列表 -->
		<view v-if="loading" class="loading_wrap">
			<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
		</view>
		<view v-else-if="commissionList.length === 0" class="empty_wrap">
			<u-empty text="暂无分成数据"></u-empty>
		</view>
		<view v-else class="card_list">
			<commission-item v-for="(row) in commissionList" :key="row.id" :item="row" :type="'2'" @click.native="handleEdit(row)"></commission-item>
		</view>
	</view>
</template>

<script>
	import commissionItem from "@/pages/order/components/commission/commissionItem.vue";

	export default {
		name: 'CommissionFormList',
		components: {
			commissionItem
		},
		props: {
			sendFormId: {
				type: [Number, String],
				required: true
			},
			clueId: {
				type: [Number, String],
				required: true
			}
		},
		data() {
			return {
				commissionList: [],
				loading: false
			}
		},
		methods: {
			async getList() {
			this.loading = true
			try {
				const data = {
					sendFormId: this.sendFormId,
					type: '1'
				}
				const res = await uni.$u.api.selectCommissionList({}, data);
				this.commissionList = res.rows || []
			} catch (error) {
				uni.$u.toast('获取分成列表失败')
			} finally {
				this.loading = false
			}
		},
		handleEdit(row) {
			// 跳转到编辑分成页面
			uni.navigateTo({
				url: `/pages/commissionForm/index?sendFormId=${this.sendFormId}&clueId=${this.clueId}&id=${row.id}`
			})
		},
			handleDelete(id) {
				uni.showModal({
					title: '警告',
					content: '确定要删除这条分成记录吗？删除后将无法恢复！',
					confirmButtonText: '确定删除',
					cancelButtonText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.deleteRow(id)
						}
					}
				})
			},
			async deleteRow(id) {
				try {
					await uni.$u.api.clueCommissionForm.remove([id])
					uni.$u.toast('删除成功')
					this.getList()
				} catch (error) {
					uni.$u.toast('删除失败，请稍后重试')
				}
			},
			// 外部调用获取列表
			getListByExternal() {
				this.getList()
			}
		},
		created() {
			this.getList();
			uni.$on('addCommissionSuccess',()=>{
				this.getList();
			});
		},
		beforeDestroy(){
			uni.$off('addCommissionSuccess');  
		},
	}
</script>

<style lang="scss" scoped>
	.commission-form-list {
		padding: 20px 20px 20px;
		background: #f5f6f8;
	}

	.commission-header {
		margin-bottom: 16px;
	}

	.loading_wrap,
	.empty_wrap {
		padding: 40px 20px;
		text-align: center;
	}
</style>