opt_web/src/views/sku-manage/company-sku/component/DataTableSlot.vue

<script lang="ts" setup>
/**
 * @Name: DataTableSlot.vue
 * @Description: 公司SKU-单元格插槽
 * @Author: Cheney
 */

import { CopyDocument, Delete, InfoFilled, Operation, Position, View } from '@element-plus/icons-vue';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import { getTagType } from '/@/utils/useTagColor';
import { handleCopy } from '/@/utils/useCopyText';
import { hasPermission } from '/@/utils/hasPermission';


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

const emit: any = defineEmits([ 'edit-row', 'handle-delete', 'show-sku', 'release-sku' ]);

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

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

function release() {
  emit('release-sku', row);
}

function showDetail() {
  emit('show-sku', row);
}
</script>

<template>
  <div class="font-medium">
    <div v-if="field === 'operate'">
      <div class="flex justify-center gap-2 mb-2">
        <div v-if="hasPermission('SkuUpdate')">
          <PermissionButton circle plain type="warning" @click="handleEdit">
            <el-icon>
              <Operation />
            </el-icon>
          </PermissionButton>
        </div>
        <div v-if="hasPermission('SkuDelete')">
          <el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220"
                         @confirm="onConfirm">
            <template #reference>
              <PermissionButton :disabled="row.status === 3" 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 v-if="hasPermission('SkuPublish')">
					<el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="发布后此sku将无法更改, 是否继续?" width="220"
												 @confirm="release">
						<template #reference>
							<!--div不可以删除，否则会导致popconfirm的弹出框消失-->
							<div>
								<el-tooltip :enterable="false" :show-arrow="false" content="发布" hide-after="0" placement="top"
														popper-class="custom-btn-tooltip-2" :disabled="row.status === 3">
									<PermissionButton :color="'#6466F1'" :disabled="row.status === 3" circle plain>
										<el-icon>
											<Position />
										</el-icon>
									</PermissionButton>
								</el-tooltip>
							</div>
						</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>
					<PermissionButton circle plain type="success" @click="showDetail()">
						<el-icon>
							<View />
						</el-icon>
					</PermissionButton>
				</div>
      </div>
    </div>
    <div v-else-if="field === 'sku'" class="flex flex-nowrap">
      {{ row.sku }}
      <el-button :disabled="!row.sku" :icon="CopyDocument" class="ml-1 cursor-pointer" link
                 @click="handleCopy(row.sku || '')"></el-button>
    </div>
    <div v-else-if="field === 'brand'">
      <el-tag :disable-transitions="true" :type="getTagType(row.brand.brand_name)" effect="plain" round>
        {{ row.brand.brand_name }}
      </el-tag>
    </div>
    <div v-else-if="field === 'kind'">
      <el-tag :disable-transitions="true" :type="getTagType(row.kind.name)" effect="plain" round>
        {{ row.kind.name }}
      </el-tag>
    </div>
    <div v-else-if="field === 'status'">
      <el-tag :disable-transitions="true" :type="row.status === 1 ? 'warning' : 'success'">
        {{ row.status === 1 ? '草稿' : '已发布' }}
      </el-tag>
    </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 #6466f1 !important;
  font-size: 14px;
}
</style>