123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- <script lang="ts" setup>
- /**
- * @Name: DataTableSlot.vue
- * @Description: 商品监控-表格插槽
- * @Author: Cheney
- */
- import { useCountryInfoStore } from '/@/stores/countryInfo';
- import { CopyDocument, Delete, InfoFilled, Operation, Tickets, Timer } from '@element-plus/icons-vue';
- import { getTagType } from '/@/utils/useTagColor';
- import PermissionButton from '/@/components/PermissionButton/index.vue';
- import ProductInfo from '/@/views/product-manage/component/ProductInfo.vue';
- import ProgressBar from '/@/views/product-manage/product-monitor/component/ProgressBar.vue';
- import { handleCopy } from '/@/utils/useCopyText';
- const router = useRouter();
- const props = defineProps<{
- row: any,
- field: any
- }>();
- const { row, field } = props;
- const emit: any = defineEmits([ 'edit-row', 'handle-delete', 'show-history' ]);
- const countryInfoStore = useCountryInfoStore();
- const country = countryInfoStore.Countries.find(c => c.code == row.country_code);
- const color = country ? country.color : '#3875F6';
- const statusMap: { [key: number]: { text: string, type: string } } = {
- 1: { text: '正常', type: 'success' },
- 2: { text: '失败', type: 'danger' },
- 3: { text: '暂停', type: 'warning' },
- 10: { text: '下架', type: 'info' }
- };
- const { text: statusText, type: statusType } = statusMap[row.status] || { text: '未知', type: 'info' };
- function handleEdit() {
- emit('edit-row', row);
- }
- function onConfirm() {
- emit('handle-delete', row);
- }
- function showDetail(detail: any) {
- emit(`${ detail }`, row);
- }
- function goto() {
- const routeUrl = router.resolve({
- path: '/product/comment',
- query: {
- asin: row.asin,
- title: row.goods.title,
- img: row.goods.img,
- url: row.goods.url
- }
- });
- window.open(routeUrl.href, '_blank');
- }
- </script>
- <template>
- <div class="font-medium">
- <div v-if="field === 'product_info'">
- <ProductInfo :img-width="60" :item="row.goods" />
- </div>
- <div v-else-if="field === 'sku'" style="color: #1d2129;">
- <div v-if="row.goods.sku || row.goods.sku2 || row.goods.sku3" class="flex items-center justify-center max-h-5">
- <div v-if="row.goods.sku">
- {{ row.goods.sku }}
- <el-button :icon="CopyDocument" class="ml-1 cursor-pointer" link
- @click="handleCopy(row.goods.sku || '')"></el-button>
- </div>
- <div v-if="row.goods.sku2">
- {{ row.goods.sku2 }}
- <el-button :icon="CopyDocument" class="ml-1 cursor-pointer" link
- @click="handleCopy(row.goods.sku2 || '')"></el-button>
- </div>
- <div v-if="row.goods.sku3">
- {{ row.goods.sku3 }}
- <el-button :icon="CopyDocument" class="ml-1 cursor-pointer" link
- @click="handleCopy(row.goods.sku3 || '')"></el-button>
- </div>
- </div>
- <div v-else>
- -
- </div>
- </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 === 'shop_name'">
- <el-tag v-if="row.goods.shop_name" :disable-transitions="true" :type=getTagType(row.shop_name)>
- {{ row.shop_name }}
- </el-tag>
- <div v-else>-</div>
- </div>
- <div v-else-if="field === 'tag'">
- <el-tag v-if="row.goods.tag" :disable-transitions="true" :type=getTagType(row.goods.tag)>
- {{ row.goods.tag }}
- </el-tag>
- <div v-else>-</div>
- </div>
- <div v-else-if="field === 'brand'">
- <el-tag v-if="row.goods.brand" :disable-transitions="true" :type=getTagType(row.goods.brand) effect="plain" round>
- {{ row.goods.brand }}
- </el-tag>
- <div v-else>-</div>
- </div>
- <div v-else-if="field === 'price_info'">
- <div v-if="row.goods.price >= 0" class="font-medium">
- <p>现 价:{{ row.goods.currency_code + '' + row.goods.price }}</p>
- <p>折 扣:{{ row.goods.discount > 0 ? row.goods.discount + '%' : '-' }}</p>
- <p>优惠劵:{{ !row || row.goods.coupon <= 0 ? '-' : row.goods.currency_code + '' + row.goods.coupon }}</p>
- </div>
- </div>
- <div v-else-if="field === 'show_price'">
- <div class="font-medium">
- <p>展示价格:{{ row.goods.show_price ? row.goods.currency_code + row.goods.show_price : '-' }}</p>
- <p>平时售价:{{ row.goods.activity_price ? row.goods.currency_code + row.goods.activity_price : '-' }}</p>
- <p>最低售价:{{ row.goods.minimum_price ? row.goods.currency_code + row.goods.minimum_price : '-' }}</p>
- </div>
- </div>
- <div v-else-if="field === 'score'">
- <template v-if="row.goods.score !== null && row.goods.score !== undefined && row.goods.score !== ''">
- <el-rate
- v-if="row.goods.score > 0"
- v-model="row.goods.score"
- :colors="['#FF0000', '#FF9900', '#67C23A']"
- disabled
- show-score
- text-color="#1e293b"
- />
- <span v-else>{{ row.goods.score }}</span> <!-- 值为0时显示0 -->
- </template>
- <template v-else>
- <span>-</span> <!-- 无值时显示'--' -->
- </template>
- </div>
- <div v-else-if="field === 'all_score'">
- <template v-if="row.goods.all_score !== null && row.goods.all_score !== undefined && row.goods.all_score !== ''">
- <el-rate
- v-if="row.goods.all_score > 0"
- v-model="row.goods.all_score"
- :colors="['#FF0000', '#FF9900', '#67C23A']"
- disabled
- show-score
- text-color="#1e293b"
- />
- <span v-else>{{ row.goods.all_score }}</span>
- </template>
- <template v-else>
- <span>-</span>
- </template>
- </div>
- <div v-else-if="field === 'stars'" class="flex flex-col font-normal" style="min-width: 170px">
- <div v-for="i in [5,4,3,2,1]" :key="i" class="w-full flex items-center" style="max-height: 15px;">
- <span class="w-10 text-right mr-2 italic">{{ i }}星</span>
- <el-progress
- :color="'#3A8EE6'"
- :percentage="row.goods.ratings > 0 ? Math.round(row.goods[`ratings${i}`] / row.goods.ratings * 100) : 0"
- :stroke-width="10"
- class="flex-1"
- striped
- striped-flow
- />
- </div>
- </div>
- <div v-else-if="field === 'all_stars'" class="flex flex-col font-normal" style="min-width: 170px">
- <ProgressBar :row="row" percentage="all_rate" />
- </div>
- <div v-else-if="field === 'status'">
- <el-tag :disable-transitions="true" :type=statusType>
- {{ statusText }}
- </el-tag>
- </div>
- <div v-else-if="field === 'operate'">
- <div class="flex justify-center gap-2 mb-2">
- <div>
- <el-tooltip :enterable="false" :show-arrow="false" content="评论详情" hide-after="0"
- placement="top" popper-class="custom-btn-tooltip">
- <PermissionButton circle plain type="success" @click="goto">
- <el-icon>
- <Tickets />
- </el-icon>
- </PermissionButton>
- </el-tooltip>
- </div>
- <div>
- <el-tooltip :enterable="false" :show-arrow="false" content="历史详情" hide-after="0"
- placement="top" popper-class="custom-btn-tooltip-2">
- <PermissionButton :color="'#6466F1'" circle plain type="success" @click="showDetail('show-history')">
- <el-icon>
- <Timer />
- </el-icon>
- </PermissionButton>
- </el-tooltip>
- </div>
- </div>
- <div class="flex justify-center gap-2">
- <div>
- <PermissionButton circle plain type="warning" @click="handleEdit">
- <el-icon>
- <Operation />
- </el-icon>
- </PermissionButton>
- </div>
- <div>
- <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.goods[field] || '-' }}
- </div>
- </div>
- </template>
- <style scoped>
- :deep(.flex-1 .el-progress__text) {
- font-size: 14px !important;
- }
- </style>
- <style lang="scss">
- .custom-btn-tooltip {
- background-color: #EFF9EB !important;
- color: #606266 !important;
- border: 1px solid #67C23A !important;
- font-size: 14px;
- }
- .custom-btn-tooltip-2 {
- background-color: #F0F0FE !important;
- color: #606266 !important;
- border: 1px solid #6466F1 !important;
- font-size: 14px;
- }
- </style>
|