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();
		});
	},
	beforeUnmount() {
		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>