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

<script setup lang="ts">
/**
 * @Name: DataTableSlot.vue
 * @Description:
 * @Author: xinyan
 */

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

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

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

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

function onConfirm() {
	emit('handle-delete', row);
}

</script>

<template>
	<div class="font-medium">
		<div v-if="field === 'operate'">
			<div class="flex justify-center gap-2">
				<div v-if="hasPermission('SkuAttrUpdate')">
					<PermissionButton circle plain type="warning" @click="handleEdit">
						<el-icon>
							<Operation />
						</el-icon>
					</PermissionButton>
				</div>
				<div v-if="hasPermission('SkuAttrDelete')">
					<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>
			{{ row[field] || '-' }}
		</div>
	</div>
</template>

<style scoped>

</style>