opt_web/src/views/price-approval/approval-review-supply/components/DataTableSlot.vue

<script lang="ts" setup>
/**
 * @Name: DataTableSlot.vue
 * @Description: 审批查看(供货) 插槽
 * @Author: xinyan
 */

import { hasPermission } from '/@/utils/hasPermission';
import { Delete, InfoFilled, Operation } from '@element-plus/icons-vue';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import { useCountryInfoStore } from '/@/stores/countryInfo';

const props = defineProps<{
	row: any;
	field: any;
}>();
const { row, field } = props;

const emit = defineEmits(['edit-row', 'handle-delete', 'handle-manage', 'show-detail']);

const countryInfoStore = useCountryInfoStore();
const country = countryInfoStore.Countries.find((c) => c.code == row.country_code);
const color = country ? country.color : '#3875F6';

const currency = countryInfoStore.CurrencyCodes.find((c) => c.code == row.currency_code);
const currencyColor = currency ? currency.color : '#626AEF';

// 日常活动销售利润 = 日常活动售价（人民币）-出口报关价-头程运费-尾程费用-转发费-广告费-退货成本-VAT-仓储费-佣金
const routine_activity_profit = computed(
	() =>
		row.price_daily_rmb -
		(row.export_tax + row.first_cost + row.final_cost +row.forwarding_fee+ row.ad_budget + row.return_or_refurbishment + row.storage_charges + row.brokerage)
);

// 日常活动毛利率 = 日常活动销售利润/日常活动售价（人民币）
const gross_margin_daily = computed(() => routine_activity_profit.value / row.price_daily_rmb);

// 平均毛利 = 0.8*日常活动毛利率 + 0.2*毛利率
const average_gross_profit = computed(() => 0.8*gross_margin_daily.value +0.2*row.gross_profit_margin);

function handleEdit() {
	emit('edit-row', row);
}

function onConfirm() {
	emit('handle-delete', row);
}
</script>

<template>
	<div class="font-semibold">
		<div v-if="field === 'operate'">
			<div class="flex justify-center gap-2">
				<div v-if="hasPermission('PRICE_SUPPLY_UPDATE')">
					<PermissionButton circle plain type="warning" @click="handleEdit">
						<el-icon>
							<Operation />
						</el-icon>
					</PermissionButton>
				</div>
				<div v-if="hasPermission('PRICE_SUPPLY_DEL')">
					<el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220" @confirm="onConfirm">
						<template #reference>
							<PermissionButton circle plain type="danger">
								<el-icon>
									<Delete />
								</el-icon>
							</PermissionButton>
						</template>
						<template #actions="{ confirm, cancel }">
							<el-button size="small" @click="cancel">No!</el-button>
							<el-button size="small" type="danger" @click="confirm"> Yes?</el-button>
						</template>
					</el-popconfirm>
				</div>
			</div>
		</div>
		<div v-else-if="field === 'average_gross_profit'">
			{{ average_gross_profit || '-'}}
		</div>
		<div v-else-if="field === 'routine_activity_profit'">
			{{ routine_activity_profit || '-'}}
		</div>
		<div v-else-if="field === 'gross_margin_daily'">
			{{ gross_margin_daily || '-'}}
		</div>
		<div v-else-if="field === 'country_code'">
			<el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
				{{ country ? country.name : '-' }}
			</el-tag>
		</div>
		<div v-else-if="field === 'currency_code'">
			<el-tag :disable-transitions="true" :style="{ color: currencyColor, borderColor: currencyColor }" effect="plain" round>
				{{ currency ? currency.code : '-' }}
			</el-tag>
		</div>
		<div v-else>
			{{ row[field] || '-' }}
		</div>
	</div>
</template>

<style scoped></style>