opt_web/src/views/sku-manage/product-attribute/component/DataTableSlot.vue

<script lang="ts" setup>
/**
 * @Name: DataTableSlot.vue
 * @Description: 产品属性-单元格插槽
 * @Author: Cheney
 */

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


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

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

function handleView() {
  emit('show-detail', row);
}

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

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

function handleManage() {
  emit('handle-manage', 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>
          <el-tooltip :enterable="false" :show-arrow="false" content="管理枚举" placement="top"
                      popper-class="custom-btn-tooltip-2">
            <el-button :icon="Key" circle color="#8d87e8" plain @click="handleManage"></el-button>
          </el-tooltip>
        </div>
        <div>
          <el-button :icon="View" circle plain type="success" @click="handleView"></el-button>
        </div>
      </div>
    </div>
    <div v-else>
      {{ row[field] }}
    </div>
  </div>

</template>

<style lang="scss">
.custom-btn-tooltip-2 {
  background-color: #f0f0fe !important;
  color: #606266 !important;
  border: 1px solid #8d87e8 !important;
  font-size: 14px;
}
</style>